/* ══════════════════════════════════════════════════════════════
   CARRYON DESIGN TOKENS
   ══════════════════════════════════════════════════════════════
   Three layers. Never skip a layer — components (Layer 3) must
   only ever reference Layer 2 aliases, never Layer 1 primitives
   and never raw hex/px values directly.

   Layer 1 — PRIMITIVES (--ds-*)
     Raw, non-semantic values. A palette, a spacing ramp, a type
     scale. These don't know what they're used FOR, only what
     they ARE. CarryOn has no external/upstream design system
     (no Tailwind, no Material) to consume, so these are derived
     directly from the color/spacing/type audit of the existing
     app (see specs/tokens/token-reference.md for the full audit).

   Layer 2 — PROJECT ALIASES (semantic names, theme-aware)
     What the app already had (--accent, --bg, --text-1, --r-xl,
     --shadow-md, --ease, etc.) — kept as-is on purpose so no
     component CSS needs to change names. Each alias now points
     at a Layer 1 primitive with a literal fallback, e.g.
       --accent: var(--ds-blue-600, #2F5D8C);
     so the alias still resolves correctly even if Layer 1 is
     ever swapped out or partially missing.

   Layer 3 — COMPONENTS (in index.html's <style> block)
     Only ever write var(--accent), var(--space-4), var(--r-lg),
     etc. Never a hex code, never a raw px value. If the alias
     you need doesn't exist yet, add it here in Layer 2 — don't
     reach for a raw value as a shortcut.
   ══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────
   LAYER 1 — PRIMITIVES
   ────────────────────────────────────────── */
