/*
 * CRST Strategy site tokens.
 *
 * Part 1 is Valora S&OP's tokens.css ("Sinal" v1.0) copied verbatim from
 * devrircrst/SOP_with_Pricing frontend/src/theme/tokens.css at commit 261b962, so the site matches the app exactly.
 * When Valora's file changes, copy it again over Part 1 and keep Part 2.
 * Part 2 adds the suite's accents: one per app, used only where that app has signal (its card's drawing, its status
 * and, for an app that is open, its one button).
 *
 * This is the ONLY file where colours are written; tools/check.py fails on a colour literal anywhere else.
 * The site is dark only: nothing sets data-theme="light", so the light block below is unused here.
 */

/* ═══ Part 1: Valora S&OP tokens (verbatim) ═════════════════════════════════════════════ */
/*
 * Valora S&OP design tokens: direction "Sinal", v1.0 (2026-09-27).
 * Goes to frontend/src/theme/tokens.css. This is the ONLY file where colours are written:
 * guard rule F02 blocks colour literals anywhere else. Rules and rationale: docs/DESIGN.md.
 *
 * Dark is the default. <html data-theme="light"> switches to the light theme (spec §11 theming, D-028).
 * Every colour token exists in both themes. Contrast pairs are checked by
 * .claude/skills/valora-design/scripts/check_contrast.py.
 */

/* ── Dark (default) ─────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --color-bg: #040605;                /* page */
  --color-surface: #0B100E;           /* sidebar, rail */
  --color-card: #121916;              /* cards, tables, dialogs */
  --color-elevated: #1A2320;          /* hover, tooltips, popovers, user chat bubbles */
  --color-inset: #0B100E;             /* inputs and wells inside cards */
  --color-line: #26322E;              /* borders and dividers */
  --color-line-strong: #3A4843;       /* secondary button borders, dashed drop zones */
  --color-control-border: #56706A;    /* inputs, checkboxes, selects: 3:1 against card (WCAG 1.4.11) */

  /* Text */
  --color-text: #EAF2EE;
  --color-text-2: #A3B2AC;            /* secondary */
  --color-text-3: #7E8D87;            /* captions, column headers */

  /* Action and brand: bright green only where there is signal */
  --color-action: #8FF59C;            /* the one primary button per screen, current step, focus of the cycle */
  --color-on-action: #040605;
  --color-teal: #0A7880;              /* brand fill: send button, avatar, tour tooltip */
  --color-on-teal: #FFFFFF;
  --color-link: #4CC7CF;
  --color-focus: #4CC7CF;
  --color-selected-bg: rgba(143, 245, 156, 0.08);   /* active nav item, selected row */
  --color-assist-border: rgba(143, 245, 156, 0.45); /* fields the assistant filled */
  --color-assist-bg: rgba(143, 245, 156, 0.04);

  /* Confidence tiers: one-hue ordinal ramp, always shown with a label and a shape */
  --color-tier-high: #8FF59C;
  --color-tier-medium: #3FA35C;
  --color-tier-insufficient: #56706A;
  --color-on-tier-high: #040605;      /* text inside a tier segment (distribution bars, DESIGN.md §7) */
  --color-on-tier-medium: #040605;
  --color-on-tier-insufficient: #FFFFFF;

  /* Status */
  --color-attention: #F2B84B;
  --color-attention-bg: rgba(242, 184, 75, 0.10);
  --color-attention-border: rgba(242, 184, 75, 0.38);
  --color-error: #FF8A7A;
  --color-error-bg: rgba(255, 138, 122, 0.10);
  --color-error-border: rgba(255, 138, 122, 0.40);

  /* Charts (single series; tiers use the tier tokens) */
  --color-chart-bar: #3FA35C;
  --color-chart-bar-active: #8FF59C;
  --color-chart-axis: #3A4843;

  /* Texture and depth */
  --color-dots: #3FA35C;              /* dotted background texture, page background only */
  --dots-opacity: 0.4;
  --color-glow: rgba(143, 245, 156, 0.16);
  --shadow-card: none;
  --shadow-action: 0 0 24px rgba(143, 245, 156, 0.22);
  --shadow-popover: 0 18px 40px rgba(0, 0, 0, 0.5);
  --color-backdrop: rgba(4, 6, 5, 0.6);

  /* Brand mark (CRST C3) */
  --color-mark-dots: #3FA35C;
  --color-mark-stone: #8FF59C;

  /* QR code of the second factor (D-064): dark modules on a light field in both themes, since many scanners
     cannot read a light-on-dark code */
  --color-qr-ink: #040605;
  --color-qr-paper: #EAF2EE;
}

