/*
 * tokens.css - design tokens for the invoice_ai dashboard.
 * Location: src/aiclaim/static/dashboard/css/tokens.css (ADR-0001 section 4, ADR-0014).
 * Loaded first in layouts/base.html via static_url('css/tokens.css'), then css/app.css.
 * Canonical for motion/ (ADR-0011 section 2): motion/scripts/sync-tokens.ts parses
 * this file into motion/src/tokens.ts. Keep exactly one "--name: value;" per line.
 * Spec and contrast matrix: docs/design/design-tokens.md (plan) / docs/design/tokens.md (repo).
 * Rules: components use semantic tokens only, never --palette-*. No @font-face,
 * no component selectors, no !important in this file.
 */

/* ------------------------------------------------------------------
 * 1. PALETTE PRIMITIVES - stored as sRGB hex (lowercase, 6 digits).
 *    Components never reference these.
 *    Brand world: the Impact Hub Jakarta maroon (ruby on cream and paper),
 *    restored from the pre-rebuild dashboard.css. Anchors are the original
 *    brand hexes; the steps between them are hand-derived so every semantic
 *    pair in section 2 clears WCAG AA (contrast table: docs/design/tokens.md).
 * ------------------------------------------------------------------ */
:root {
  --palette-white: #ffffff;

  /* neutral: warm sand, derived from the brand grounds.
     50 = paper, 200 = cream, 300 = line, 600 = muted (original brand hexes). */
  --palette-neutral-50: #fffaf0;
  --palette-neutral-100: #f8efdc;
  --palette-neutral-200: #f2e5c5;
  --palette-neutral-300: #decbaa;
  --palette-neutral-400: #bfa98c;
  --palette-neutral-500: #8f7a6b;
  --palette-neutral-600: #725c54;
  --palette-neutral-700: #5e4a43;
  --palette-neutral-800: #46352f;
  --palette-neutral-900: #3a2824;
  --palette-neutral-950: #2b1519;

  /* ruby: brand + action, focus, selection, info.
     200 = rose, 800 = ruby, 900 = dark (original brand hexes). */
  --palette-ruby-50: #fff5f6;
  --palette-ruby-100: #ffe9ec;
  --palette-ruby-200: #ffdbe0;
  --palette-ruby-300: #f5bcc6;
  --palette-ruby-400: #e08a9b;
  --palette-ruby-500: #c25a72;
  --palette-ruby-600: #9c3450;
  --palette-ruby-700: #8a2440;
  --palette-ruby-800: #75162e;
  --palette-ruby-900: #550b18;
  --palette-ruby-950: #3d0711;

  /* green: positive / success. 600 = original brand green. */
  --palette-green-50: #eef6ec;
  --palette-green-100: #dcefd9;
  --palette-green-200: #bfe0bf;
  --palette-green-300: #97c99e;
  --palette-green-400: #65a878;
  --palette-green-500: #438c5c;
  --palette-green-600: #2f7d4d;
  --palette-green-700: #276b41;
  --palette-green-800: #1d5433;
  --palette-green-900: #143b24;
  --palette-green-950: #0b2415;

  /* red: negative / danger / over budget. 600 = original brand danger.
     Brighter and more orange than ruby so danger never reads as brand. */
  --palette-red-50: #fdf0ee;
  --palette-red-100: #fbdcd8;
  --palette-red-200: #f6bfb9;
  --palette-red-300: #ee9790;
  --palette-red-400: #df6a67;
  --palette-red-500: #c9444a;
  --palette-red-600: #b22634;
  --palette-red-700: #8f1c28;
  --palette-red-800: #6f141e;
  --palette-red-900: #500c14;
  --palette-red-950: #33060b;

  /* amber: warning. 500 = original brand amber (UI/fills only: 3.8:1 on its tint);
     text uses 700. */
  --palette-amber-50: #fff3df;
  --palette-amber-100: #ffe8c4;
  --palette-amber-200: #fdd49a;
  --palette-amber-300: #f2b865;
  --palette-amber-400: #d99236;
  --palette-amber-500: #b56a12;
  --palette-amber-600: #9c5b0d;
  --palette-amber-700: #8a4f0a;
  --palette-amber-800: #6c3d07;
  --palette-amber-900: #4d2b04;
  --palette-amber-950: #2e1902;

  /* violet: AI suggestion only (h 298) */
  --palette-violet-50: #f8f6fe;
  --palette-violet-100: #f2edfe;
  --palette-violet-200: #e5dcfe;
  --palette-violet-300: #d4c2ff;
  --palette-violet-400: #b49bea;
  --palette-violet-500: #9376cd;
  --palette-violet-600: #7355a9;
  --palette-violet-700: #614593;
  --palette-violet-800: #4d3577;
  --palette-violet-900: #372357;
  --palette-violet-950: #201238;

  /* orange: chart only (h 50) */
  --palette-orange-50: #fef6f1;
  --palette-orange-100: #feece3;
  --palette-orange-200: #ffd9c5;
  --palette-orange-300: #ffbd99;
  --palette-orange-400: #f18e53;
  --palette-orange-500: #d36614;
  --palette-orange-600: #a44c03;
  --palette-orange-700: #8b3f03;
  --palette-orange-800: #6e3101;
  --palette-orange-900: #502100;
  --palette-orange-950: #311100;

  /* teal: chart only (h 178) */
  --palette-teal-50: #e8fef8;
  --palette-teal-100: #d8f8f0;
  --palette-teal-200: #bcefe2;
  --palette-teal-300: #96dfce;
  --palette-teal-400: #5ebfab;
  --palette-teal-500: #1d9e89;
  --palette-teal-600: #087a69;
  --palette-teal-700: #016758;
  --palette-teal-800: #015145;
  --palette-teal-900: #003930;
  --palette-teal-950: #01221c;

  /* plum: chart only (h 345) */
  --palette-plum-50: #fff5fa;
  --palette-plum-100: #ffe9f4;
  --palette-plum-200: #fed4ea;
  --palette-plum-300: #fab6db;
  --palette-plum-400: #de8dbb;
  --palette-plum-500: #bf669b;
  --palette-plum-600: #9b467a;
  --palette-plum-700: #863768;
  --palette-plum-800: #6c2852;
  --palette-plum-900: #4e193b;
  --palette-plum-950: #310a23;

  /* blue: status info only (Submitted/Reviewed pills), user decision 2026-09-27 */
  --palette-blue-100: #e3edf8;
  --palette-blue-600: #2c64a0;
  --palette-blue-800: #164a7c;

  /* sky: chart only (h 235) */
  --palette-sky-50: #f1f9fe;
  --palette-sky-100: #e1f3ff;
  --palette-sky-200: #c3e8ff;
  --palette-sky-300: #97d7fd;
  --palette-sky-400: #62b5e4;
  --palette-sky-500: #2a94c7;
  --palette-sky-600: #01729f;
  --palette-sky-700: #055f86;
  --palette-sky-800: #024b6a;
  --palette-sky-900: #00354d;
  --palette-sky-950: #001f2f;

  /* olive: chart only (h 105) */
  --palette-olive-50: #faf9e5;
  --palette-olive-100: #f3f2d5;
  --palette-olive-200: #e7e5b7;
  --palette-olive-300: #d5d191;
  --palette-olive-400: #b5af5c;
  --palette-olive-500: #948d25;
  --palette-olive-600: #736c01;
  --palette-olive-700: #605a04;
  --palette-olive-800: #4c4701;
  --palette-olive-900: #353200;
  --palette-olive-950: #1f1d00;
}