:root {
  /* Brand blue (current --accent scale) */
  --ds-blue-700:#24486B;
  --ds-blue-600:#2F5D8C;
  --ds-blue-500:#5A80AB;
  --ds-blue-100:#E8F1FA;
  --ds-blue-600-rgb:47,93,140;

  /* Neutrals — light theme */
  --ds-neutral-0:#FFFFFF;
  --ds-neutral-25:#FAFAF8;
  --ds-neutral-50:#F7F8FA;
  --ds-neutral-100:#F0EDE8;
  --ds-neutral-150:#EDEBE6;
  --ds-neutral-200:#E6E2DC;
  --ds-neutral-300:#DDD9D3;
  --ds-neutral-400:#C0B9B0;
  --ds-neutral-500:#96908A;
  --ds-neutral-600:#8E96A1;
  --ds-neutral-700:#656B78;
  --ds-neutral-800:#5A544E;
  --ds-neutral-900:#1F2933;

  /* Neutrals — dark theme */
  --ds-neutral-dark-0:#111009;
  --ds-neutral-dark-50:#1C1A16;
  --ds-neutral-dark-100:#222018;
  --ds-neutral-dark-150:#252220;
  --ds-neutral-dark-200:#26231C;
  --ds-neutral-dark-300:#2C2924;
  --ds-neutral-dark-400:#36322A;
  --ds-neutral-dark-500:#54504A;
  --ds-neutral-dark-600:#867F77;
  --ds-neutral-dark-700:#C0B9B0;
  --ds-neutral-dark-900:#EDE9E3;

  /* Indigo — day/evening/business trip badges */
  --ds-indigo-100:#EEF2FF;
  --ds-indigo-700:#3730A3;
  --ds-indigo-dark-900:#1E1B4B;
  --ds-indigo-dark-300:#A5B4FC;

  /* Amber — "chip on" state (packing item selected) */
  --ds-amber-100:#FDF2E3;
  --ds-amber-400:#C9963E;
  --ds-amber-800:#7A4E0E;
  --ds-amber-dark-100:#271E0E;
  --ds-amber-dark-400:#8B5A18;
  --ds-amber-dark-300:#D2A350;

  /* Tan — neutral chip state */
  --ds-tan-100:#F0EDE8;
  --ds-tan-300:#DDD9D3;
  --ds-tan-700:#5A544E;
  --ds-tan-dark-100:#222018;
  --ds-tan-dark-300:#36322A;
  --ds-tan-dark-600:#96908A;

  /* Status colors — consolidated. The audit found 3 different
     greens (#4CAF50, #34D399, #22C55E/#16a34a) and 2 different
     blues (#2F5D8C brand + #3B82F6) doing the same semantic job
     in different places. Collapsed to one primitive per status. */
  --ds-green-500:#4CAF50;
  --ds-green-500-rgb:76,175,80;
  --ds-green-700:#16A34A;
  --ds-red-500:#C84040;
  --ds-red-500-rgb:200,64,64;
  --ds-info-500:#3B82F6;
  --ds-info-500-rgb:59,130,246;
  --ds-info-700:#2563EB;

  /* White — used for text/icons sitting on a solid accent fill,
     independent of light/dark theme (the fill itself is always
     the same blue either way). */
  --ds-white:#FFFFFF;

  /* Shadow ink */
  --ds-shadow-rgb:0,0,0;

  /* Radius scale */
  --ds-radius-1:2px;
  --ds-radius-2:4px;
  --ds-radius-3:6px;
  --ds-radius-4:8px;
  --ds-radius-5:10px;
  --ds-radius-6:12px;
  --ds-radius-7:16px;
  --ds-radius-8:22px;
  --ds-radius-full:100px;
  --ds-radius-circle:50%;

  /* Spacing scale — 4px base, 8 steps */
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:20px;
  --ds-space-6:24px;
  --ds-space-7:32px;
  --ds-space-8:40px;
  --ds-space-9:48px;
  --ds-space-10:56px;
  --ds-space-11:72px;
  --ds-space-12:96px;

  /* Type scale */
  --ds-font-size-1:10px;
  --ds-font-size-2:11px;
  --ds-font-size-3:12px;
  --ds-font-size-4:13px;
  --ds-font-size-5:14px;
  --ds-font-size-6:16px;
  --ds-font-size-7:18px;
  --ds-font-size-8:21px;
  --ds-font-size-9:28px;
  --ds-font-size-10:38px;
  --ds-font-size-11:54px;

  --ds-font-weight-light:300;
  --ds-font-weight-regular:400;
  --ds-font-weight-medium:500;
  --ds-font-weight-semibold:600;
  --ds-font-weight-bold:700;

  --ds-line-height-tight:1;
  --ds-line-height-snug:1.3;
  --ds-line-height-normal:1.6;

  /* Elevation (kept in sync with existing --shadow-* values) */
  --ds-shadow-sm:0 1px 4px rgba(var(--ds-shadow-rgb),.07),0 1px 2px rgba(var(--ds-shadow-rgb),.04);
  --ds-shadow-md:0 4px 16px rgba(var(--ds-shadow-rgb),.09),0 2px 6px rgba(var(--ds-shadow-rgb),.05);
  --ds-shadow-lg:0 10px 36px rgba(var(--ds-shadow-rgb),.11),0 4px 14px rgba(var(--ds-shadow-rgb),.06);

  /* z-index scale — named by role, not by number */
  --ds-z-raised:2;
  --ds-z-overlay:500;
  --ds-z-dropdown:1000;
  --ds-z-popover:1200;
  --ds-z-toast:2000;

  /* Motion */
  --ds-duration-fast:150ms;
  --ds-duration-base:200ms;
  --ds-duration-slow:250ms;
  --ds-duration-slower:300ms;
  --ds-duration-slowest:400ms;
  --ds-easing-standard:cubic-bezier(.4,0,.2,1);
}


/* ──────────────────────────────────────────
   LAYER 2 — PROJECT ALIASES
   Same names the app already used for color/radius/shadow/ease,
   now pointed at Layer 1 with a literal fallback. Plus new
   aliases for spacing, type, z-index, and status colors that
   didn't have names before.
   ────────────────────────────────────────── */