/* ── Light ──────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #EEF2F0;
  --color-surface: #F7F9F8;
  --color-card: #FFFFFF;
  --color-elevated: #E6ECE9;
  --color-inset: #F5F8F6;
  --color-line: #D5DDDA;
  --color-line-strong: #BCC8C3;
  --color-control-border: #7F8E89;

  --color-text: #0B100E;
  --color-text-2: #3F4C47;
  --color-text-3: #5B6863;

  --color-action: #14783A;            /* green darkens so white text passes AA (5.56:1) */
  --color-on-action: #FFFFFF;
  --color-teal: #0A7880;
  --color-on-teal: #FFFFFF;
  --color-link: #0A7880;
  --color-focus: #0A7880;
  --color-selected-bg: rgba(20, 120, 58, 0.08);
  --color-assist-border: rgba(20, 120, 58, 0.45);
  --color-assist-bg: rgba(20, 120, 58, 0.035);

  --color-tier-high: #14783A;         /* on light, darkest = most confident */
  --color-tier-medium: #4FAE68;
  --color-tier-insufficient: #9DB0A9;
  --color-on-tier-high: #FFFFFF;
  --color-on-tier-medium: #0B100E;
  --color-on-tier-insufficient: #0B100E;

  --color-attention: #8A5A00;
  --color-attention-bg: rgba(242, 184, 75, 0.16);
  --color-attention-border: rgba(176, 120, 0, 0.35);
  --color-error: #B3361F;
  --color-error-bg: rgba(179, 54, 31, 0.06);
  --color-error-border: rgba(179, 54, 31, 0.35);

  --color-chart-bar: #3A8F53;         /* 4.0:1 on card; data marks stay visible without hover */
  --color-chart-bar-active: #14783A;
  --color-chart-axis: #BCC8C3;

  --color-dots: #3FA35C;
  --dots-opacity: 0.2;
  --color-glow: rgba(20, 120, 58, 0.07);
  --shadow-card: 0 1px 2px rgba(11, 16, 14, 0.05), 0 10px 28px rgba(11, 16, 14, 0.06);
  --shadow-action: 0 1px 2px rgba(11, 16, 14, 0.12);
  --shadow-popover: 0 18px 40px rgba(11, 16, 14, 0.16);
  --color-backdrop: rgba(4, 6, 5, 0.42);

  --color-mark-dots: #3FA35C;
  --color-mark-stone: #14783A;

  --color-qr-ink: #0B100E;
  --color-qr-paper: #FFFFFF;
}

