import { Platform, type TextStyle, type ViewStyle } from "react-native";
 
// Flat Light design tokens: light mode only, one theme colour, flat surfaces
// that blend (hairlines and soft grey fills, not shadows).
// Never hard-code a colour, size, radius or shadow in a screen: add it here first.
 
/** The theme colour. Must be ≥ 4.5:1 on white, so it works for text and fills. */
const THEME = "#0F7B57";
const THEME_SOFT = "#E7F3EE";
 
export const colors = {
  bgPrimary: "#FFFFFF",
  surface: "#FFFFFF",
  /** Soft grey fill: inputs, chips, tiles, secondary buttons, "their" chat bubbles, skeletons. */
  surfaceMuted: "#F2F4F5",
  hairline: "#E6E9EB",
  /** The theme colour: primary buttons, active tab, links, selected states, focus. */
  ink: THEME,
  /** Theme tint: selected chips, active tab pill, "my" chat bubbles, icon circles, unread rows. */
  inkSoft: THEME_SOFT,
  textPrimary: "#111B21",
  textSecondary: "#54656F",
  textMuted: "#667781",
  /** Placeholder and fine print (sign-in). */
  textTertiary: "#8696A0",
  onInk: "#FFFFFF",
  onInkMuted: "rgba(255,255,255,0.8)",
  /** Translucent white control on a theme-coloured surface (the offline pill's Retry). */
  onInkSubtle: "rgba(255,255,255,0.16)",
  accentFlash: "#D5EDE3",
  accent: THEME,
  accentText: THEME,
  accentSoft: THEME_SOFT,
  success: THEME,
  danger: "#D93F3F",
  dangerSoft: "#FDECEC",
  warning: "#C77700",
  warningText: "#9A5B00",
  warningSoft: "#FFF4E0",
  info: "#2F6FDB",
  infoSoft: "#EAF1FD",
  neutralSoft: "#F2F4F5",
  scrim: "rgba(17,27,33,0.4)",
  gold: "#F5B800",
  silver: "#A7B0B7",
  bronze: "#C27A3A",
} as const;
 
/** 4px spacing scale. */
export const space = {
  1: 4,
  2: 8,
  3: 12,
  4: 16,
  5: 20,
  6: 24,
  8: 32,
  10: 40,
  12: 48,
  16: 64,
} as const;
 
export const radius = { sm: 6, md: 12, lg: 14, xl: 20, full: 9999 } as const;
 
export const iconSize = { sm: 16, md: 20, lg: 24 } as const;
 
/** Fixed component sizes, so no screen invents its own. */
export const size = {
  touch: 44, // minimum touch target, icon buttons
  button: 48, // Button / TextField height
  buttonCompact: 36,
  authControl: 50, // sign-in buttons and fields
  appBar: 56, // header row
  tabBarItem: 56,
  tabIndicatorW: 60,
  tabIndicatorH: 32,
  avatarSm: 28, // chat bubble avatar
  avatar: 44, // people rows
  avatarLg: 48, // group / chat list rows
  avatarXl: 72, // profile header
  iconCircle: 40, // notification / activity icons
  emptyIcon: 72,
  rowMin: 64,
  rowMinLarge: 76,
} as const;
 
// React Native picks a weight by font family, so tokens name the family.
export const fonts = {
  light: "Inter_300Light",
  regular: "Inter_400Regular",
  medium: "Inter_500Medium",
  semibold: "Inter_600SemiBold",
  bold: "Inter_700Bold",
  mono: "JetBrainsMono_500Medium",
} as const;
 
