/* ============================================================
   ENVOY — Design Tokens (light mode)
   Mirrors the Figma variables + text styles in Envoy-MVP 1:1
   (Colors, Spacing, Radius collections; Typography styles).
   Single source of truth for envoy-appv2.html and the token /
   component sheets. Figma name → CSS name: slash becomes dash
   (text/primary → --text-primary). Every token has an RN hint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Faculty+Glyphic&display=swap');

:root {

  /* ---------- Text colours ---------- */
  --text-primary:        #141414;                  /* primary copy, list titles            */
  --text-secondary:      #666666;                  /* secondary copy, captions             */
  --text-tertiary:       #9C9C9C;                  /* section labels, timestamps           */
  --text-muted:          #98A1AD;                  /* placeholders, resend timer           */
  --text-on-dark:        #FFFFFF;                  /* text on dark / inverse surfaces      */
  --text-link:           #2B6FD0;                  /* inline links, "See all"              */
  --text-success:        #1E8E3E;                  /* credits, connected, completed        */
  --text-destructive:    #FF3B30;                  /* delete, close card                   */

  /* ---------- Background colours ---------- */
  --bg-page:             #FAFAFA;                  /* screen fill (Figma frame fill)       */
  --bg-primary:          #FFFFFF;                  /* cards, grouped lists, sheets         */
  --bg-subtle:           #F0F0F0;                  /* inset fills, subtle buttons, avatars */
  --bg-dark:             #141414;                  /* primary button, black avatar         */
  --bg-ink:              #0B1220;                  /* display headings, PiP, wordmark      */

  /* ---------- Border colours ---------- */
  --border-default:      #E3E3E3;                  /* inputs, chips, field boxes           */
  --border-light:        #CDCDCD;                  /* chevrons, disabled ink               */
  --border-muted:        #DDE3EA;                  /* OTP cells, field prefix divider      */

  /* ---------- Accent colours ---------- */
  --accent-warm:         #D97757;                  /* Claude / agent warm accent           */
  --accent-blue:         #59AFFF;                  /* progress ring, info banner, return   */
  --accent-green:        #34C759;                  /* toggles, done steps, status dot      */
  --accent-red:          #FF3B30;                  /* destructive fills                    */
  --accent-ios-blue:     #007AFF;                  /* iOS system blue (calendar, Done)     */

  /* ---------- Tints & system fills ---------- */
  --tint-green:          rgba(52,199,89,0.20);     /* success pill, credit avatar          */
  --tint-blue:           rgba(89,175,255,0.20);    /* info banner                          */
  --tint-warm:           rgba(217,119,87,0.14);    /* warning banner                       */
  --tint-red:            rgba(255,59,48,0.12);     /* destructive button                   */
  --ios-separator:       rgba(60,60,67,0.12);      /* grouped-list separator               */
  --ios-segment-bg:      rgba(118,118,128,0.12);   /* UISegmentedControl track             */
  --ios-scrim:           rgba(0,0,0,0.32);         /* sheet scrim                          */
  --ios-grabber:         rgba(60,60,67,0.30);      /* sheet grabber                        */
  --ios-keyboard-bg:     #D1D3D9;                  /* UIKeyboard light                     */
  --ios-key-dark:        #ADB3BE;                  /* shift / delete / 123 keys            */
  --ios-toggle-off:      #E9E9EB;                  /* UISwitch off                         */

  /* ---------- Typography — RN: expo-font (Geist, GeistMono, FacultyGlyphic) ---------- */
  --font-display:        'Faculty Glyphic', Georgia, 'Times New Roman', serif;   /* display headings, amounts */
  --font-ui:             'Geist', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:           'Geist Mono', 'SF Mono', ui-monospace, monospace;

  --text-display:        24px;   /* Display · Faculty Glyphic 24/30 · screen titles       */
  --text-display-hero:   34px;   /* Display Hero · Faculty Glyphic 34/40 · welcome        */
  --text-display-amount: 54px;   /* Display Amount · Faculty Glyphic 54/50 · balance      */
  --text-amount:         15px;   /* Amount · Faculty Glyphic 15/22 · ledger amounts       */
  --text-amount-sm:      14px;   /* Amount Small · Faculty Glyphic 14/22 · home ledger    */
  --text-title-1:        25px;   /* Title 1 · Geist 25/30 · numeric keys                  */
  --text-title-2:        23px;   /* Title 2 · Geist 23/28 · alpha keys                    */
  --text-title-3:        20px;   /* Title 3 · Geist 20/26 · tab-screen titles             */
  --text-body-lg:        17px;   /* Body Large · Geist 17/24 · inputs, nav title, buttons */
  --text-body:           16px;   /* Body · Geist 16/22 · list titles                      */
  --text-body-sm:        15px;   /* Body Small · Geist 15/22 · body copy, kv rows         */
  --text-caption:        13px;   /* Caption · Geist 13/18 · meta, chips, small buttons    */
  --text-micro:          11px;   /* Micro · Geist 11/16 · fine print, section labels      */

  --leading-display:        30px;
  --leading-display-hero:   40px;
  --leading-display-amount: 50px;
  --leading-amount:         22px;
  --leading-amount-sm:      22px;
  --leading-title-1:        30px;
  --leading-title-2:        28px;
  --leading-title-3:        26px;
  --leading-body-lg:        24px;
  --leading-body:           22px;
  --leading-body-sm:        22px;
  --leading-caption:        18px;
  --leading-micro:          16px;

  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;

  --tracking-display:    -0.4px;  /* letterSpacing: -0.4 — Display          */
  --tracking-button:     -0.2px;  /* letterSpacing: -0.2 — Button Large     */
  --tracking-mono:        0.6px;  /* letterSpacing: 0.6  — Label / Section  */

  /* ---------- Spacing — Figma scale, px = pt in RN ---------- */
  --space-2xs:  4px;
  --space-xs:   6px;
  --space-sm:   10px;
  --space-md:   12px;
  --space-lg:   14px;
  --space-xl:   16px;
  --space-2xl:  20px;
  --space-3xl:  24px;   /* layout rhythm — not yet a Figma variable */
  --space-4xl:  32px;   /* layout rhythm — not yet a Figma variable */
  --space-5xl:  40px;   /* layout rhythm — not yet a Figma variable */

  /* ---------- Radius ---------- */
  --radius-xs:   4px;    /* field box, small button        */
  --radius-sm:   6px;    /* keyboard keys                  */
  --radius-md:   8px;    /* buttons, lists, cards, chips   */
  --radius-lg:   10px;   /* segmented control, URL bar     */
  --radius-xl:   14px;   /* agent logo 44, card face, 40px buttons */
  --radius-2xl:  18px;   /* external card, PiP             */
  --radius-3xl:  24px;   /* success mark                   */
  --radius-full: 999px;

  /* ---------- Shadows — RN: shadow* props (iOS) ---------- */
  --shadow-card:         0 1px 2px rgba(0,0,0,0.04);
  --shadow-pill:         0 1px 2px rgba(11,18,32,0.06);
  --shadow-button-inset: inset 0 -2px 1px rgba(0,0,0,0.25);
  --shadow-float:        0 8px 32px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.06);
  --shadow-sheet:        0 -8px 40px rgba(0,0,0,0.16);
  --shadow-mark:         0 12px 40px rgba(89,175,255,0.35);   /* success mark glow */
  --shadow-key:          0 1px 0 #898A8D;

  /* ---------- Layout — iPhone 17 Pro (402 × 874 pt, Dynamic Island) ---------- */
  --device-w:        402px;
  --device-h:        874px;
  --device-radius:   62px;
  --safe-top:        59px;
  --safe-bottom:     34px;
  --gutter:          20px;
  --navbar-h:        44px;
  --tabbar-h:        62px;
  --keyboard-h:      264px;
  --keyboard-num-h:  270px;

  /* ---------- Motion — RN: react-native-reanimated ---------- */
  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    480ms;
  --dur-splash:  1100ms;
}