:root {
  /* Brand */
  --accent: var(--ds-blue-600, #2F5D8C);
  --accent-lt: var(--ds-blue-500, #5A80AB);
  --accent-pale: var(--ds-blue-100, #E8F1FA);
  --accent-rgb: var(--ds-blue-600-rgb, 47,93,140);

  /* Status — use these instead of a hardcoded green/red/blue */
  --color-success: var(--ds-green-500, #4CAF50);
  --color-success-rgb: var(--ds-green-500-rgb, 76,175,80);
  --color-success-strong: var(--ds-green-700, #16A34A);
  --color-danger: var(--ds-red-500, #C84040);
  --color-danger-rgb: var(--ds-red-500-rgb, 200,64,64);
  --color-info: var(--ds-info-500, #3B82F6);
  --color-info-rgb: var(--ds-info-500-rgb, 59,130,246);
  --color-info-strong: var(--ds-info-700, #2563EB);

  /* Text/icon color on top of a solid --accent fill */
  --on-accent: var(--ds-white, #fff);

  /* Typography */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --font-size-1: var(--ds-font-size-1, 10px);
  --font-size-2: var(--ds-font-size-2, 11px);
  --font-size-3: var(--ds-font-size-3, 12px);
  --font-size-4: var(--ds-font-size-4, 13px);
  --font-size-5: var(--ds-font-size-5, 14px);
  --font-size-6: var(--ds-font-size-6, 16px);
  --font-size-7: var(--ds-font-size-7, 18px);
  --font-size-8: var(--ds-font-size-8, 21px);
  --font-size-9: var(--ds-font-size-9, 28px);
  --font-size-10: var(--ds-font-size-10, 38px);
  --font-size-11: var(--ds-font-size-11, 54px);
  --font-weight-light: var(--ds-font-weight-light, 300);
  --font-weight-regular: var(--ds-font-weight-regular, 400);
  --font-weight-medium: var(--ds-font-weight-medium, 500);
  --font-weight-semibold: var(--ds-font-weight-semibold, 600);
  --font-weight-bold: var(--ds-font-weight-bold, 700);
  --line-height-tight: var(--ds-line-height-tight, 1);
  --line-height-snug: var(--ds-line-height-snug, 1.3);
  --line-height-normal: var(--ds-line-height-normal, 1.6);

  /* Spacing */
  --space-1: var(--ds-space-1, 4px);
  --space-2: var(--ds-space-2, 8px);
  --space-3: var(--ds-space-3, 12px);
  --space-4: var(--ds-space-4, 16px);
  --space-5: var(--ds-space-5, 20px);
  --space-6: var(--ds-space-6, 24px);
  --space-7: var(--ds-space-7, 32px);
  --space-8: var(--ds-space-8, 40px);
  --space-9: var(--ds-space-9, 48px);
  --space-10: var(--ds-space-10, 56px);
  --space-11: var(--ds-space-11, 72px);
  --space-12: var(--ds-space-12, 96px);

  /* Radius (existing names, kept) */
  --r-sm: var(--ds-radius-3, 6px);
  --r-md: var(--ds-radius-5, 10px);
  --r-lg: var(--ds-radius-7, 16px);
  --r-xl: var(--ds-radius-8, 22px);
  --r-full: var(--ds-radius-full, 100px);
  --r-circle: var(--ds-radius-circle, 50%);

  /* Elevation (existing names, kept) */
  --shadow-sm: var(--ds-shadow-sm);
  --shadow-md: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);

  /* z-index (new — raw numbers in components still to be migrated) */
  --z-raised: var(--ds-z-raised, 2);
  --z-overlay: var(--ds-z-overlay, 500);
  --z-dropdown: var(--ds-z-dropdown, 1000);
  --z-popover: var(--ds-z-popover, 1200);
  --z-toast: var(--ds-z-toast, 2000);

  /* Motion (existing name kept, new duration steps added) */
  --ease: all var(--ds-duration-base, 200ms) var(--ds-easing-standard, cubic-bezier(.4,0,.2,1));
  --duration-fast: var(--ds-duration-fast, 150ms);
  --duration-base: var(--ds-duration-base, 200ms);
  --duration-slow: var(--ds-duration-slow, 250ms);
  --duration-slower: var(--ds-duration-slower, 300ms);
  --duration-slowest: var(--ds-duration-slowest, 400ms);
}

/* Theme-dependent aliases — light */
[data-theme="light"] {
  --bg: var(--ds-neutral-25, #FAFAF8);
  --bg-card: var(--ds-neutral-0, #FFFFFF);
  --bg-card2: var(--ds-neutral-50, #F7F8FA);
  --bg-input: var(--ds-neutral-0, #FFFFFF);
  --bg-hover: var(--ds-blue-100, #E8EFF8);
  --text-1: var(--ds-neutral-900, #1F2933);
  --text-2: var(--ds-neutral-700, #656B78);
  --text-3: var(--ds-neutral-600, #8E96A1);
  --text-4: var(--ds-neutral-400, #BCC2CE);
  --border: var(--ds-neutral-200, #E6E2DC);
  --divider: var(--ds-neutral-150, #EDEBE6);

  --bd-day-bg: var(--ds-indigo-100, #EEF2FF);
  --bd-day-tx: var(--ds-indigo-700, #3730A3);
  --bd-eve-bg: var(--ds-indigo-100, #EEF2FF);
  --bd-eve-tx: var(--ds-indigo-700, #3730A3);
  --bd-biz-bg: var(--ds-indigo-100, #EEF2FF);
  --bd-biz-tx: var(--ds-indigo-700, #3730A3);

  --ch-bg: var(--ds-tan-100, #F0EDE8);
  --ch-bd: var(--ds-tan-300, #DDD9D3);
  --ch-tx: var(--ds-tan-700, #5A544E);
  --ch-on-bg: var(--ds-amber-100, #FDF2E3);
  --ch-on-bd: var(--ds-amber-400, #C9963E);
  --ch-on-tx: var(--ds-amber-800, #7A4E0E);
}

/* Theme-dependent aliases — dark */
[data-theme="dark"] {
  --bg: var(--ds-neutral-dark-0, #111009);
  --bg-card: var(--ds-neutral-dark-50, #1C1A16);
  --bg-card2: var(--ds-neutral-dark-100, #222018);
  --bg-input: var(--ds-neutral-dark-50, #1C1A16);
  --bg-hover: var(--ds-neutral-dark-200, #26231C);
  --text-1: var(--ds-neutral-dark-900, #EDE9E3);
  --text-2: var(--ds-neutral-dark-700, #C0B9B0);
  --text-3: var(--ds-neutral-dark-600, #867F77);
  --text-4: var(--ds-neutral-dark-500, #54504A);
  --border: var(--ds-neutral-dark-300, #2C2924);
  --divider: var(--ds-neutral-dark-150, #252220);

  --bd-day-bg: var(--ds-indigo-dark-900, #1E1B4B);
  --bd-day-tx: var(--ds-indigo-dark-300, #A5B4FC);
  --bd-eve-bg: var(--ds-indigo-dark-900, #1E1B4B);
  --bd-eve-tx: var(--ds-indigo-dark-300, #A5B4FC);
  --bd-biz-bg: var(--ds-indigo-dark-900, #1E1B4B);
  --bd-biz-tx: var(--ds-indigo-dark-300, #A5B4FC);

  --ch-bg: var(--ds-tan-dark-100, #222018);
  --ch-bd: var(--ds-tan-dark-300, #36322A);
  --ch-tx: var(--ds-tan-dark-600, #96908A);
  --ch-on-bg: var(--ds-amber-dark-100, #271E0E);
  --ch-on-bd: var(--ds-amber-dark-400, #8B5A18);
  --ch-on-tx: var(--ds-amber-dark-300, #D2A350);
}