/* Check-in design system: tokens.css
 * Source of truth: the "Check-in" design system (Apple style).
 * Link this file once, then use var(--token) everywhere. Never hard-code a hex value. */

:root {
  --surface-page: #F2F2F7;
  --surface-card: #FFFFFF;
  --surface-inset: #F2F2F7;
  --surface-nav: #EBEBF0;
  --separator: #D1D1D6;
  --fill-track: #E5E5EA;
  --ink: #1C1C1E;
  --ink-muted: #6C6C70;
  --ink-faint: #C7C7CC;
  --accent: #007AFF;
  --accent-pressed: #0062CC;
  --accent-tint: #E8F1FF;
  --star: #FFCC00;
  --star-tint: #FFF6D6;
  --edu: #007AFF;
  --edu-tint: #E5F1FF;
  --edu-ink: #0A5BC4;
  --health: #34C759;
  --health-tint: #E3F7E8;
  --health-ink: #1E7B34;
  --wealth: #FF9500;
  --wealth-tint: #FFF4E0;
  --wealth-ink: #A05A00;
  --family: #FF2D55;
  --family-tint: #FFE5EA;
  --family-ink: #C2123A;
  --community: #5856D6;
  --community-tint: #ECEBFA;
  --community-ink: #3634A3;
  --danger: #FF3B30;
  --danger-tint: #FFE5E3;
  --danger-ink: #D70015;
  --avatar: #A2A2A7;
  --on-accent: #FFFFFF;
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.16);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --text-large-title: 700 34px/41px var(--font-display);
  --text-title: 700 22px/28px var(--font-display);
  --text-headline: 700 20px/25px var(--font-display);
  --text-body: 400 17px/22px var(--font-sans);
  --text-body-strong: 600 17px/22px var(--font-sans);
  --text-subhead: 400 15px/20px var(--font-sans);
  --text-subhead-strong: 600 15px/20px var(--font-sans);
  --text-section-label: 600 14px/18px var(--font-sans);
  --text-kid-body: 600 18px/24px var(--font-sans);
  --text-kid-small: 400 16px/21px var(--font-sans);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --row-min: 48px;
  --target-kid: 56px;
  --radius-tile: 7px;
  --radius-control: 8px;
  --radius-inset: 10px;
  --radius-card: 12px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #000000;
    --surface-card: #1C1C1E;
    --surface-inset: #2C2C2E;
    --surface-nav: #1C1C1E;
    --separator: #38383A;
    --fill-track: #3A3A3C;
    --ink: #FFFFFF;
    --ink-muted: #AEAEB2;
    --ink-faint: #48484A;
    --accent: #0A84FF;
    --accent-pressed: #409CFF;
    --accent-tint: #0A2A4D;
    --star: #FFD60A;
    --star-tint: #3A3000;
    --edu: #0A84FF;
    --edu-tint: #0A2A4D;
    --edu-ink: #64B5FF;
    --health: #30D158;
    --health-tint: #0F3319;
    --health-ink: #7EE59A;
    --wealth: #FF9F0A;
    --wealth-tint: #3D2600;
    --wealth-ink: #FFC266;
    --family: #FF375F;
    --family-tint: #4D0F1C;
    --family-ink: #FF8FA6;
    --community: #5E5CE6;
    --community-tint: #1F1E4D;
    --community-ink: #A9A8F5;
    --danger: #FF453A;
    --danger-tint: #4D1210;
    --danger-ink: #FF8A80;
    --avatar: #636366;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

html { background: var(--surface-page); color: var(--ink); font: var(--text-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }