/* ================================================================
   Telmo Design Tokens — the AMOS-X design system
   Canonical token reference — extracted from design-system-notes.md
   ================================================================ */

:root {
  /* ── Backgrounds ──────────────────────────────────────────────── */
  --bg-app:        #F0F4F7;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F5F8FA;
  --bg-hover:      #EDF1F5;
  --bg-active:     rgba(0, 168, 178, 0.04);
  --bg-active-hover: rgba(0, 168, 178, 0.08);
  --bg-brand:      #000043;   /* navy brand surface — login brand panel, topbar (was borrowing --text-1) */
  --bg-inverse-hover: rgba(255, 255, 255, 0.08);   /* control hover fill on navy chrome (topbar site-code) */

  /* ── Text ─────────────────────────────────────────────────────── */
  --text-1:  #000043;   /* primary / headings */
  --text-2:  #182957;   /* body */
  --text-3:  #154F78;   /* secondary / labels */
  --text-4:  #5A6E82;   /* muted / placeholders — AA: 5.27:1 on white, 4.76:1 on --bg-app (was #8DA4B8, 2.58:1 / 2.33:1 — Bug #25549) */
  --text-inverse:      #FFFFFF;                    /* text on navy / scrim surfaces */
  --text-inverse-soft: rgba(255, 255, 255, 0.85);
  --text-inverse-muted: rgba(255, 255, 255, 0.6);   /* muted inverse text — footer/build stamp on navy (US #25987).
     0.6, NOT the 0.45 this token was first minted at: at 11px on --bg-brand, 0.45 is 4.27:1 and fails WCAG
     1.4.3 AA, dropping to 3.77:1 where a decorative wash sits behind the text (0.5 -> 4.31:1, also failing).
     0.6 -> 5.55:1. Corrected in US #25890; the vendored libs/telmo copy already carries 0.6. */
  --text-inverse-nav:   rgba(255, 255, 255, 0.75);   /* default nav-item / control text on navy chrome (topbar §7.3) */
  --text-inverse-faint: rgba(255, 255, 255, 0.5);    /* low-emphasis glyphs (chevrons) on navy chrome */
  --code-fg:           #E2E8F0;                    /* code-block foreground on --text-1 background */

  /* ── Borders ──────────────────────────────────────────────────── */
  --border-1:  rgba(0, 0, 67, 0.08);   /* subtle */
  --border-2:  rgba(0, 0, 67, 0.14);   /* default */
  --border-inverse:        rgba(255, 255, 255, 0.2);   /* control border on navy chrome (topbar site-code) */
  --border-inverse-strong: rgba(255, 255, 255, 0.3);   /* control border, hover, on navy chrome */

  /* ── Brand Teal ───────────────────────────────────────────────── */
  --teal-500:  #00A8B2;   /* brand accent — pills, active nav, icons */
  --teal-600:  #008A93;   /* links, focus ring (4.15:1 on white) */
  --teal-700:  #00747C;   /* action base — 5.54:1 with white text */
  --teal-800:  #00666D;   /* action hover — 6.7:1 with white text */
  --teal-bg:   rgba(0, 168, 178, 0.08);
  --teal-300:  #66C9CF;   /* light teal — landing-hero accent, dark-logo back arm */
  --teal-bg-strong: rgba(0, 168, 178, 0.16);   /* teal wash on dark/navy surfaces */
  --teal-border: rgba(0, 168, 178, 0.25);   /* teal hairline — promoted context-chip bubble (matches --red-border alpha) */

  /* Semantic action tokens — what button specs reference.
     Primary buttons use these, NOT --teal-500: white on #00A8B2 is
     2.90:1 and fails WCAG AA (see Accessibility spec). */
  --action:        var(--teal-700);
  --action-hover:  var(--teal-800);

  /* DEPRECATED (since v0.3.x): the --blue-* names were always teal.
     Kept as aliases so existing consumers keep working — migrate to
     --teal-* and remove these in the next breaking release. */
  --blue-500:  var(--teal-500);
  --blue-600:  var(--teal-600);
  --blue-bg:   var(--teal-bg);

  /* ── Semantic Colors ──────────────────────────────────────────── */
  --red-text:    #C0392B;
  --red-bg:      rgba(192, 57, 43, 0.06);
  --red-border:  rgba(192, 57, 43, 0.25);

  --amber-text:   #946316;
  --amber-raw:    #E0A82E;
  --amber-bg:     rgba(224, 168, 46, 0.06);
  --amber-border: rgba(224, 168, 46, 0.25);

  --green-text:   #2D7A1E;
  --green-raw:    #27AE60;
  --green-bg:     rgba(39, 174, 96, 0.06);
  --green-border: rgba(39, 174, 96, 0.25);

  --purple-text:  #534AB7;
  --purple-bg:    rgba(83, 74, 183, 0.06);
  --purple-border:rgba(83, 74, 183, 0.25);

  --coral-text:   #993C1D;
  --coral-bg:     rgba(153, 60, 29, 0.06);
  --coral-border: rgba(153, 60, 29, 0.25);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-primary: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  --fs-display: 26px;   /* display heading — login/shell brand tagline, above page-title (US #25987) */
  --fs-page-title: 20px;
  --fs-section-title: 15px;
  --fs-body:   12px;
  --fs-body-lg: 13px;   /* standard control & prose size — inputs, buttons, body copy (12px --fs-body stays for dense table cells) */
  --fs-label:  10px;
  --fs-label-lg: 11px;
  --fs-small:  9px;
  --fs-touch-input: 16px; /* phone-tier field text — iOS Safari zooms the page when a focused input is below 16px (ADR 0060) */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --ls-label: 0.4px;   /* letter-spacing for uppercase labels */

  /* ── Spacing & Radius ─────────────────────────────────────────── */
  --radius-xs:  4px;   /* tightest scale radius — keycap chips (spotlight footer keys + Esc); tighter than --radius-sm 6px (distinct from --skeleton-radius, which is skeleton-only) */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 99px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;   /* brand-panel padding — login split panel (US #25987) */

  /* ── Form Controls ────────────────────────────────────────────── */
  --field-height: 38px;   /* standard form-control height — inputs, selects, buttons, date/lookup triggers (SPEC controls.js §Text Input: 38px = 9px padding-block + 1px border) */
  --touch-target-min: 44px;   /* minimum touch target on touch tiers — WCAG 2.5.8 / iOS HIG; ADR 0060 Phone tier (nav rows, topbar/menu buttons, picker rows, login controls) */

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.16);  /* top-level overlays: spotlight, smart picker, command palette */
  --shadow-panel: -8px 0 30px rgba(0, 0, 0, 0.12);  /* left-cast drawer shadow (ax-right-side-panel) — --shadow-lg/xl are vertical, wrong cast for a right-pinned panel */
  --scrim: rgba(0, 0, 67, 0.75);   /* fullscreen overlay backdrop (lightbox) */
  --scrim-dialog: rgba(0, 0, 67, 0.32);   /* modal dialog backdrop (§6.4) — lighter than --scrim (lightbox) */
  --scrim-dialog-blur: 2px;               /* dialog backdrop blur radius */
  --scrim-nav: rgba(0, 0, 67, 0.15);   /* top-bar-safe nav flyout backdrop (SPEC 7.4 mega menu) */
  --scrim-panel: rgba(0, 0, 67, 0.25);   /* right-side / drawer backdrop (ax-right-side-panel) — heavier than --scrim-nav (0.15), lighter than --scrim (0.75) */

  /* ── Layout Constants ─────────────────────────────────────────── */
  --topbar-h: 56px;
  --field-min-width: 180px;   /* text-field minimum inline-size before wrapping in a flex filter row (WO filter panel, Receive filter panel) */

  /* ── Top Bar (SPEC §7.3) ──────────────────────────────────────── */
  --topbar-border:      rgba(0, 168, 178, 0.2);   /* teal hairline under the bar */
  --topbar-brand-h:     18px;                     /* brand lockup height */
  --topbar-control:     34px;                     /* avatar / control hit target */
  --topbar-nav-pad-x:   14px;                     /* nav-item horizontal padding */
  --topbar-code-pad-x:  10px;                     /* site-code button horizontal padding (block padding = --space-xs) */
  --topbar-site-name-max: 240px;                  /* site-name cap in the site-code button before it truncates with an ellipsis (US 27831) */
  --topbar-avatar-bg:   rgba(0, 168, 178, 0.2);   /* avatar circle fill (teal 0.20 — heavier than --teal-bg-strong 0.16) */
  --topbar-avatar-ring: rgba(0, 168, 178, 0.3);   /* avatar hover focus ring */

  /* ── Z-Index Layers ────────────────────────────────────────────── */
  --z-sticky:      10;   /* sticky in-page chrome: column headers, entity header, flash bar, batch bar */
  --z-topbar:     100;   /* application top bar */
  --z-nav-flyout: 110;   /* mega menu, nav flyouts (backdrop: calc(var(--z-nav-flyout) - 1)) */
  --z-panel:      200;   /* slide-in panels & drawers (backdrop: calc(var(--z-panel) - 1)) */
  --z-dropdown:   300;   /* dropdown menus, popovers, autocomplete — above panels */
  --z-dialog:     400;   /* modal dialogs, wizard, spotlight, smart picker, command palette */
  --z-toast:      500;   /* reserved: floating notifications */
  --z-tooltip:    600;   /* transient hover/focus tooltips */
  --z-lightbox:   700;   /* fullscreen image lightbox — topmost layer */

  /* Cross-library overlay interop (ADR 0034). The values above order Telmo layers *inside* one
     stacking context (the CDK overlay container). This value is a different kind: the page-level
     z-index the CDK overlay container itself is pinned to, so every Telmo/CDK overlay sits above
     DevExtreme's runtime overlay band (dxOverlay.baseZIndex default 1500 → 1501+, and the static
     dx load-panel at 10000). Only the transient dx drag-clone (2147483647) may exceed it. */
  --z-cdk-overlay: 15000;

  /* ── Transitions ──────────────────────────────────────────────── */
  --transition-fast:    0.15s ease;
  --transition-default: 0.25s ease;
  --transition-slow:    0.3s ease;

  /* ── Loading / Skeleton ───────────────────────────────────────── */
  --skeleton-fill:    #E8EEF3;   /* skeleton base fill — loading placeholder (states.js) */
  --skeleton-shimmer: #DDE6EC;   /* skeleton sweep band */
  --skeleton-radius:  4px;       /* skeleton block corner radius — intentionally tighter than --radius-sm (6px): the states.js spec specifies 4px for placeholder blocks, not a scale-radius surface */
  --skeleton-shimmer-duration: 1.4s;   /* skeleton shimmer loop */

  /* ── Data-Viz / Charts ─────────────────────────────────────────
     Categorical series — brand-derived, ordered for adjacent contrast
     and colour-vision-deficiency safety. Use in sequence; beyond 6
     series, group the tail into --chart-other. See Charts & Data-Viz spec. */
  --chart-1:  #00A8B2;   /* Pacific Blue (brand primary) */
  --chart-2:  #534AB7;   /* Veridian Purple */
  --chart-3:  #E0A82E;   /* Amber */
  --chart-4:  #154F78;   /* Mid Veridian */
  --chart-5:  #27AE60;   /* Green */
  --chart-6:  #C0392B;   /* Red */
  --chart-7:  #157997;   /* Light Veridian */
  --chart-8:  #000043;   /* Deep Cove */
  --chart-other: #8DA4B8;   /* slate — grouped tail / "Other" */

  /* Sequential ramp — one ordered magnitude (heatmaps, choropleth) */
  --chart-seq-1: #E1F3F4;
  --chart-seq-2: #A8DFE2;
  --chart-seq-3: #5FC6CC;
  --chart-seq-4: #00A8B2;
  --chart-seq-5: #008A93;
  --chart-seq-6: #00666D;

  /* Diverging ramp — signed deviation from a midpoint (variance vs target) */
  --chart-div-neg-2: #C0392B;
  --chart-div-neg-1: #E8A29A;
  --chart-div-mid:   #E8EDF1;
  --chart-div-pos-1: #92C9A0;
  --chart-div-pos-2: #2D7A1E;

  /* Chart chrome */
  --chart-grid:  rgba(0, 0, 67, 0.08);   /* gridlines = --border-1 */
  --chart-axis:  #5A6E82;                 /* axis & ticks = --text-4 */
  --chart-label: #154F78;                 /* value & axis text = --text-3 */
  --chart-track: #F0F4F7;                 /* empty bar / progress track = --bg-app */

  /* ── Scheduler / Planner calendar (ax-scheduler) ───────────────────
     Day-granularity week/month calendar chrome. Block FILLS come from the
     consumer's blockTemplate (priority/status), NOT from here — these are
     layout + grid chrome only. */
  --scheduler-col-min-width: 120px;   /* min inline-size of a day column (week view) */
  --scheduler-row-min-height: 96px;   /* min block-size of a day cell */
  --scheduler-gridline:      var(--border-1);        /* cell separators — subtle (matches the calendar mockup) */
  --scheduler-header-bg:     var(--bg-surface-2);    /* day-of-week header row */
  --scheduler-cell-bg:       var(--bg-surface);      /* default day cell */
  --scheduler-cell-bg-muted: var(--bg-app);          /* out-of-month cell (month view) */
  --scheduler-today-bg:      var(--teal-bg);         /* today cell wash */
  --scheduler-today-marker:  var(--teal-500);        /* today accent bar */
  --scheduler-dragover-bg:   var(--bg-active-hover);  /* cell under a valid drag */
  --scheduler-focus-ring:    var(--teal-600);        /* roving-focus outline */
  --scheduler-block-gap:     var(--space-xs);        /* gap between stacked blocks */
  --scheduler-block-radius:  var(--radius-sm);       /* scheduled-block corner */
  --scheduler-conflict:      var(--amber-raw);       /* conflict warning glyph */
}