// Sized like native list apps: 15pt body, 16–20pt headings, one big light number.
export const typeScale = {
  micro: { fontFamily: fonts.regular, fontSize: 11, lineHeight: 14 }, // timestamps in rows
  xs: { fontFamily: fonts.medium, fontSize: 11, lineHeight: 14 }, // badges, captions
  caption: { fontFamily: fonts.medium, fontSize: 12, lineHeight: 16 }, // tab labels, day pills, sender names
  sm: { fontFamily: fonts.regular, fontSize: 13, lineHeight: 18 }, // sublines, helper text
  label: { fontFamily: fonts.medium, fontSize: 14, lineHeight: 19 }, // chips, section headers, notices
  base: { fontFamily: fonts.regular, fontSize: 15, lineHeight: 20 }, // body, row titles (+semibold)
  lg: {
    fontFamily: fonts.semibold,
    fontSize: 16,
    lineHeight: 21,
    letterSpacing: -0.2,
  },
  xl: {
    fontFamily: fonts.semibold,
    fontSize: 18,
    lineHeight: 23,
    letterSpacing: -0.2,
  },
  title: {
    fontFamily: fonts.semibold,
    fontSize: 20,
    lineHeight: 25,
    letterSpacing: -0.3,
  },
  "2xl": {
    fontFamily: fonts.semibold,
    fontSize: 22,
    lineHeight: 27,
    letterSpacing: -0.4,
  },
  wordmark: {
    fontFamily: fonts.bold,
    fontSize: 24,
    lineHeight: 30,
    letterSpacing: -0.6,
  },
  "3xl": {
    fontFamily: fonts.semibold,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: -0.6,
  },
  display: {
    fontFamily: fonts.light,
    fontSize: 60,
    lineHeight: 68,
    letterSpacing: -1.6,
  },
} satisfies Record<string, TextStyle>;
 
/** Sign-in screens use Apple's larger text styles (set in the same font). */
export const authType = {
  largeTitle: {
    fontFamily: fonts.bold,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: -0.5,
  },
  title3: {
    fontFamily: fonts.semibold,
    fontSize: 20,
    lineHeight: 25,
    letterSpacing: -0.2,
  },
  body: {
    fontFamily: fonts.regular,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: -0.2,
  },
  callout: {
    fontFamily: fonts.regular,
    fontSize: 16,
    lineHeight: 21,
    letterSpacing: -0.15,
  },
  subheadline: {
    fontFamily: fonts.regular,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: -0.1,
  },
  footnote: { fontFamily: fonts.regular, fontSize: 13, lineHeight: 18 },
  caption: { fontFamily: fonts.medium, fontSize: 12, lineHeight: 16 },
  mono: { fontFamily: fonts.mono, fontSize: 13, lineHeight: 18 },
} satisfies Record<string, TextStyle>;
 
/** Digits line up in columns (scores, counts, prices, times). */
export const tabular: TextStyle = { fontVariant: ["tabular-nums"] };
 
// Flat by default. Only things that float over content get a faint shadow.
export const shadow = {
  floating: Platform.select<ViewStyle>({
    ios: {
      shadowColor: "#000000",
      shadowOpacity: 0.08,
      shadowRadius: 12,
      shadowOffset: { width: 0, height: 4 },
    },
    default: { elevation: 3 },
  }),
};
 
export const motion = {
  tap: 80,
  flash: 150,
  fast: 150,
  base: 250,
  celebrate: 600,
  toast: 3500,
} as const;
 
/** Opacity for disabled controls. One value everywhere. */
export const disabledOpacity = 0.45;
 
/** Space under scrolling content on tab screens (the tab bar is in the layout). */
export const tabBarClearance = 24;

import { forwardRef } from "react";
import { Pressable, type PressableProps, type ViewStyle } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
 
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
/** Spring scale on press: the only press feedback style in the app. */
export const PressableScale = forwardRef<
  typeof AnimatedPressable,
  PressableProps & { pressScale?: number }
>(function PressableScale(
  { pressScale = 0.98, style, onPressIn, onPressOut, children, ...rest },
  ref
) {
  const scale = useSharedValue(1);
  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
  return (
    <AnimatedPressable
      ref={ref as never}
      onPressIn={(e) => {
        scale.value = withSpring(pressScale, {
          damping: 18,
          stiffness: 320,
          mass: 0.6,
        });
        onPressIn?.(e);
      }}
      onPressOut={(e) => {
        scale.value = withSpring(1, { damping: 16, stiffness: 260, mass: 0.6 });
        onPressOut?.(e);
      }}
      style={[animated, style as ViewStyle]}
      {...rest}
    >
      {children as never}
    </AnimatedPressable>
  );
});

