/* ============================================================
 * EDGEVIEW FINANCE — Design tokens
 * tokens.css
 *
 * A single source of truth for colour, type, spacing, radii,
 * borders, motion, and elevation across every Edgeview surface
 * (public website, CRMX, Mission Control, Marketing Hub,
 * FinOps, BusOps, and future internal verticals).
 *
 * Every vertical shares this foundation. Only the accent hue
 * changes per vertical — swap --evf-accent-* in a
 * [data-vertical="..."] scope and the rest of the system
 * re-colours automatically.
 *
 * spec-version: 1.0.0 · 2026-04-24
 * ============================================================ */


/* -------------------------------------------------------------
 * 1. PRIMITIVES — raw values. Do not reference from components.
 * ------------------------------------------------------------- */
:root {
  /* Brand — Edgeview Orange
   * Sampled from the logo mark. Anchors the website and
   * cascades to every vertical's "Edgeview signature" moments
   * (primary buttons on the public site, the wordmark lockup,
   * any cross-vertical chrome). */
  --evf-orange-50:   oklch(0.97 0.02 55);
  --evf-orange-100:  oklch(0.93 0.05 55);
  --evf-orange-200:  oklch(0.87 0.10 55);
  --evf-orange-300:  oklch(0.80 0.14 55);
  --evf-orange-400:  oklch(0.74 0.17 50);
  --evf-orange-500:  oklch(0.68 0.20 45);   /* #ff6b1a — logo mark */
  --evf-orange-600:  oklch(0.62 0.19 42);
  --evf-orange-700:  oklch(0.54 0.16 40);
  --evf-orange-800:  oklch(0.44 0.12 40);
  --evf-orange-900:  oklch(0.32 0.08 45);

  /* Warm neutrals — hue 60° (yellow-orange, very low chroma).
   * Barely perceptible on their own but unmistakable against
   * cool-blue-black peer products. Used across all verticals. */
  --evf-warm-50:     oklch(0.98 0.004 60);
  --evf-warm-100:    oklch(0.95 0.005 60);
  --evf-warm-200:    oklch(0.90 0.006 60);
  --evf-warm-300:    oklch(0.82 0.008 60);
  --evf-warm-400:    oklch(0.70 0.010 60);
  --evf-warm-500:    oklch(0.52 0.012 60);
  --evf-warm-600:    oklch(0.40 0.010 60);
  --evf-warm-700:    oklch(0.28 0.008 60);
  --evf-warm-800:    oklch(0.22 0.006 60);
  --evf-warm-850:    oklch(0.19 0.008 60);
  --evf-warm-900:    oklch(0.16 0.006 60);
  --evf-warm-950:    oklch(0.14 0.005 60);
  --evf-warm-975:    oklch(0.10 0.004 60);

  /* Ink — near-black for print-grade body on light surfaces */
  --evf-ink-900:     oklch(0.15 0.006 60);   /* #1C2C3B analogue */
  --evf-ink-800:     oklch(0.22 0.010 230);  /* EVFBS secondary */

  /* Vertical accent primitives. Kept here as raw values;
   * a component should only ever read --evf-accent-*. */
  --evf-acc-orange:  oklch(0.68 0.20 45);    /* Brand / website */
  --evf-acc-copper:  oklch(0.72 0.12 55);    /* Mission Control */
  --evf-acc-blue:    oklch(0.56 0.18 258);   /* CRMX */
  --evf-acc-teal:    oklch(0.72 0.10 195);   /* Marketing Hub */
  --evf-acc-emerald: oklch(0.62 0.07 152);   /* FinOps — institutional sage (locked 14 May 2026) */
  --evf-acc-slate:   oklch(0.72 0.10 235);   /* BusOps */

  /* Status — green / amber / red. Never hue alone — always
   * paired with a dot, icon, or label. */
  --evf-status-ok:     oklch(0.78 0.15 155);
  --evf-status-warn:   oklch(0.80 0.17 80);
  --evf-status-error:  oklch(0.66 0.20 25);
  --evf-status-dim:    oklch(0.52 0.012 60);
}


/* -------------------------------------------------------------
 * 2. SEMANTIC TOKENS — DARK (default for all internal apps)
 * Components reference these.
 * ------------------------------------------------------------- */
:root {
  /* Surfaces */
  --evf-bg:            var(--evf-warm-900);
  --evf-bg-elevated:   var(--evf-warm-850);
  --evf-bg-inset:      var(--evf-warm-950);
  --evf-bg-sunken:     var(--evf-warm-975);

  /* Borders */
  --evf-border:         var(--evf-warm-700);
  --evf-border-muted:   var(--evf-warm-800);
  --evf-border-strong:  var(--evf-warm-600);

  /* Foreground */
  --evf-fg:         oklch(0.93 0.010 60);
  --evf-fg-muted:   oklch(0.70 0.012 60);
  --evf-fg-dim:     oklch(0.52 0.012 60);
  --evf-fg-on-accent: oklch(0.14 0.02 55);

  /* Accent — Edgeview Orange is the default.
   * Verticals override by setting [data-vertical]. */
  --evf-accent:        var(--evf-acc-orange);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-orange) 15%, transparent);
  --evf-accent-strong: oklch(0.60 0.20 45);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-orange) 36%, transparent);
  --evf-accent-fg:     var(--evf-fg-on-accent);

  /* Status (dark-mode tuned) */
  --evf-status-ok-weak:    color-mix(in oklch, var(--evf-status-ok) 14%, transparent);
  --evf-status-warn-weak:  color-mix(in oklch, var(--evf-status-warn) 14%, transparent);
  --evf-status-error-weak: color-mix(in oklch, var(--evf-status-error) 14%, transparent);

  /* Agent hues — stable across sessions. Used for the
   * provenance strip (see components.md). */
  --evf-agent-orion:  oklch(0.72 0.14 250);  /* orchestrator */
  --evf-agent-koda:   oklch(0.74 0.13 150);  /* dev */
  --evf-agent-eab:    oklch(0.75 0.14 320);  /* governance */
  --evf-agent-aria:   oklch(0.78 0.15 20);   /* marketing */
  --evf-agent-eva:    oklch(0.75 0.14 195);  /* ops */
  --evf-agent-remi:   oklch(0.75 0.14 95);   /* content/scheduling */
  --evf-agent-zoe:    oklch(0.70 0.10 30);   /* personal */
  --evf-agent-system: oklch(0.55 0.008 60);  /* non-agent */

  /* Meridian ring hues */
  --evf-ring-foundation: oklch(0.80 0.13 240);
  --evf-ring-core:       oklch(0.78 0.14 80);
  --evf-ring-operations: oklch(0.78 0.13 155);
  --evf-ring-excellence: oklch(0.78 0.14 305);
}


/* -------------------------------------------------------------
 * 3. LIGHT MODE — opt-in via [data-theme="light"] or .light
 * The public website and print surfaces run light by default.
 * ------------------------------------------------------------- */
[data-theme="light"],
.light {
  --evf-bg:          var(--evf-warm-50);
  --evf-bg-elevated: #ffffff;
  --evf-bg-inset:    var(--evf-warm-100);
  --evf-bg-sunken:   var(--evf-warm-200);

  --evf-border:        var(--evf-warm-200);
  --evf-border-muted:  var(--evf-warm-100);
  --evf-border-strong: var(--evf-warm-300);

  --evf-fg:         var(--evf-ink-900);
  --evf-fg-muted:   oklch(0.42 0.008 60);
  --evf-fg-dim:     oklch(0.58 0.010 60);
  --evf-fg-on-accent: #ffffff;
}


/* -------------------------------------------------------------
 * 4. VERTICALS — swap accent hue per app surface.
 * Apply on <html> or any ancestor via data-vertical="…".
 * ------------------------------------------------------------- */
[data-vertical="brand"],
[data-vertical="website"] {
  --evf-accent:        var(--evf-acc-orange);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-orange) 15%, transparent);
  --evf-accent-strong: oklch(0.60 0.20 45);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-orange) 36%, transparent);
}
[data-vertical="mission-control"] {
  --evf-accent:        var(--evf-acc-copper);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-copper) 15%, transparent);
  --evf-accent-strong: oklch(0.64 0.13 55);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-copper) 36%, transparent);
}
[data-vertical="crmx"] {
  --evf-accent:        var(--evf-acc-blue);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-blue) 14%, transparent);
  --evf-accent-strong: oklch(0.48 0.20 258);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-blue) 32%, transparent);
  --evf-accent-fg:     #ffffff;
}
[data-vertical="marketing-hub"] {
  --evf-accent:        var(--evf-acc-teal);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-teal) 15%, transparent);
  --evf-accent-strong: oklch(0.64 0.12 195);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-teal) 36%, transparent);
}
[data-vertical="finops"] {
  --evf-accent:        var(--evf-acc-emerald);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-emerald) 15%, transparent);
  --evf-accent-strong: oklch(0.54 0.08 152);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-emerald) 38%, transparent);
}
[data-vertical="busops"] {
  --evf-accent:        var(--evf-acc-slate);
  --evf-accent-weak:   color-mix(in oklch, var(--evf-acc-slate) 15%, transparent);
  --evf-accent-strong: oklch(0.62 0.12 235);
  --evf-accent-border: color-mix(in oklch, var(--evf-acc-slate) 36%, transparent);
}


/* -------------------------------------------------------------
 * 5. TYPOGRAPHY — three families, one job each.
 *
 *   Display (serif)   — Instrument Serif · judgment
 *   UI/body (sans)    — Inter Variable · scan + dense UI
 *   Data (mono)       — JetBrains Mono · IDs, timestamps, numerics
 *
 * For the public website specifically, Instrument Sans is used
 * in place of Inter to match the existing Edgeview wordmark
 * treatment. See tokens.css §5.3.
 * ------------------------------------------------------------- */
:root {
  --evf-font-serif: 'Instrument Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --evf-font-sans:  'Inter', 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --evf-font-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Public-website override — one place to change */
  --evf-font-brand: 'Instrument Sans', var(--evf-font-sans);
}

/* 5.2 · Type scale — scan-first density.
 * Sizes in px for predictability at density. Weights/tracking
 * per role, not per size. */
:root {
  --evf-t-display-2xl-size:   64px;   --evf-t-display-2xl-line: 1.02;  --evf-t-display-2xl-tracking: -0.025em;
  --evf-t-display-xl-size:    48px;   --evf-t-display-xl-line: 1.05;   --evf-t-display-xl-tracking: -0.02em;
  --evf-t-display-lg-size:    36px;   --evf-t-display-lg-line: 1.10;   --evf-t-display-lg-tracking: -0.015em;
  --evf-t-display-md-size:    28px;   --evf-t-display-md-line: 1.15;   --evf-t-display-md-tracking: -0.012em;
  --evf-t-display-sm-size:    24px;   --evf-t-display-sm-line: 1.20;   --evf-t-display-sm-tracking: -0.010em;
  --evf-t-display-xs-size:    20px;   --evf-t-display-xs-line: 1.25;   --evf-t-display-xs-tracking: -0.008em;

  --evf-t-title-size:         16px;   --evf-t-title-line:    1.40;    --evf-t-title-tracking:    0;
  --evf-t-subtitle-size:      15px;   --evf-t-subtitle-line: 1.35;    --evf-t-subtitle-tracking: -0.005em;

  --evf-t-body-size:          14px;   --evf-t-body-line:     1.55;    --evf-t-body-tracking:     -0.003em;
  --evf-t-body-sm-size:       13px;   --evf-t-body-sm-line:  1.50;    --evf-t-body-sm-tracking:  -0.003em;
  --evf-t-body-xs-size:       12px;   --evf-t-body-xs-line:  1.45;    --evf-t-body-xs-tracking:  0;

  --evf-t-label-size:         11px;   --evf-t-label-line:    1.30;    --evf-t-label-tracking:    0.08em;
  --evf-t-kicker-size:        11px;   --evf-t-kicker-line:   1.20;    --evf-t-kicker-tracking:   0.12em;

  --evf-t-mono-size:          13px;   --evf-t-mono-line:     1.45;    --evf-t-mono-tracking:     0.01em;
  --evf-t-mono-sm-size:       12px;   --evf-t-mono-sm-line:  1.40;    --evf-t-mono-sm-tracking:  0.02em;
  --evf-t-mono-xs-size:       10px;   --evf-t-mono-xs-line:  1.30;    --evf-t-mono-xs-tracking:  0.04em;
}

