/* ============================================================================
   SafeWay DriveCenter — design tokens (EXTRACTED FROM THE LIVE CODEBASE)
   ----------------------------------------------------------------------------
   This is the REAL token system the app already ships (apps/web/src/app/
   globals.css), not a guess. Values are space-separated RGB channels so
   Tailwind can do `bg-brand/20` etc.; hex is in the comments for the designer.

   For Gonzalo: this is YOUR token sheet to own and change — a starting seed so
   you're not on a blank page, NOT a spec to obey. Change any value. The system
   is already light + dark, AA-considered, with the primary ACTION color resolved
   to ink (not the yellow). The only two asks: keep it tokenized (centralized
   here, not hardcoded per screen) and build screens from Catalyst's components —
   that's what lets our side map your work 1:1 into production. Open decisions are
   marked  ⟵ DECIDE.

   ⚠ ONE INCONSISTENCY TO RESOLVE FIRST (the single most important call):
     The Catalyst APP uses brand yellow #ffed00.
     The marketing homepage uses #FFCB05 — flagged in-code as "the REAL
     safewaydriving.com yellow." Pick ONE canonical brand yellow. We recommend
     #FFCB05 (the real brand). Either way, neither yellow can carry text/buttons
     on white — which is why the action color below is ink, and stays ink.
   ============================================================================ */

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;     /* app UI face */
  --font-display: "Overpass", var(--font-sans);                   /* marketing homepage only */
  --radius-control: 0.65rem;   /* buttons / inputs (--sw-radius-control) */
  --radius-card: 1rem;         /* cards / panels (--sw-radius-card)      */
}

:root {                         /* ---------- LIGHT ---------- */
  --color-canvas: 255 255 255;        /* #FFFFFF  app background        */
  --color-surface: 255 255 255;       /* #FFFFFF  cards                 */
  --color-elevated: 255 255 255;      /* #FFFFFF  popover / menu        */
  --color-surface-soft: 247 247 247;  /* #F7F7F7  subtle fill / active  */
  --color-border: 229 229 229;        /* #E5E5E5  hairline              */
  --color-border-strong: 212 212 212; /* #D4D4D4  divider               */

  --color-fg: 17 17 17;               /* #111111  primary text          */
  --color-muted: 82 82 82;            /* #525252  secondary (~7:1)       */
  --color-subtle: 110 110 110;        /* #6E6E6E  tertiary (~4.9:1, AA)  */

  --color-brand: 255 237 0;           /* #FFED00  ⟵ DECIDE vs #FFCB05    */
  --color-brand-fg: 0 0 0;            /* text/icon ON yellow — always black */
  --color-brand-deep: 230 210 0;      /* #E6D200  hover on yellow fills  */
  --color-brand-muted: 254 249 195;   /* #FEF9C3  pale-yellow tint       */
  --color-brand-muted-fg: 0 0 0;      /* black text on the tint          */

  --color-action: 17 17 17;           /* #111111  PRIMARY ACTION = ink (AA both modes) — confirm */
  --color-action-fg: 255 255 255;     /* #FFFFFF  text on the action     */
  --color-focus: 17 17 17;            /* focus ring                      */

  --color-success: 21 128 61;         /* #15803D */
  --color-warning: 180 83 9;          /* #B45309  orange-leaning, distinct from brand */
  --color-danger: 220 38 38;          /* #DC2626 */
  --color-info: 3 105 161;            /* #0369A1 */
  --color-success-on-tint: 22 101 52; /* #166534  (text on a success tint) */
  --color-warning-on-tint: 146 64 14; /* #92400E */
  --color-danger-on-tint: 185 28 28;  /* #B91C1C */
  --color-info-on-tint: 7 89 133;     /* #075985 */
}

.dark {                         /* ---------- DARK (in scope — client asked for it) ---------- */
  --color-canvas: 10 10 10;           /* #0A0A0A */
  --color-surface: 22 22 22;          /* #161616 */
  --color-elevated: 31 31 31;         /* #1F1F1F */
  --color-surface-soft: 26 26 26;     /* #1A1A1A */
  --color-border: 42 42 42;           /* #2A2A2A */
  --color-border-strong: 61 61 61;    /* #3D3D3D */

  --color-fg: 250 250 250;            /* #FAFAFA */
  --color-muted: 163 163 163;         /* #A3A3A3 */
  --color-subtle: 138 138 138;        /* #8A8A8A  ~6:1 on canvas */

  --color-brand: 255 237 0;           /* yellow pops on dark — same DECIDE applies */
  --color-brand-fg: 0 0 0;
  --color-brand-deep: 230 210 0;
  --color-brand-muted: 61 55 8;       /* #3D3708  dark yellow tint */
  --color-brand-muted-fg: 255 237 0;  /* brand-yellow text on the dark tint */

  --color-action: 250 250 250;        /* #FAFAFA  inverse ink reads as the action on dark — confirm */
  --color-action-fg: 17 17 17;        /* #111111 */
  --color-focus: 255 237 0;           /* yellow ring is high-contrast on dark */

  --color-success: 34 197 94;         /* #22C55E */
  --color-warning: 245 158 11;        /* #F59E0B */
  --color-danger: 248 113 113;        /* #F87171 */
  --color-info: 56 189 248;           /* #38BDF8 */
  --color-success-on-tint: 74 222 128;/* #4ADE80 */
  --color-warning-on-tint: 251 191 36;/* #FBBF24 */
  --color-danger-on-tint: 248 113 113;/* #F87171 */
  --color-info-on-tint: 56 189 248;   /* #38BDF8 */
}

/* NOTE for Gonzalo's Claude: in our globals.css the action color is named
   `--color-accent` (not `--color-action`). It is renamed `--color-action` here
   only to read clearly in the brief; map it back to `--color-accent` on handoff. */