import {
  useEffect,
  useState,
  type ComponentProps,
  type ReactNode,
} from "react";
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TextInput,
  View,
  type StyleProp,
  type TextInputProps,
  type ViewStyle,
} from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";
import { Image } from "expo-image";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView } from "react-native-safe-area-context";
import { PressableScale } from "./pressable-scale";
import {
  colors,
  disabledOpacity,
  fonts,
  iconSize,
  radius,
  size,
  space,
  typeScale,
} from "@/lib/tokens";
 
export type IconName = ComponentProps<typeof Ionicons>["name"];
 
/* ── Button: pill. primary (theme) · secondary (grey) · ghost (theme text) · destructive (red tint) ── */
type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
const buttonTone: Record<ButtonVariant, { bg: string; fg: string }> = {
  primary: { bg: colors.ink, fg: colors.onInk },
  secondary: { bg: colors.surfaceMuted, fg: colors.textPrimary },
  ghost: { bg: "transparent", fg: colors.ink },
  destructive: { bg: colors.dangerSoft, fg: colors.danger },
};
 
export function Button(props: {
  label: string;
  onPress: () => void;
  variant?: ButtonVariant;
  icon?: IconName;
  loading?: boolean;
  disabled?: boolean;
  compact?: boolean;
  style?: StyleProp<ViewStyle>;
}) {
  const {
    label,
    onPress,
    variant = "primary",
    icon,
    loading = false,
    disabled = false,
    compact = false,
    style,
  } = props;
  const inactive = disabled || loading;
  const tone = buttonTone[variant];
  return (
    <PressableScale
      onPress={onPress}
      disabled={inactive}
      pressScale={0.98}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled: inactive, busy: loading }}
      style={[
        s.button,
        compact && s.buttonCompact,
        { backgroundColor: tone.bg },
        inactive && s.inactive,
        style,
      ]}
    >
      {loading ? (
        <ActivityIndicator color={tone.fg} />
      ) : (
        <>
          {icon ? (
            <Ionicons
              name={icon}
              size={iconSize.md}
              color={tone.fg}
              style={{ marginRight: space[2] }}
            />
          ) : null}
          <Text
            style={[
              typeScale.base,
              { fontFamily: fonts.semibold, color: tone.fg },
            ]}
          >
            {label}
          </Text>
        </>
      )}
    </PressableScale>
  );
}
 
/* ── IconButton: 44pt bare glyph (24) or a theme circle with a white 20 glyph (send) ── */
export function IconButton({
  icon,
  label,
  onPress,
  tone = "surface",
  disabled = false,
}: {
  icon: IconName;
  label: string;
  onPress: () => void;
  tone?: "surface" | "ink";
  disabled?: boolean;
}) {
  const ink = tone === "ink";
  return (
    <PressableScale
      onPress={onPress}
      disabled={disabled}
      hitSlop={4}
      pressScale={0.9}
      android_ripple={{
        color: colors.surfaceMuted,
        borderless: true,
        radius: 22,
      }}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled }}
      style={[
        s.iconButton,
        ink && { backgroundColor: colors.ink },
        disabled && s.inactive,
      ]}
    >
      <Ionicons
        name={icon}
        size={ink ? iconSize.md : iconSize.lg}
        color={ink ? colors.onInk : colors.textPrimary}
      />
    </PressableScale>
  );
}
 
/* ── ListRow: THE list pattern. Flat white row; separators come from <Divider inset>. ── */
export function ListRow({
  leading,
  title,
  subtitle,
  meta,
  trailing,
  onPress,
  onLongPress,
  unread,
  accessibilityLabel,
}: {
  leading?: ReactNode;
  title: string;
  subtitle?: string;
  meta?: string;
  trailing?: ReactNode;
  onPress?: () => void;
  onLongPress?: () => void;
  unread?: boolean;
  accessibilityLabel?: string;
}) {
  const body = (
    <View style={[s.row, unread && { backgroundColor: colors.inkSoft }]}>
      {leading}
      <View style={{ flex: 1 }}>
        <View style={s.rowTitleLine}>
          <Text
            style={[
              typeScale.base,
              {
                fontFamily: fonts.semibold,
                color: colors.textPrimary,
                flex: 1,
              },
            ]}
            numberOfLines={1}
          >
            {title}
          </Text>
          {meta ? (
            <Text style={[typeScale.micro, { color: colors.textMuted }]}>
              {meta}
            </Text>
          ) : null}
        </View>
        {subtitle ? (
          <Text
            style={[typeScale.sm, { color: colors.textSecondary }]}
            numberOfLines={1}
          >
            {subtitle}
          </Text>
        ) : null}
      </View>
      {trailing}
    </View>
  );
  if (!onPress && !onLongPress) return body;
  return (
    <PressableScale
      onPress={onPress}
      onLongPress={onLongPress}
      delayLongPress={300}
      pressScale={0.99}
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel ?? title}
    >
      {body}
    </PressableScale>
  );
}
 
