/* ═══════════════════════════════════════════════════════════════════════════
   ORIX Design System v2 — token foundation (B0.2)
   ───────────────────────────────────────────────────────────────────────────
   Source of truth: docs/product/ORIX_DESIGN_SYSTEM_V2.md (Gate 1, frozen).

   THREE LAYERS — components may reference layer 2 and 3 only.

     Layer 1  --orix-*            brand primitives — the ONLY place raw hex lives
     Layer 2  --color-*, --space-*, --shadow-*, --font-*, …   semantic tokens
     Layer 3  --btn-*, --card-*, --panel-*, --cal-*           component tokens

   RULES
   - No component ever references a layer-1 primitive or a raw hex value.
   - No token is ever removed. Legacy --wm-* / --rl-* names are RETAINED and
     re-pointed at ORIX primitives, so unmigrated screens inherit the ORIX look
     without a single screen file being touched (token-first, not screen-first).
   - Dark theme is a pure SEMANTIC REMAP: only layer-2/3 values change, never a
     component rule. It is OPT-IN via [data-theme="dark"] until the shell theme
     toggle and the full dark audit ship (see the note above the dark block).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
     LAYER 1 — ORIX brand primitives
     The only block that needs to change for a reskin or a per-organisation
     theme. Values are the approved Gate 1 palette.
     ───────────────────────────────────────────────────────────────────────── */

  /* Core brand */
  --orix-cobalt:#2563EB;          /* Electric Cobalt — the single brand accent */
  --orix-cobalt-deep:#1D4ED8;
  --orix-cobalt-press:#1E40AF;
  --orix-cobalt-soft:#EEF3FF;
  --orix-cobalt-bright:#4C87F4;   /* dark-theme accent (lifts off dark ground) */

  /* Obsidian — ink & dark ground */
  --orix-obsidian:#0B1B2E;        /* Obsidian Navy — headings/ink, Admin hue */
  --orix-obsidian-black:#0B0F19;  /* dark-theme canvas */
  --orix-obsidian-700:#122036;
  --orix-obsidian-600:#1E293B;

  /* Titanium — the neutral ramp (cool, slate-biased: kills the grey-on-grey) */
  --orix-titanium-900:#0F1B2B;
  --orix-titanium-800:#1E293B;
  --orix-titanium-700:#334155;
  --orix-titanium-600:#475569;
  --orix-titanium-500:#64748B;    /* Titanium Slate */
  --orix-titanium-400:#94A3B8;
  --orix-titanium-300:#CBD5E1;
  --orix-titanium-200:#E4EAF1;
  --orix-titanium-150:#EEF2F7;
  --orix-titanium-100:#F1F5F9;
  --orix-titanium-50:#F5F8FC;
  --orix-white:#F8FAFC;           /* Titanium White */
  --orix-pure-white:#FFFFFF;

  /* Signal hues */
  --orix-amber:#F59E0B;           /* Cyber Amber */
  --orix-amber-deep:#B45309;
  --orix-green:#16A34A;
  --orix-green-bright:#34D399;
  --orix-red:#DC2626;
  --orix-red-bright:#F87171;

  /* Module hues (Gate 1 — 10-hue system; colour = meaning) */
  --orix-m-dashboard:#2563EB;
  --orix-m-planning:#0EA5E9;
  --orix-m-projects:#7C3AED;
  --orix-m-assignments:#4F46E5;
  --orix-m-hours:#16A34A;
  --orix-m-reports:#F59E0B;
  --orix-m-inventory:#14B8A6;
  --orix-m-customers:#1E3A8A;
  --orix-m-assets:#64748B;
  --orix-m-admin:#0B1B2E;

  /* ── Legacy primitives — RETAINED, re-pointed at ORIX ──────────────────────
     Never removed (no token is ever removed). Re-pointing them is what makes
     unmigrated screens adopt the ORIX neutrals without touching a screen.
     The organisation red hue is DELIBERATELY unchanged: it remains the organisation
     accent and the error/danger hue per the frozen brand rules. */
  --wm-blue:var(--orix-cobalt);            --wm-blue-hover:var(--orix-cobalt-deep);
  --wm-blue-deep:var(--orix-cobalt-press); --wm-blue-muted:var(--orix-cobalt-soft);
  --wm-teal:var(--orix-m-inventory);       --wm-teal-muted:#E4F3F1;
  --wm-ink:var(--orix-obsidian);           --wm-charcoal:var(--orix-titanium-800);
  --wm-grey-600:var(--orix-titanium-600);  --wm-grey-400:var(--orix-titanium-400);
  --wm-grey-300:var(--orix-titanium-300);  --wm-grey-200:var(--orix-titanium-200);
  --wm-grey-100:var(--orix-titanium-100);  --wm-white:var(--orix-pure-white);

  --rl-red:#F30010; --rl-red-dark:#C2000D; --rl-red-deeper:#8A0009;
  --rl-red-muted:#FDE8EA; --rl-black:#000000;
  --rl-nav:var(--orix-obsidian);
  --rl-charcoal:var(--orix-titanium-800);
  --rl-grey-600:var(--orix-titanium-600);  --rl-grey-400:var(--orix-titanium-400);
  --rl-grey-300:var(--orix-titanium-300);  --rl-grey-200:var(--orix-titanium-200);
  --rl-grey-100:var(--orix-titanium-100);  --rl-white:var(--orix-pure-white);


  /* ─────────────────────────────────────────────────────────────────────────
     LAYER 2 — semantic tokens (the layer components consume)
     ───────────────────────────────────────────────────────────────────────── */

  /* Brand / interactive */
  --color-primary:var(--orix-cobalt);
  --color-primary-hover:var(--orix-cobalt-deep);
  --color-primary-pressed:var(--orix-cobalt-press);
  --color-primary-muted:var(--orix-cobalt-soft);
  --color-on-primary:var(--orix-pure-white);
  --color-accent:var(--orix-m-inventory);
  --color-accent-muted:#E4F3F1;

  /* Surfaces — elevation-first: surfaces stay calm, depth comes from shadow */
  --color-background:var(--orix-titanium-50);
  --color-surface:var(--orix-pure-white);
  --color-surface-sunken:var(--orix-titanium-100);
  --color-surface-hover:var(--orix-titanium-100);
  --color-surface-raised:var(--orix-pure-white);

  /* Text */
  --color-heading:var(--orix-obsidian);
  --color-text:var(--orix-titanium-800);
  --color-text-muted:var(--orix-titanium-600);
  --color-text-subtle:var(--orix-titanium-400);
  --color-text-on-dark:var(--orix-white);

  /* Lines — thinner presence in v2; elevation carries separation */
  --color-border:var(--orix-titanium-200);
  --color-border-subtle:var(--orix-titanium-150);
  --color-border-strong:var(--orix-titanium-300);

  /* Focus & shadow colour */
  --color-focus-ring:rgba(37,99,235,0.28);
  --color-shadow:rgba(11,27,46,0.10);

  /* Status / feedback */
  --color-success:var(--orix-green);       --color-success-bg:#E7F6EC;  --color-success-border:#C3E6CB;
  --color-warning:var(--orix-amber-deep);  --color-warning-bg:#FDF3E3;  --color-warning-border:#FFE08A;
  --color-info:var(--orix-cobalt);         --color-info-bg:var(--orix-cobalt-soft); --color-info-border:#BFDBFE;
  --color-error:var(--rl-red);             --color-error-bg:var(--rl-red-muted);
  --color-danger:var(--rl-red-dark);       --color-danger-hover:var(--rl-red-deeper);
  --color-org-accent:var(--rl-red);        /* Redlime Telecom Group = organisation identity */

  /* Navigation chrome — day mode: white sidebar (ORIX Shell & Theme
     Foundation, D1). --color-nav-border is deliberately UNCHANGED here: it
     still drives .app-nav-item.active's legitimate accent underline at
     tablet/mobile widths. The structural sidebar/header/bottom-nav borders
     (the "felblauwe lijnen" finding) now read --color-nav-divider instead —
     see app.css. --color-nav-hover-bg/--color-nav-divider were already
     defined but unused; day mode gives them values appropriate for a WHITE
     surface (dark tints), night mode keeps its existing white-on-navy tints
     unchanged below. */
  --color-nav-bg:var(--orix-pure-white);
  --color-nav-border:var(--orix-cobalt);
  --color-nav-text:var(--color-text-muted);
  --color-nav-text-active:var(--color-heading);
  --color-nav-hover-bg:rgba(11,27,46,0.05);
  --color-nav-active-bg:rgba(11,27,46,0.08);
  --color-nav-divider:var(--color-border-subtle);

  /* Status chips (status machine: draft/submitted/approved/changes/rejected) */
  --status-draft-bg:var(--orix-titanium-100);    --status-draft-text:var(--orix-titanium-600);
  --status-submitted-bg:var(--orix-cobalt-soft); --status-submitted-text:var(--orix-cobalt-deep);
  --status-approved-bg:#D4EDDA;                  --status-approved-text:#155724;
  --status-rejected-bg:var(--rl-red-muted);      --status-rejected-text:var(--rl-red-dark);
  --status-changes-bg:#FFF3CD;                   --status-changes-text:#7A5700;

  /* ── Module accents — colour = meaning, one hue per module ──────────────── */
  --module-dashboard:var(--orix-m-dashboard);     --module-dashboard-bg:var(--orix-cobalt-soft);
  --module-planning:var(--orix-m-planning);       --module-planning-bg:#E6F6FE;
  --module-projects:var(--orix-m-projects);       --module-projects-bg:#F2ECFB;
  --module-assignments:var(--orix-m-assignments); --module-assignments-bg:#ECEBFC;
  --module-hours:var(--orix-m-hours);             --module-hours-bg:#E7F6EC;
  --module-reports:var(--orix-m-reports);         --module-reports-bg:#FEF3E2;
  --module-inventory:var(--orix-m-inventory);     --module-inventory-bg:#E4F3F1;
  --module-customers:var(--orix-m-customers);     --module-customers-bg:#E8EDF9;
  --module-assets:var(--orix-m-assets);           --module-assets-bg:#EEF2F7;
  --module-admin:var(--orix-m-admin);             --module-admin-bg:#E8EBF0;

  /* Retained v1 module aliases (no token is ever removed) */
  --module-time:var(--module-hours);           --module-time-bg:var(--module-hours-bg);
  --module-flm:var(--orix-amber-deep);         --module-flm-bg:#FDF1E3;
  --module-review:var(--orix-cobalt);          --module-review-bg:var(--status-submitted-bg);
  --module-warn:var(--color-warning);          --module-warn-bg:var(--color-warning-bg);

  /* ── Planning swatches (Sprint 2) ─────────────────────────────────────────
     Eight hues for identifying a project at a glance. Every value is a hue the
     platform already ships, so nothing new enters the palette — but they are
     deliberately NOT the --module-* tokens, because those carry meaning
     (planning is sky, hours is green) and a project must not inherit a
     module's identity by accident.

     A swatch never carries meaning on its own: the project's name is always
     rendered beside it. Which project gets which swatch is decided by the
     colour provider in js/planning/planning-ui.js, never here. */
  --planning-swatch-a:var(--orix-cobalt);
  --planning-swatch-b:var(--orix-m-projects);
  --planning-swatch-c:var(--orix-m-planning);
  --planning-swatch-d:var(--orix-m-hours);
  --planning-swatch-e:var(--orix-m-reports);
  --planning-swatch-f:var(--orix-m-inventory);
  --planning-swatch-g:var(--orix-m-assignments);
  --planning-swatch-h:var(--orix-m-customers);
  --planning-swatch-none:var(--color-border);

  /* Today. ONE treatment, shared by every planning surface — day strip, week
     strip and later the month grid — because "which day is today" must not be
     answered differently depending on which screen you are looking at.
     Both values are themed tokens, so the indicator follows dark mode without
     an override of its own. */
  --planning-today-bg:var(--color-primary);
  --planning-today-fg:var(--color-on-primary);

  /* ── Typography ───────────────────────────────────────────────────────────
     Sora carries display/headings, Inter the UI. Both are SELF-HOSTED variable
     woff2 (see css/fonts.css) — no webfont CDN, CSP/offline safe.

     The fallbacks behind them are the system UI face only: they cover the
     moment before the webfont swaps in, and nothing else. No third face is
     listed, because a stack that can quietly resolve to a font the design
     system never chose is how two screens end up looking different. */
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-sans:var(--font-body);   /* retained v1 name */
  --font-mono:ui-monospace,'SF Mono','Cascadia Code','Courier New',Courier,monospace;
  --font-numeric:tabular-nums;

  --font-size-caption:12px; --font-size-small:13px; --font-size-body:14px;
  --font-size-body-lg:16px; --font-size-h3:16px; --font-size-h2:20px;
  --font-size-h1:24px; --font-size-display:32px;
  --leading-tight:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-extrabold:800;
  --tracking-caption:0.08em; --tracking-tight:-0.01em;

  /* ── Spacing — 4px grid ─────────────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:22px; --radius-pill:999px;

  /* ── Elevation — v2 is ELEVATION-FIRST (cards float; fewer lines) ───────── */
  --shadow-xs:0 1px 2px rgba(11,27,46,0.05);
  --shadow-sm:0 1px 2px rgba(11,27,46,0.06), 0 1px 3px rgba(11,27,46,0.05);
  --shadow-md:0 6px 16px -6px rgba(11,27,46,0.14), 0 2px 6px -2px rgba(11,27,46,0.08);
  --shadow-lg:0 24px 48px -18px rgba(11,27,46,0.28), 0 8px 20px -12px rgba(11,27,46,0.16);
  --shadow-focus:0 0 0 3px var(--color-focus-ring);
  --shadow-primary:0 6px 16px -6px rgba(37,99,235,0.45);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms;
  --duration-drawer:320ms;
  --ease-out:cubic-bezier(0.2,0,0,1); --ease-in:cubic-bezier(0.4,0,1,1);
  --lift-hover:translateY(-1px);

  /* ── Borders, z-index, opacity ──────────────────────────────────────────── */
  --border-width:1px; --border-width-strong:1.5px; --border-width-accent:2px;
  --z-base:0; --z-sticky:100; --z-dropdown:150; --z-overlay:200;
  --z-modal:210; --z-toast:300;
  --opacity-disabled:0.5; --opacity-muted:0.72;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:1200px; --container-narrow:760px; --container-modal:440px;
  /* GS-1: the search/command-palette dialog is wider than a confirm modal —
     a new, narrow size variant, never a redefinition of --container-modal
     itself (every existing ui.showModal() caller must stay exactly 440px). */
  --container-search:640px;
  --sidebar-width:264px;
  --sidebar-width-collapsed:72px;
  --gap-grid:12px; --gap-page:24px;

  /* ── Control sizing / touch ─────────────────────────────────────────────── */
  --control-height-sm:32px; --control-height:40px; --control-height-lg:48px;
  --touch-target:44px;


  /* ─────────────────────────────────────────────────────────────────────────
     LAYER 3 — component tokens (prepared for the Sprint B components)
     Components read these; changing a component's look never means editing a
     component rule, only the token below. Consumers arrive in later steps.
     ───────────────────────────────────────────────────────────────────────── */

  /* Surface / card */
  --card-bg:var(--color-surface);
  --card-border:var(--color-border);
  --card-radius:var(--radius-lg);
  --card-padding:var(--space-5);
  --card-padding-compact:var(--space-4);
  --card-shadow:var(--shadow-md);
  --card-shadow-hover:var(--shadow-lg);

  /* Button */
  --btn-radius:var(--radius-sm);
  --btn-height:var(--control-height);
  --btn-padding-x:var(--space-4);
  --btn-font-size:var(--font-size-body);
  --btn-font-weight:var(--weight-semibold);
  --btn-primary-bg:var(--color-primary);
  --btn-primary-fg:var(--color-on-primary);
  --btn-primary-shadow:var(--shadow-primary);
  --btn-secondary-bg:var(--color-surface);
  --btn-secondary-fg:var(--color-text);
  --btn-secondary-border:var(--color-border);

  /* Functional panel (tinted surface encoding a block's function) */
  --panel-radius:var(--radius-md);
  --panel-padding:var(--space-4);
  --panel-border:var(--color-border);
  --panel-shadow:var(--shadow-sm);
  --panel-planning-bg:var(--module-planning-bg);
  --panel-hours-bg:var(--module-hours-bg);
  --panel-warn-bg:var(--color-warning-bg);
  --panel-activity-bg:var(--color-surface);
  --panel-reports-bg:var(--color-surface-sunken);

  /* Table */
  --table-header-bg:var(--color-surface-sunken);
  --table-header-fg:var(--color-text-muted);
  --table-row-border:var(--color-border-subtle);
  --table-row-hover:var(--color-surface-hover);
  --table-cell-padding-y:var(--space-3);
  --table-cell-padding-x:var(--space-2);

  /* Form field */
  --field-bg:var(--color-surface);
  --field-border:var(--color-border);
  --field-border-focus:var(--color-primary);
  --field-radius:var(--radius-sm);
  --field-height:var(--touch-target);
  --field-font-size:var(--font-size-body-lg);
  --field-label-size:var(--font-size-small);

  /* Chip / badge */
  --chip-radius:var(--radius-pill);
  --chip-font-size:var(--font-size-caption);
  --chip-font-weight:var(--weight-semibold);
  --chip-padding-x:var(--space-3);
  --chip-padding-y:var(--space-1);

  /* Calendar (month/week) — consumers arrive in B2 */
  --cal-cell-border:var(--color-border-subtle);
  --cal-cell-bg:var(--color-surface);
  --cal-cell-out-opacity:0.4;
  --cal-today-ring:var(--color-primary);
  --cal-event-radius:var(--radius-sm);
  --cal-slot-height:46px;

  /* Overlay: modal / drawer */
  --overlay-bg:rgba(11,27,46,0.45);
  --modal-bg:var(--color-surface);
  --modal-radius:var(--radius-lg);
  --modal-shadow:var(--shadow-lg);
  --drawer-width:440px;
  --drawer-bg:var(--color-surface);
  --drawer-shadow:var(--shadow-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — pure semantic remap (layer 2/3 values only)
   ───────────────────────────────────────────────────────────────────────────
   OPT-IN by design: applies only when the document carries
   <html data-theme="dark">. It is deliberately NOT wired to
   prefers-color-scheme yet — the shell theme toggle and the full dark audit
   are separate, later steps in the frozen plan, and auto-switching before that
   audit would hand dark-OS users an unverified UI. Wiring the media query in
   later is a two-line change here and touches no component.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  /* Brand — accent lifts off the dark ground */
  --color-primary:var(--orix-cobalt-bright);
  --color-primary-hover:#6EA0F7;
  --color-primary-pressed:var(--orix-cobalt);
  --color-primary-muted:rgba(37,99,235,0.16);
  --color-on-primary:#08111F;

  /* Surfaces */
  --color-background:var(--orix-obsidian-black);
  --color-surface:#121A2A;
  --color-surface-sunken:#0E1626;
  --color-surface-hover:#1A2740;
  --color-surface-raised:#162034;

  /* Text */
  --color-heading:var(--orix-white);
  --color-text:#DCE6F2;
  --color-text-muted:#93A2B8;
  --color-text-subtle:#5E6E85;

  /* Lines */
  --color-border:#22304A;
  --color-border-subtle:#1A2438;
  --color-border-strong:#2E3D5A;

  --color-focus-ring:rgba(76,135,244,0.40);
  --color-shadow:rgba(0,0,0,0.55);

  /* Status / feedback — brightened for contrast on dark */
  --color-success:var(--orix-green-bright); --color-success-bg:rgba(22,163,74,0.16);  --color-success-border:rgba(52,211,153,0.32);
  --color-warning:#FBBF24;                  --color-warning-bg:rgba(245,158,11,0.15); --color-warning-border:rgba(251,191,36,0.32);
  --color-info:var(--orix-cobalt-bright);   --color-info-bg:rgba(37,99,235,0.16);     --color-info-border:rgba(76,135,244,0.32);
  --color-error:var(--orix-red-bright);     --color-error-bg:rgba(220,38,38,0.16);
  --color-danger:var(--orix-red-bright);    --color-danger-hover:#FCA5A5;

  /* Navigation chrome */
  --color-nav-bg:#0E1626;
  --color-nav-text:#93A2B8;
  --color-nav-text-active:var(--orix-white);
  --color-nav-hover-bg:rgba(255,255,255,0.06);
  --color-nav-active-bg:rgba(255,255,255,0.08);
  --color-nav-divider:rgba(255,255,255,0.10);

  /* Status chips */
  --status-draft-bg:#1A2740;                  --status-draft-text:#93A2B8;
  --status-submitted-bg:rgba(37,99,235,0.18); --status-submitted-text:#7AA6F8;
  --status-approved-bg:rgba(22,163,74,0.18);  --status-approved-text:var(--orix-green-bright);
  --status-rejected-bg:rgba(220,38,38,0.18);  --status-rejected-text:var(--orix-red-bright);
  --status-changes-bg:rgba(245,158,11,0.18);  --status-changes-text:#FBBF24;

  /* Module accent surfaces — tinted, not flooded */
  --module-dashboard-bg:rgba(37,99,235,0.14);
  --module-planning-bg:rgba(14,165,233,0.14);
  --module-projects-bg:rgba(124,58,237,0.16);
  --module-assignments-bg:rgba(79,70,229,0.16);
  --module-hours-bg:rgba(22,163,74,0.15);
  --module-reports-bg:rgba(245,158,11,0.14);
  --module-inventory-bg:rgba(20,184,166,0.14);
  --module-customers-bg:rgba(30,58,138,0.24);
  --module-assets-bg:rgba(100,116,139,0.18);
  --module-admin-bg:rgba(11,27,46,0.55);
  --module-flm-bg:rgba(180,83,9,0.16);

  /* Legacy primitives — remapped so unmigrated screens are dark-safe too */
  --wm-white:#121A2A;    --rl-white:#121A2A;
  --wm-charcoal:#DCE6F2; --rl-charcoal:#DCE6F2;
  --wm-grey-100:#0E1626; --rl-grey-100:#0E1626;
  --wm-grey-200:#22304A; --rl-grey-200:#22304A;
  --wm-grey-300:#2E3D5A; --rl-grey-300:#2E3D5A;
  --wm-grey-400:#5E6E85; --rl-grey-400:#5E6E85;
  --wm-grey-600:#93A2B8; --rl-grey-600:#93A2B8;
  --wm-ink:var(--orix-obsidian-black);

  /* Elevation — on dark, depth reads through darkness, not grey haze */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.32);
  --shadow-md:0 8px 20px -8px rgba(0,0,0,0.55), 0 2px 8px -2px rgba(0,0,0,0.40);
  --shadow-lg:0 28px 56px -20px rgba(0,0,0,0.70), 0 10px 24px -12px rgba(0,0,0,0.50);
  --shadow-primary:0 6px 16px -6px rgba(76,135,244,0.40);

  --overlay-bg:rgba(0,0,0,0.60);
}

/* Explicit light override — lets the future toggle force light even when the
   OS prefers dark, once prefers-color-scheme is wired in. Values equal :root. */
:root[data-theme="light"] {
  --color-background:var(--orix-titanium-50);
  --color-surface:var(--orix-pure-white);
  --color-text:var(--orix-titanium-800);
  --color-heading:var(--orix-obsidian);
}