/* tokens.css — Design tokens for enroute.delivery
 * Single source of truth for brand colors, typography, spacing.
 * Imported before any page-specific CSS. */

:root {
  /* ===== Brand ============================================ */
  --brand:         #00AA3D;
  --brand-hover:   #009335;
  --brand-press:   #00782B;
  --brand-soft:    #E5F8EC;

  /* ===== Ink (neutrals) =================================== */
  --ink-900: #0A0D0B;
  --ink-800: #161A18;
  --ink-700: #232825;
  --ink-600: #333A35;
  --ink-500: #4A524D;
  --ink-400: #6B756F;
  --ink-300: #9AA39D;
  --ink-200: #C9D0CB;
  --ink-100: #E6EAE7;
  --ink-50:  #F4F6F4;

  /* ===== Surfaces ========================================= */
  --paper:   #FFFFFF;
  --canvas:  #FAFBF9;

  /* ===== Status =========================================== */
  --error:   #ff8a8e;        /* on dark */
  --error-on-light: #E5484D;

  /* ===== Type ============================================= */
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* ===== Radii ============================================ */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-pill: 9999px;

  /* ===== Spacing (4-px base) ============================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  36px;
  --space-8:  44px;
  --space-9:  48px;
  --space-10: 64px;

  /* ===== Motion =========================================== */
  --dur-fast: 80ms;
  --dur-base: 150ms;
  --dur-slow: 280ms;

  /* ========================================================
     DESIGN-SYSTEM TOKENS (Claude Design re-skin)
     Full --enroute-* scales + semantic aliases consumed by the
     .app-* and .chip component classes (components.css).
     Values reconciled against the canonical
     docs/design-system/project/colors_and_type.css and the
     wireframe export :root. Existing tokens above are kept;
     these are additive.
     ======================================================== */

  /* ----- Brand green ----- */
  --enroute-green-50:  #E5F8EC;
  --enroute-green-100: #BFEFD0;
  --enroute-green-200: #8AE2AB;
  --enroute-green-300: #4FD083;
  --enroute-green-400: #1FBE63;
  --enroute-green-500: #00AA3D;   /* PRIMARY */
  --enroute-green-600: #009335;
  --enroute-green-700: #00782B;
  --enroute-green-800: #005C21;
  --enroute-green-900: #003E16;

  /* ----- Ink (neutrals) ----- */
  --enroute-ink-50:  #F4F6F4;
  --enroute-ink-100: #E6EAE7;
  --enroute-ink-200: #C9D0CB;
  --enroute-ink-300: #9AA39D;
  --enroute-ink-400: #6B756F;
  --enroute-ink-500: #4A524D;
  --enroute-ink-600: #333A35;
  --enroute-ink-700: #232825;
  --enroute-ink-800: #161A18;
  --enroute-ink-900: #0A0D0B;     /* PRIMARY INK */

  /* ----- Accents: amber ----- */
  --enroute-amber-50:  #FEF6E5;
  --enroute-amber-100: #FCEDCB;
  --enroute-amber-200: #F7D88A;
  --enroute-amber-500: #F4A923;
  --enroute-amber-800: #6B4A0F;

  /* ----- Accents: cobalt ----- */
  --enroute-cobalt-50:  #EEF2FF;
  --enroute-cobalt-100: #DCE5FF;
  --enroute-cobalt-200: #B8C8FF;
  --enroute-cobalt-500: #2C5BFF;
  --enroute-cobalt-600: #1E45D1;
  --enroute-cobalt-700: #173399;
  --enroute-cobalt-800: #0F2266;

  /* ----- Accents: rose ----- */
  --enroute-rose-50:  #FCE9E9;
  --enroute-rose-100: #FCE4E4;
  --enroute-rose-200: #F5B7B7;
  --enroute-rose-400: #ED6F73;
  --enroute-rose-500: #E5484D;
  --enroute-rose-600: #C8323A;
  --enroute-rose-700: #8B1F26;

  /* ----- Accents: teal -----
     GAP FIX: .chip.s-transit references these but the wireframe
     export never defines them. Values from colors_and_type.css. */
  --enroute-teal-500: #14B6A6;
  --enroute-teal-100: #CDF1ED;

  /* ----- Surfaces ----- */
  --bg-canvas: #FAFBF9;
  --bg-paper:  #FFFFFF;
  --bg-sunken: #F2F4F1;

  /* ----- Semantic: foreground ----- */
  --fg-1: var(--enroute-ink-900);  /* primary text */
  --fg-2: var(--enroute-ink-600);  /* secondary text */
  --fg-3: var(--enroute-ink-400);  /* tertiary / labels */
  --fg-4: var(--enroute-ink-300);  /* disabled / hints */

  /* ----- Semantic: borders ----- */
  --border-1: rgba(10, 13, 11, 0.08);  /* hairline */
  --border-2: rgba(10, 13, 11, 0.14);  /* default */
  --border-3: rgba(10, 13, 11, 0.24);  /* strong */

  /* ----- Type (mono companion to --font-sans above) ----- */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Radii (design-system scale) ----- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-sm: 0 1px 2px rgba(10,13,11,0.06), 0 1px 1px rgba(10,13,11,0.04);
  --shadow-md: 0 6px 14px -4px rgba(10,13,11,0.10), 0 2px 4px rgba(10,13,11,0.04);

  /* ----- Focus ring (always brand-green) ----- */
  --focus-ring: 0 0 0 3px rgba(0, 170, 61, 0.35);
}

/* ::selection in brand */
::selection { background: rgba(0,170,61,0.25); color: #fff; }