/* ── Divider: hairline; inset = 16 + leading size + 12, so it starts under the text ── */
export function Divider({ inset = 0 }: { inset?: number }) {
  return (
    <View
      style={{
        height: StyleSheet.hairlineWidth,
        backgroundColor: colors.hairline,
        marginLeft: inset,
      }}
    />
  );
}
export const rowInset = (leadingSize: number) =>
  space[4] + leadingSize + space[3];
 
/* ── Card: only for self-contained objects (QR, share image, grouped settings, stat block) ── */
export function Card({
  children,
  style,
  padded = true,
}: {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
  padded?: boolean;
}) {
  return (
    <View style={[s.card, padded && { padding: space[4] }, style]}>
      {children}
    </View>
  );
}
 
/* ── Chip: grey pill; selected = theme tint + theme semibold text ── */
export function Chip({
  label,
  icon,
  selected = false,
  onPress,
}: {
  label: string;
  icon?: IconName;
  selected?: boolean;
  onPress: () => void;
}) {
  return (
    <PressableScale
      onPress={onPress}
      pressScale={0.98}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ selected }}
      style={[s.chip, selected && { backgroundColor: colors.inkSoft }]}
    >
      {icon ? (
        <Ionicons
          name={icon}
          size={iconSize.sm}
          color={selected ? colors.ink : colors.textSecondary}
          style={{ marginRight: space[1] + 2 }}
        />
      ) : null}
      <Text
        numberOfLines={1}
        style={[
          typeScale.label,
          { color: selected ? colors.ink : colors.textSecondary },
          selected && { fontFamily: fonts.semibold },
        ]}
      >
        {label}
      </Text>
    </PressableScale>
  );
}
 
/* ── Badge: small tinted pill (roles, statuses) ── */
export function Badge({
  label,
  tone = "neutral",
}: {
  label: string;
  tone?: "theme" | "info" | "warning" | "danger" | "neutral";
}) {
  const t = {
    theme: [colors.inkSoft, colors.ink],
    info: [colors.infoSoft, colors.info],
    warning: [colors.warningSoft, colors.warningText],
    danger: [colors.dangerSoft, colors.danger],
    neutral: [colors.neutralSoft, colors.textSecondary],
  }[tone];
  return (
    <View
      style={{
        backgroundColor: t[0],
        borderRadius: radius.sm,
        paddingHorizontal: space[2],
        paddingVertical: 2,
      }}
    >
      <Text style={[typeScale.xs, { color: t[1] }]}>{label}</Text>
    </View>
  );
}
 
/* ── Monogram & Avatar: initial in a tinted circle; image layered on top ── */
const monogramTones = [
  [colors.accentSoft, colors.accentText],
  [colors.infoSoft, colors.info],
  [colors.warningSoft, colors.warningText],
  [colors.neutralSoft, colors.textSecondary],
];
export function Monogram({
  name,
  size: d = size.avatarLg,
}: {
  name: string;
  size?: number;
}) {
  const tone =
    monogramTones[
      [...name].reduce((n, ch) => n + ch.charCodeAt(0), 0) %
        monogramTones.length
    ];
  return (
    <View
      style={{
        width: d,
        height: d,
        borderRadius: radius.full,
        backgroundColor: tone[0],
        alignItems: "center",
        justifyContent: "center",
      }}
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
    >
      <Text
        style={{
          fontFamily: fonts.semibold,
          fontSize: Math.round(d * 0.4),
          color: tone[1],
        }}
      >
        {name.trim().charAt(0).toUpperCase() || "?"}
      </Text>
    </View>
  );
}
export function Avatar({
  uri,
  name,
  size: d = size.avatar,
}: {
  uri?: string;
  name: string;
  size?: number;
}) {
  const [failed, setFailed] = useState(false);
  if (!uri || failed) return <Monogram name={name} size={d} />;
  return (
    <View style={{ width: d, height: d }} accessible accessibilityLabel={name}>
      <Monogram name={name} size={d} />
      <Image
        source={{ uri }}
        style={[StyleSheet.absoluteFill, { borderRadius: radius.full }]}
        onError={() => setFailed(true)}
      />
    </View>
  );
}
 