/* ------------------------------------------------------------------
 * 2. SEMANTIC TOKENS - light theme (mandatory, the only P1 theme)
 *    Components reference these, never --palette-*.
 *    Shell: ruby sidebar, cream canvas, paper cards and topbar.
 * ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 2.1 Canvas and surfaces (cream ground, paper cards) */
  --color-bg-canvas: var(--palette-neutral-200);
  --color-surface-1: var(--palette-neutral-50);
  --color-surface-2: var(--palette-neutral-100);
  --color-surface-sunken: var(--palette-neutral-200);
  --color-surface-hover: var(--palette-neutral-100);
  --color-surface-selected: var(--palette-ruby-50);
  --color-surface-overlay: rgb(43 21 25 / 0.5);

  /* 2.2 Text */
  --color-text-primary: var(--palette-neutral-950);
  --color-text-secondary: var(--palette-neutral-700);
  --color-text-muted: var(--palette-neutral-600);
  --color-text-inverse: var(--palette-white);
  --color-text-disabled: var(--palette-neutral-500);
  --color-text-heading: var(--palette-ruby-900);

  /* 2.3 Borders and rules */
  --color-border-subtle: var(--palette-neutral-300);
  --color-border-strong: var(--palette-neutral-500);

  /* 2.4 Action, focus, selection, links, browser surfaces (ruby) */
  --color-accent: var(--palette-ruby-800);
  --color-accent-hover: var(--palette-ruby-900);
  --color-accent-active: var(--palette-ruby-950);
  --color-accent-fg: var(--palette-white);
  --color-accent-subtle: var(--palette-ruby-50);
  --color-focus-ring: var(--palette-ruby-800);
  --color-selection-bg: var(--palette-ruby-200);
  --color-selection-fg: var(--palette-neutral-950);
  --color-link: var(--palette-ruby-800);
  --color-link-hover: var(--palette-ruby-900);
  --color-caret: var(--palette-ruby-800);
  --color-scrollbar-thumb: var(--palette-neutral-500);
  --color-scrollbar-track: transparent;

  /* 2.5 Brand (wordmark, sidebar, login brand panel, video brand frames) */
  --color-brand: var(--palette-ruby-800);
  --color-brand-fg: var(--palette-white);

  /* 2.5b Sidebar (solid ruby column; read only by the shell rules in app.css) */
  --color-sidebar-bg: var(--palette-ruby-800);
  --color-sidebar-fg: var(--palette-ruby-100);
  --color-sidebar-fg-strong: var(--palette-white);
  --color-sidebar-fg-muted: var(--palette-ruby-300);
  --color-sidebar-hover-bg: var(--palette-ruby-700);
  --color-sidebar-active-bg: var(--palette-ruby-200);
  --color-sidebar-active-fg: var(--palette-ruby-900);
  --color-sidebar-active-bar: var(--palette-ruby-900);
  --color-sidebar-rule: var(--palette-ruby-600);
  --color-sidebar-focus: var(--palette-ruby-200);
  --color-sidebar-scrollbar-thumb: var(--palette-ruby-500);

  /* 2.6 Workflow status families (one token family per status, see design-tokens.md 6.3).
     Info is the brand's own "in progress" tone (ruby on rose, as the original
     submitted pill); danger is the brighter brand red so the two never merge. */
  --color-info-fg: var(--palette-blue-800);
  --color-info-bg: var(--palette-blue-100);
  --color-info-border: var(--palette-blue-600);
  --color-success-fg: var(--palette-green-700);
  --color-success-bg: var(--palette-green-50);
  --color-success-border: var(--palette-green-600);
  --color-warning-fg: var(--palette-amber-700);
  --color-warning-bg: var(--palette-amber-50);
  --color-warning-border: var(--palette-amber-500);
  --color-danger-fg: var(--palette-red-600);
  --color-danger-bg: var(--palette-red-50);
  --color-danger-border: var(--palette-red-600);
  --color-danger-solid: var(--palette-red-600);
  --color-danger-solid-hover: var(--palette-red-700);
  --color-neutral-fg: var(--palette-neutral-700);
  --color-neutral-bg: var(--palette-neutral-100);
  --color-neutral-border: var(--palette-neutral-500);

  /* 2.7 Finance semantics (colour is a secondary cue; sign, text and icon carry meaning) */
  --color-fin-positive-fg: var(--palette-green-700);
  --color-fin-positive-bg: var(--palette-green-50);
  --color-fin-positive-border: var(--palette-green-600);
  --color-fin-negative-fg: var(--palette-red-600);
  --color-fin-negative-bg: var(--palette-red-50);
  --color-fin-negative-border: var(--palette-red-600);
  --color-fin-warning-fg: var(--palette-amber-700);
  --color-fin-warning-bg: var(--palette-amber-50);
  --color-fin-warning-border: var(--palette-amber-500);
  --color-fin-over-budget-fg: var(--palette-white);
  --color-fin-over-budget-bg: var(--palette-red-600);
  --color-fin-over-budget-border: var(--palette-red-700);
  --color-fin-over-budget-fg-subtle: var(--palette-red-700);
  --color-fin-over-budget-bg-subtle: var(--palette-red-100);

  /* 2.8 AI suggestion (unconfirmed AI/extraction output ONLY; never committed data).
     Violet (h 298) stays well clear of ruby (h 8) and red: never brand, never danger. */
  --color-ai-suggestion-fg: var(--palette-violet-700);
  --color-ai-suggestion-bg: var(--palette-violet-50);
  --color-ai-suggestion-border: var(--palette-violet-600);
  --border-style-ai-suggestion: dashed;

  /* 2.9 Charts (Chart.js reads these via getComputedStyle; SVG macros via classes in app.css).
     Series 1 is the brand ruby; every series clears 3:1 on paper (surface-1). */
  --chart-series-1: var(--palette-ruby-800);
  --chart-series-2: var(--palette-teal-600);
  --chart-series-3: var(--palette-orange-600);
  --chart-series-4: var(--palette-sky-700);
  --chart-series-5: var(--palette-ruby-500);
  --chart-series-6: var(--palette-olive-700);
  --chart-series-7: var(--palette-amber-800);
  --chart-series-8: var(--palette-neutral-500);
  --chart-grid: var(--palette-neutral-300);
  --chart-axis-text: var(--palette-neutral-600);
  --chart-warn-band: var(--palette-amber-50);
  --chart-over-band: var(--palette-red-50);
  --chart-threshold-warn: var(--palette-amber-700);
  --chart-threshold-over: var(--palette-red-600);
}