/* ── Theme-independent tokens ───────────────────────────────────────────────────────── */
:root {
  /* Type: Jost for titles and big numbers, IBM Plex Sans for everything else */
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-xs: 12px;        /* captions, column headers (uppercase, 0.1em tracking) */
  --text-sm: 13px;        /* secondary text, chips */
  --text-md: 14px;        /* body, tables, buttons */
  --text-lg: 16px;        /* long-form help text */
  --title-sm: 17px;       /* card titles inside dense screens */
  --title-md: 19px;       /* card titles */
  --title-lg: 24px;       /* dialog titles */
  --title-xl: 38px;       /* page titles */
  --title-2xl: 46px;      /* the cycle hero on the dashboard */
  --text-table: 13.5px;   /* table cells (DESIGN.md §6 Tables) */
  --text-th-dense: 11px;  /* column headers of the ten-column result grids (DESIGN.md §4; D-136) */
  --text-flag: 10.5px;    /* flags and tags, uppercase (DESIGN.md §6 Flags) */
  --number-md: 26px;      /* KPI values in compact grids */
  --number-lg: 32px;      /* KPI values */
  --tracking-eyebrow: 0.3em;
  --tracking-caps: 0.1em;

  /* Shape */
  --radius-xs: 6px;       /* flags */
  --radius-sm: 10px;      /* small buttons, table wells */
  --radius-md: 12px;      /* buttons, inputs */
  --radius-lg: 16px;      /* panels inside cards, chat bubbles, tour tooltip */
  --radius-popover: 14px; /* "?" help popovers (DESIGN.md §6 Help) */
  --radius-dialog: 24px;  /* dialogs (DESIGN.md §6 Dialogs) */
  --radius-card: 22px;
  --radius-hero: 28px;
  --radius-pill: 999px;

  /* Space (4 px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shell */
  --shell-gap: 20px;
  --sidebar-width: 232px;
  --rail-width: 76px;     /* collapsed sidebar; remembered per device (localStorage nav_collapsed, D-030) */
  --control-height: 40px;
  --control-height-sm: 32px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}

/* ═══ Part 2: suite accents ═════════════════════════════════════════════════════════════
 * Each app keeps the shared Sinal neutrals, type, status colours (amber = attention, coral = error) and teal links,
 * and takes ONE accent in place of Valora's green. The accents were chosen in OKLCH: the same lightness band as
 * Valora's green (bright ~0.85, mid 0.64, light-theme 0.50), hues away from amber (80°), coral (29°) and teal (201°).
 * Selara shares Valora's green family but leans to yellow, so the two cards read as different apps side by side.
 * Contrast (WCAG): bright on --color-bg ≥ 12:1, so --color-on-action (#040605) text on it passes; mid on --color-card
 * ≥ 4.9:1 for drawn marks; the light-theme tone carries white text ≥ 5.5:1, for the apps' light themes.
 *   valora   green      147°  #8FF59C  #3FA35C  #14783A   (Valora's own action, mid and light action)
 *   selara   pistachio  127°  #BBE96F  #719B2B  #4C7002
 *   norteia  periwinkle 266°  #B0C8FF  #7186BF  #4A5B96
 *   prevera  sky        216°  #6CE2FE  #1E97B5  #056B83
 * The light-theme tones are listed for the apps; this site does not use them.
 */
:root {
  --accent-valora: #8FF59C;
  --accent-valora-mid: #3FA35C;
  --accent-valora-glow: rgba(143, 245, 156, 0.16);
  --accent-valora-soft: rgba(143, 245, 156, 0.08);
  --accent-valora-border: rgba(143, 245, 156, 0.38);

  --accent-selara: #BBE96F;
  --accent-selara-mid: #719B2B;
  --accent-selara-glow: rgba(187, 233, 111, 0.16);
  --accent-selara-soft: rgba(187, 233, 111, 0.08);
  --accent-selara-border: rgba(187, 233, 111, 0.38);

  --accent-norteia: #B0C8FF;
  --accent-norteia-mid: #7186BF;
  --accent-norteia-glow: rgba(176, 200, 255, 0.16);
  --accent-norteia-soft: rgba(176, 200, 255, 0.08);
  --accent-norteia-border: rgba(176, 200, 255, 0.38);

  --accent-prevera: #6CE2FE;
  --accent-prevera-mid: #1E97B5;
  --accent-prevera-glow: rgba(108, 226, 254, 0.16);
  --accent-prevera-soft: rgba(108, 226, 254, 0.08);
  --accent-prevera-border: rgba(108, 226, 254, 0.38);

  /* The drawings' grid of dots, the "malha" of the CRST mark */
  --color-mesh: #7E8D87;
  --mesh-opacity: 0.26;
}