/* ── EmptyState: icon circle, title, one sentence, at most one action ── */
export function EmptyState({
  icon,
  title,
  message,
  actionLabel,
  onAction,
}: {
  icon: IconName;
  title: string;
  message?: string;
  actionLabel?: string;
  onAction?: () => void;
}) {
  return (
    <View style={s.empty}>
      <View style={s.emptyIcon}>
        <Ionicons name={icon} size={30} color={colors.ink} />
      </View>
      <Text
        style={[
          typeScale.lg,
          { color: colors.textPrimary, textAlign: "center" },
        ]}
      >
        {title}
      </Text>
      {message ? (
        <Text
          style={[
            typeScale.base,
            {
              color: colors.textSecondary,
              textAlign: "center",
              marginTop: space[1],
            },
          ]}
        >
          {message}
        </Text>
      ) : null}
      {actionLabel && onAction ? (
        <Button
          label={actionLabel}
          onPress={onAction}
          style={{ marginTop: space[6], alignSelf: "stretch" }}
        />
      ) : null}
    </View>
  );
}
 
/* ── TextField: label above a grey field; theme border on focus; error or hint below ── */
export function TextField({
  label,
  error,
  hint,
  mono = false,
  style,
  onFocus,
  onBlur,
  ...rest
}: TextInputProps & {
  label: string;
  error?: string;
  hint?: string;
  mono?: boolean;
}) {
  const [focused, setFocused] = useState(false);
  return (
    <View style={{ marginBottom: space[4] }}>
      <Text
        style={[
          typeScale.sm,
          {
            fontFamily: fonts.medium,
            color: colors.textSecondary,
            marginBottom: space[1] + 2,
          },
        ]}
      >
        {label}
      </Text>
      <TextInput
        placeholderTextColor={colors.textMuted}
        selectionColor={colors.ink}
        cursorColor={colors.ink}
        accessibilityLabel={label}
        accessibilityHint={hint}
        {...rest}
        onFocus={(e) => {
          setFocused(true);
          onFocus?.(e);
        }}
        onBlur={(e) => {
          setFocused(false);
          onBlur?.(e);
        }}
        style={[
          typeScale.base,
          s.input,
          mono && { fontFamily: fonts.mono, letterSpacing: 2 },
          focused && s.inputFocused,
          error ? { borderColor: colors.danger } : null,
          style,
        ]}
      />
      {error ? (
        <Text
          style={[typeScale.sm, { color: colors.danger, marginTop: space[1] }]}
        >
          {error}
        </Text>
      ) : hint ? (
        <Text
          style={[
            typeScale.sm,
            { color: colors.textMuted, marginTop: space[1] },
          ]}
        >
          {hint}
        </Text>
      ) : null}
    </View>
  );
}
 
/* ── ErrorBanner / Notice ── */
export function ErrorBanner({ message }: { message: string }) {
  return (
    <View
      style={[s.notice, { backgroundColor: colors.dangerSoft }]}
      accessibilityRole="alert"
    >
      <Ionicons name="alert-circle" size={iconSize.md} color={colors.danger} />
      <Text style={[typeScale.base, { color: colors.textPrimary, flex: 1 }]}>
        {message}
      </Text>
    </View>
  );
}
 