/* ------------------------------------------------------------------
 * 3. THEME-INDEPENDENT TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* 3.1 Space - 4px base */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 3.2 Radius - crisp, ledger-like */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* 3.3 Shadow - elevation 0-3; offset + soft blur only, tinted with the brand dark ruby */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgb(85 11 24 / 0.06), 0 1px 3px 0 rgb(85 11 24 / 0.05);
  --shadow-2: 0 4px 10px -2px rgb(85 11 24 / 0.10), 0 2px 4px -2px rgb(85 11 24 / 0.06);
  --shadow-3: 0 16px 32px -8px rgb(85 11 24 / 0.20), 0 6px 12px -6px rgb(85 11 24 / 0.10);

  /* 3.4 Border widths */
  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --border-width-total: 3px;
  --border-width-focus: 2px;
  --border-offset-focus: 2px;

  /* 3.5 Z-index */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-copilot-panel: 30;
  --z-offcanvas: 35;
  --z-modal: 40;
  --z-toast: 50;
  --z-skip-link: 60;

  /* 3.6 Font: Barlow Semi Condensed is self-hosted for every browser.
     IBM Plex Sans remains a self-hosted fallback for missing glyphs. */
  --font-family-sans: "Barlow Semi Condensed", "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-display: "Barlow Semi Condensed", "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-feature-numeric: tabular-nums lining-nums;

  /* 3.7 Text size (fixed rem scale, ratio ~1.2; 1rem = 16px) */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-underline-offset: 0.2em;

  /* 3.8 Leading */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* 3.9 Tracking */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* 3.10 Size (fixed) */
  --size-touch-min: 24px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-copilot-panel: 25rem;
  --size-measure: 70ch;

  /* 3.11 Layout */
  --layout-sidebar-width: 15rem;
  --layout-content-max: 90rem;
  --layout-gutter: 1.5rem;
  --layout-gutter-sm: 1rem;
  --layout-topbar-height: 3.5rem;
  --size-sidebar: var(--layout-sidebar-width);
  --size-content-max: var(--layout-content-max);

  /* 3.12 Motion - names and values fixed by ADR-0010 section 2 */
  --motion-duration-instant: 60ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-duration-hero-cycle: 10000ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ------------------------------------------------------------------
 * 4. DENSITY - comfortable is the default; compact overrides on <body>
 *    Explicit values (not calc on :root): a var() inside a :root
 *    declaration resolves at :root, so a body-level --density-scale
 *    would not reach it. Component rules may still use
 *    calc(var(--space-N) * var(--density-scale)), which resolves per element.
 * ------------------------------------------------------------------ */