/* 5.3 · Semantic text roles — the CSS classes components read */
html {
  font-family: var(--evf-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--evf-fg);
  background: var(--evf-bg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.evf-display-2xl, .evf-h0 { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-2xl-size); line-height: var(--evf-t-display-2xl-line);
  letter-spacing: var(--evf-t-display-2xl-tracking); text-wrap: balance; }
.evf-display-xl  { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-xl-size); line-height: var(--evf-t-display-xl-line);
  letter-spacing: var(--evf-t-display-xl-tracking); text-wrap: balance; }
.evf-h1, .evf-display-lg  { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-lg-size); line-height: var(--evf-t-display-lg-line);
  letter-spacing: var(--evf-t-display-lg-tracking); text-wrap: balance; }
.evf-h2, .evf-display-md  { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-md-size); line-height: var(--evf-t-display-md-line);
  letter-spacing: var(--evf-t-display-md-tracking); text-wrap: balance; }
.evf-h3, .evf-display-sm  { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-sm-size); line-height: var(--evf-t-display-sm-line);
  letter-spacing: var(--evf-t-display-sm-tracking); text-wrap: balance; }
.evf-h4, .evf-display-xs  { font-family: var(--evf-font-serif); font-weight: 400;
  font-size: var(--evf-t-display-xs-size); line-height: var(--evf-t-display-xs-line);
  letter-spacing: var(--evf-t-display-xs-tracking); text-wrap: balance; }

.evf-title    { font-family: var(--evf-font-sans); font-weight: 600;
  font-size: var(--evf-t-title-size); line-height: var(--evf-t-title-line); }
.evf-subtitle { font-family: var(--evf-font-sans); font-weight: 500;
  font-size: var(--evf-t-subtitle-size); line-height: var(--evf-t-subtitle-line);
  letter-spacing: var(--evf-t-subtitle-tracking); }

.evf-body     { font-family: var(--evf-font-sans); font-weight: 400;
  font-size: var(--evf-t-body-size); line-height: var(--evf-t-body-line);
  letter-spacing: var(--evf-t-body-tracking); text-wrap: pretty; }
.evf-body-sm  { font-family: var(--evf-font-sans); font-weight: 400;
  font-size: var(--evf-t-body-sm-size); line-height: var(--evf-t-body-sm-line); }
.evf-body-xs  { font-family: var(--evf-font-sans); font-weight: 400;
  font-size: var(--evf-t-body-xs-size); line-height: var(--evf-t-body-xs-line); }

.evf-label    { font-family: var(--evf-font-sans); font-weight: 500;
  font-size: var(--evf-t-label-size); line-height: var(--evf-t-label-line);
  letter-spacing: var(--evf-t-label-tracking); text-transform: uppercase; color: var(--evf-fg-muted); }
.evf-kicker   { font-family: var(--evf-font-mono); font-weight: 400;
  font-size: var(--evf-t-kicker-size); line-height: var(--evf-t-kicker-line);
  letter-spacing: var(--evf-t-kicker-tracking); text-transform: uppercase; color: var(--evf-fg-dim); }

.evf-mono     { font-family: var(--evf-font-mono); font-weight: 400;
  font-size: var(--evf-t-mono-size); line-height: var(--evf-t-mono-line);
  letter-spacing: var(--evf-t-mono-tracking); font-variant-numeric: tabular-nums; }
.evf-mono-sm  { font-family: var(--evf-font-mono); font-weight: 400;
  font-size: var(--evf-t-mono-sm-size); line-height: var(--evf-t-mono-sm-line);
  letter-spacing: var(--evf-t-mono-sm-tracking); font-variant-numeric: tabular-nums; }