/* ── SectionHeader: small grey label with an optional theme action ── */
export function SectionHeader({
  title,
  actionLabel,
  onAction,
}: {
  title: string;
  actionLabel?: string;
  onAction?: () => void;
}) {
  return (
    <View style={s.sectionHeader}>
      <Text
        style={[
          typeScale.label,
          { fontFamily: fonts.semibold, color: colors.textSecondary },
        ]}
        accessibilityRole="header"
      >
        {title}
      </Text>
      {actionLabel && onAction ? (
        <PressableScale
          onPress={onAction}
          hitSlop={10}
          pressScale={0.95}
          accessibilityRole="button"
          accessibilityLabel={actionLabel}
        >
          <Text
            style={[
              typeScale.label,
              { fontFamily: fonts.semibold, color: colors.ink },
            ]}
          >
            {actionLabel}
          </Text>
        </PressableScale>
      ) : null}
    </View>
  );
}
 
/* ── Screen: white SafeAreaView + plain app bar (back arrow, title, subtitle, right actions) ── */
export function Screen({
  title,
  subtitle,
  back = false,
  right,
  children,
}: {
  title?: string;
  subtitle?: string;
  back?: boolean;
  right?: ReactNode;
  children: ReactNode;
}) {
  const router = useRouter();
  const goBack = () =>
    router.canGoBack() ? router.back() : router.replace("/(tabs)");
  return (
    <SafeAreaView
      style={{ flex: 1, backgroundColor: colors.bgPrimary }}
      edges={["top"]}
    >
      <StatusBar style="dark" />
      {title || back || right ? (
        <View style={s.header}>
          {back ? (
            <IconButton icon="arrow-back" label="Go back" onPress={goBack} />
          ) : null}
          <View style={{ flex: 1, marginLeft: back ? space[1] : space[3] }}>
            {title ? (
              <Text
                style={[typeScale.title, { color: colors.textPrimary }]}
                numberOfLines={1}
                accessibilityRole="header"
              >
                {title}
              </Text>
            ) : null}
            {subtitle ? (
              <Text
                style={[typeScale.sm, { color: colors.textSecondary }]}
                numberOfLines={1}
              >
                {subtitle}
              </Text>
            ) : null}
          </View>
          {right}
        </View>
      ) : null}
      {children}
    </SafeAreaView>
  );
}
 
/* ── SkeletonRow: pulsing grey block in the shape of the content ── */
export function SkeletonRow({ height = size.rowMin }: { height?: number }) {
  const opacity = useSharedValue(0.5);
  useEffect(() => {
    opacity.value = withRepeat(withTiming(1, { duration: 750 }), -1, true);
  }, [opacity]);
  const animated = useAnimatedStyle(() => ({ opacity: opacity.value }));
  return (
    <Animated.View
      style={[
        {
          height,
          borderRadius: radius.md,
          backgroundColor: colors.surfaceMuted,
          marginBottom: space[3],
        },
        animated,
      ]}
      accessibilityLabel="Loading"
    />
  );
}
 
const s = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    minHeight: size.appBar,
    paddingHorizontal: space[2],
    gap: space[1],
  },
  button: {
    minHeight: size.button,
    borderRadius: radius.full,
    paddingHorizontal: space[5],
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonCompact: { minHeight: size.buttonCompact, paddingHorizontal: space[4] },
  inactive: { opacity: disabledOpacity },
  iconButton: {
    width: size.touch,
    height: size.touch,
    borderRadius: radius.full,
    alignItems: "center",
    justifyContent: "center",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: space[3],
    minHeight: size.rowMin,
    paddingHorizontal: space[4],
    paddingVertical: space[3],
    backgroundColor: colors.surface,
  },
  rowTitleLine: { flexDirection: "row", alignItems: "center", gap: space[2] },
  card: {
    backgroundColor: colors.surface,
    borderRadius: radius.lg,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.hairline,
  },
  chip: {
    minHeight: 34,
    borderRadius: radius.full,
    paddingHorizontal: space[3] + 2,
    paddingVertical: space[1] + 2,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.surfaceMuted,
  },
  empty: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: space[8],
  },
  emptyIcon: {
    width: size.emptyIcon,
    height: size.emptyIcon,
    borderRadius: radius.full,
    backgroundColor: colors.inkSoft,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: space[4],
  },
  input: {
    minHeight: size.button,
    color: colors.textPrimary,
    backgroundColor: colors.surfaceMuted,
    borderWidth: 1,
    borderColor: colors.surfaceMuted,
    borderRadius: radius.md,
    paddingHorizontal: space[4],
    paddingVertical: space[3],
  },
  inputFocused: { borderColor: colors.ink, backgroundColor: colors.surface },
  notice: {
    flexDirection: "row",
    alignItems: "center",
    gap: space[2],
    borderRadius: radius.md,
    padding: space[3],
    marginBottom: space[4],
  },
  sectionHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: space[6],
    marginBottom: space[2],
    minHeight: 32,
  },
});