:root {
  --density-scale: 1;
  --size-row: 40px;
  --size-row-header: 36px;
  --space-cell-x: 12px;
  --space-cell-y: 8px;
  --size-control-sm: 28px;
  --size-control-md: 36px;
  --size-control-lg: 44px;
  --text-table: var(--text-base);
  --leading-table: 1.4;
}

body[data-density="compact"] {
  --density-scale: 0.75;
  --size-row: 32px;
  --size-row-header: 32px;
  --space-cell-x: 8px;
  --space-cell-y: 4px;
  --size-control-sm: 24px;
  --size-control-md: 30px;
  --size-control-lg: 36px;
  --text-table: var(--text-sm);
  --leading-table: 1.3;
}

/* ------------------------------------------------------------------
 * 5. REDUCED MOTION (ADR-0010 section 4)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0.01ms;
    --motion-duration-fast: 0.01ms;
    --motion-duration-base: 0.01ms;
    --motion-duration-slow: 0.01ms;
    --motion-duration-hero-cycle: 0.01ms;
  }
}

/* ------------------------------------------------------------------
 * 6. DARK THEME - OPTIONAL - not in P1 scope.
 *    Lives in css/theme-dark.css (not created, not loaded in P1;
 *    AC-UI-39 requires color-scheme: light). Nothing dark belongs here.
 * ------------------------------------------------------------------ */