.evf-mono-xs  { font-family: var(--evf-font-mono); font-weight: 400;
  font-size: var(--evf-t-mono-xs-size); line-height: var(--evf-t-mono-xs-line);
  letter-spacing: var(--evf-t-mono-xs-tracking); }


/* -------------------------------------------------------------
 * 6. SPACING — 4px base grid. Named steps only.
 * ------------------------------------------------------------- */
:root {
  --evf-space-0:   0;
  --evf-space-2xs: 2px;
  --evf-space-xs:  4px;
  --evf-space-sm:  8px;
  --evf-space-md:  12px;
  --evf-space-lg:  16px;
  --evf-space-xl:  24px;
  --evf-space-2xl: 32px;
  --evf-space-3xl: 48px;
  --evf-space-4xl: 64px;
  --evf-space-5xl: 96px;
}


/* -------------------------------------------------------------
 * 7. RADII — close to square across the system.
 * The public website runs 0px (flat); internal apps 4–10px.
 * ------------------------------------------------------------- */
:root {
  --evf-radius-none: 0;
  --evf-radius-sm:   4px;   /* pills, small controls */
  --evf-radius-md:   6px;   /* default — buttons, inputs, cards */
  --evf-radius-lg:   10px;  /* panels, major cards, modals */
  --evf-radius-full: 9999px;
}

[data-vertical="brand"],
[data-vertical="website"] {
  --evf-radius-sm: 0;
  --evf-radius-md: 0;
  --evf-radius-lg: 0;
}


/* -------------------------------------------------------------
 * 8. ELEVATION — restrained. Most cards use borders, not shadow.
 * ------------------------------------------------------------- */
:root {
  --evf-elev-none:   none;
  --evf-elev-hairline: 0 0 0 1px var(--evf-border);
  --evf-elev-sm:     0 1px 2px oklch(0 0 0 / 0.28);
  --evf-elev-md:     0 8px 20px oklch(0 0 0 / 0.32);
  --evf-elev-modal:  0 24px 64px oklch(0 0 0 / 0.55);
  --evf-elev-float:  0 8px 24px oklch(0 0 0 / 0.45);
}


/* -------------------------------------------------------------
 * 9. MOTION — communicative only. No decoration.
 * ------------------------------------------------------------- */
:root {
  --evf-dur-instant: 0ms;
  --evf-dur-fast:    120ms;
  --evf-dur-medium:  200ms;
  --evf-dur-slow:    300ms;

  --evf-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --evf-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --evf-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);

  --evf-pulse:       1800ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root { --evf-pulse: 0s paused; }
  *, *::before, *::after {
    animation-duration:  1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* -------------------------------------------------------------
 * 10. FOCUS — non-negotiable. Accent ring, 2px, 2px offset.
 * ------------------------------------------------------------- */
:root {
  --evf-focus-ring:        2px solid var(--evf-accent);
  --evf-focus-ring-offset: 2px;
}

:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: var(--evf-focus-ring);
  outline-offset: var(--evf-focus-ring-offset);
  border-radius: var(--evf-radius-sm);
}


/* -------------------------------------------------------------
 * 11. LAYOUT — shell geometry shared across internal apps
 * ------------------------------------------------------------- */
:root {
  --evf-layout-header:            48px;
  --evf-layout-footer:            48px;
  --evf-layout-rail-expanded:     248px;
  --evf-layout-rail-collapsed:     56px;
  --evf-layout-rail-right:        340px;
  --evf-layout-content-max:      1600px;
  --evf-layout-reading-max:       820px;
  --evf-layout-pane-list:         300px;
  --evf-layout-pane-detail:       560px;
  --evf-layout-pane-sub:          440px;
  --evf-layout-pad-x:              24px;
}


/* -------------------------------------------------------------
 * 12. SCROLLBARS — overlay style, thin, recessive at rest
 * ------------------------------------------------------------- */
*::-webkit-scrollbar        { width: 8px; height: 8px; background: transparent; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  {
  background: var(--evf-border);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--evf-fg-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--evf-border) transparent; }