┌──────────────────────────────────────────────────────────┐
│ 16 │(avatar 44–48)│ 12 │ Title (base semibold)  meta(11) │ 16
│    │              │    │ Subline (sm, secondary, 1 line)  │
└──────────────────────────────────────────────────────────┘
          └── hairline starts here: 16 + avatar + 12 ──────

app/
  _layout.tsx            fonts → providers → auth redirect → Stack (headerShown: false)
  (auth)/_layout.tsx     Stack, animation "fade", white
  (auth)/login.tsx, register.tsx, auth/callback.tsx
  (tabs)/_layout.tsx     Tabs with the custom tab bar, max 4 tabs
  (tabs)/index.tsx       home (the product's main screen)
  (tabs)/…               other tab roots
  settings.tsx, notifications.tsx, blocked.tsx …   stack screens
  thing/[id].tsx          detail
  thing/new.tsx           create form
  thing/invite/[id].tsx   presentation: "fullScreenModal", animation: "slide_from_bottom"
index.tsx                 custom entry: crash guard around expo-router's App

AuthBackground (white SafeArea, top+bottom)
  KeyboardAvoidingView → ScrollView (centred vertically, padding 20×32)
    Brand block (fade-in-down 500ms): BrandMark 72 · App name (largeTitle) · tagline (body secondary) · optional TerminalLine/tagline visual
    Form (fade-in-down, delay 120ms):
      AuthNotice (error / session expired)
      Primary social button ("Continue with GitHub/Google") · Sign in with Apple (iOS, same size)
      "Sign in with email" plain link → reveals: divider "OR WITH EMAIL" · fields · grey "Sign in" pill
    Footer: "New to {App}? Create an account"
    LegalConsent: "By continuing, you agree to the Terms of Use and Privacy Policy…" (links in theme)

Screen(title, subtitle=count, right=IconButton "+")
  [optional] Chip filter row
  FlatList of ListRow (flat) + inset Divider separators, pull-to-refresh

Custom header: wordmark · share · bell(badge) · add  +  segment tabs (hairline below)
FlatList
  ListHeader: Hero (label · display number + chevron · stat line) · context chips · divider · notices · primary action row
  Rows: ranked/primary items (flat)
  ListFooter: summary row · management action rows
Overlays: celebration toast · action sheet · create sheet

Screen(back, title, subtitle=name)
  ScrollView (padding 16, pull-to-refresh)
    Hero Card: Monogram 56 · name (xl) · badge · meta · description
    Primary/secondary action button(s)
    SectionHeader + content (stat tiles card / people rows)
    "See all N" ghost button when the list is truncated (max 8 inline)
    Destructive action at the bottom ("Leave club"), confirmed

Identity card (avatar 72 · name xl · @handle mono · badge · context)
[picker chips if multiple contexts]
SectionHeader "Streak" → streak card (flame circle 64, 3xl count, longest/freezes, at-risk/broken notice)
SectionHeader "Score" → period chips → card (display number, rank, 2×2 tiles)
SectionHeader "Recent activity" → flat activity rows (icon circle 40)

Screen(back, "Settings")
  ScrollView padding 16
    For each section: UPPERCASE label (xs semibold, letterSpacing 0.8, secondary, 24 above, 8 below)
                      Card(padded=false) of settings rows (icon circle 36 · title · detail · chevron)
    Sections: Account/Security · Privacy and safety (Blocked people, Privacy Policy, Terms) · About (Help and support, Version, Signed in as)
    Secondary "Sign out" · Destructive "Delete account" · small note on what deletion removes

Screen(back, "New club")
  ScrollView padding 16
    Help sentence (base secondary, 20 below)
    Card padding 20: ErrorBanner · TextFields (autofocus first, max lengths, hints for optional fields) · Primary submit (icon)