/* ==========================================================================
   heliqx OT PULSE UI - design tokens (v0.10, draft for management review)
   --------------------------------------------------------------------------
   The single source of truth for colour, type, shape, space and motion in
   every heliqx user-facing application: React SPAs, Django/Unfold admin,
   WeasyPrint PDF documents (see templates/report_base.html) and email
   (email cannot use custom properties; templates/email_base.html carries the
   same values inline).

   Rules encoded here:
   - Light is the default. Dark is required and switches in three states:
       1. no attribute on <html>      -> follows prefers-color-scheme
       2. <html data-theme="light">   -> light, whatever the OS says
       3. <html data-theme="dark">    -> dark, whatever the OS says
   - Components read tokens only. Never a literal colour in component CSS.
   - The accent is a slot (D-015): heliqx orange is the baseline value below.
     A white-label deployment or, after D-016, a product may set another
     value; the derived tokens (hover, fg, strong, soft, rgb) are then
     computed with the algorithm in guide/01-foundations.md section 6.
     Everything else stays: neutrals, type, the gap corner, the pulse line.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Surfaces --------------------------------------------------------- */
  --hx-bg: #F8F8F8;                 /* page ground ("Paper") */
  --hx-surface: #FFFFFF;            /* cards, dialogs, table bodies */
  --hx-surface-sunk: #F1F1EF;       /* table head, wells, code, sunken areas */
  --hx-line: #EAEAE7;               /* hairlines, dividers, card borders */
  --hx-line-strong: #C9D0D0;        /* input borders, focusable outlines at rest */

  /* ---- Text ------------------------------------------------------------- */
  --hx-fg: #314148;                 /* "Ink": primary text (10.6:1 on surface) */
  --hx-fg-muted: #606B70;           /* secondary text, labels (5.5:1) */
  --hx-fg-subtle: #8A9499;          /* placeholders, disabled text (3.1:1, never for content) */

  /* ---- Band: rail, dark panels, headline bands --------------------------- */
  --hx-band: #314148;               /* the heliqx.com footer slate */
  --hx-band-fg: #FFFFFF;
  --hx-band-fg-muted: #B7C4C6;
  --hx-band-line: rgba(255,255,255,0.12);
  --hx-band-hover: #3F5057;
  --hx-band-raised: #3A4A52;        /* a menu or popover floating over the band */

  /* ---- Brand artwork (fixed; D-023, D-029) ------------------------------- */
  --hx-brand-orange: #FF7700;       /* logo, mark, lockups, wordmark. Not the accent: a white-label accent leaves it untouched */

  /* ---- Accent slot (baseline: heliqx orange; see D-015) ------------------- */
  --hx-accent: #FF7700;             /* action + signal. Never carries meaning alone on light surfaces (2.7:1) */
  --hx-accent-hover: #E66A00;
  --hx-accent-fg: #1C292E;          /* label on an accent-filled control (5.6:1) */
  --hx-accent-strong: #B85400;      /* accent as small text: links, eyebrows (4.9:1) */
  --hx-accent-soft: #FFF2E6;        /* highlight surface */
  --hx-accent-rgb: 255,119,0;       /* for translucent tints: rgba(var(--hx-accent-rgb), .12) */

  /* ---- Status tones (semantic; separate from the accent) ----------------- */
  --hx-good: #14683F;      --hx-good-dot: #1A9E5C;      --hx-good-soft: #E6F4EC;
  --hx-warning: #7A5A00;   --hx-warning-dot: #B38400;   --hx-warning-soft: #FBF3D9;
  --hx-critical: #8E1024;  --hx-critical-dot: #C8102E;  --hx-critical-soft: #FBE5E8;
  --hx-info: #0B3A40;      --hx-info-dot: #2E7C86;      --hx-info-soft: #E4EEEF;
  --hx-neutral: #4E4E4E;   --hx-neutral-dot: #8A9296;   --hx-neutral-soft: #EAEAE7;

  /* ---- Data visualisation (categorical, fixed order, max 4 series) --------
     Validated with the dataviz palette checks (lightness band, chroma floor,
     CVD and normal-vision separation, 3:1 vs surface) in both themes.
     The accent is NOT a series colour: it is the highlight (selected series,
     current period, "look here"). A 5th category folds into "Other" (--hx-viz-other). */
  --hx-viz-1: #0C729A;  /* steel blue */
  --hx-viz-2: #BD8704;  /* ochre      */
  --hx-viz-3: #654DB6;  /* violet     */
  --hx-viz-4: #479C4D;  /* green (never beside status-good marks in one chart) */
  --hx-viz-5: #A13270;  /* rose: named views only (tab groups of five and six), never a chart series (D-041) */
  --hx-viz-6: #007970;  /* teal: named views only, never a chart series (D-041) */
  --hx-viz-other: #8A9499;
  --hx-viz-highlight: var(--hx-accent);
  --hx-viz-grid: #EAEAE7;

  /* ---- Focus, overlay, elevation ------------------------------------------ */
  --hx-focus: #314148;
  --hx-focus-ring: 0 0 0 2px var(--hx-surface), 0 0 0 4px var(--hx-focus);
  --hx-overlay: rgba(49,65,72,0.45);
  --hx-shadow: 0 1px 2px rgba(49,65,72,0.06), 0 2px 8px rgba(49,65,72,0.08);
  --hx-shadow-lg: 0 12px 32px -12px rgba(49,65,72,0.28), 0 4px 12px -6px rgba(49,65,72,0.12);

  /* ---- Typography --------------------------------------------------------- */
  --hx-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hx-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --hx-text-xs: 11px;   /* eyebrows, mono tags (uppercase, +0.08em tracking) */
  --hx-text-sm: 12px;   /* captions, table meta, pills */
  --hx-text-base: 14px; /* UI body, table cells, controls */
  --hx-text-md: 16px;   /* long-form body, dialog copy */
  --hx-text-lg: 20px;   /* card titles, dialog titles */
  --hx-text-xl: 24px;   /* section titles */
  --hx-text-2xl: 28px;  /* page titles */
  --hx-text-3xl: 36px;  /* hero / sign-in headline */
  --hx-leading-tight: 1.15;
  --hx-leading-normal: 1.45;
  --hx-leading-relaxed: 1.6;
  --hx-tracking-tight: -0.015em;
  --hx-tracking-caps: 0.08em;

  /* ---- Space (8px grid, 4px half-step) ------------------------------------ */
  --hx-space-1: 4px;  --hx-space-2: 8px;  --hx-space-3: 12px; --hx-space-4: 16px;
  --hx-space-5: 20px; --hx-space-6: 24px; --hx-space-8: 32px; --hx-space-10: 40px;
  --hx-space-12: 48px; --hx-space-16: 64px;

  /* ---- Shape: the gap corner (0 R 0 R) ------------------------------------ */
  /* Square top-left and bottom-right, rounded top-right and bottom-left.
     The step follows the element's height. Use the helper classes in
     hx.components.css (.hx-corner-*) or the variables directly. */
  --hx-corner-panel: 20px;   /* >= 96px tall: bands, panels, sign-in card (24 allowed) */
  --hx-corner-card: 16px;    /* 56-96px: cards, tiles, list frames */
  --hx-corner-control: 12px; /* 40-48px: buttons, nav items, dialogs' inner wells */
  --hx-corner-sm: 10px;      /* 32-40px: compact buttons, icon wells, avatars */
  --hx-corner-xs: 8px;       /* <= 32px: filter chips, small tags with corner */
  --hx-radius-input: 8px;    /* symmetric: inputs, selects, textareas */
  --hx-radius-tag: 4px;      /* symmetric: mono tags, code */
  --hx-radius-pill: 999px;   /* switch and count badge; status pills take corner-xs (D-020) */

  /* ---- Pulse line ---------------------------------------------------------- */
  --hx-pulse-h-sm: 20px;      /* under a page title, in cards */
  --hx-pulse-h-md: 28px;      /* bands, document titles */
  --hx-pulse-h-lg: 40px;      /* hero, sign-in */
  --hx-pulse-stroke: 2px;
  --hx-pulse-stroke-lg: 2.5px;

  /* ---- Controls ----------------------------------------------------------- */
  --hx-control-h: 36px;          /* default control height (desktop, dense) */
  --hx-control-h-lg: 44px;       /* primary flows, touch, sign-in */
  --hx-control-h-sm: 30px;       /* filter chips, table toolbars */
  --hx-hit-min: 44px;            /* minimum touch target (padding may extend past the visual) */
  --hx-border-w: 1px;
  --hx-border-w-strong: 1.5px;

  /* ---- Layout ------------------------------------------------------------- */
  --hx-rail-w: 232px;            /* sidebar shell, expanded */
  --hx-rail-w-collapsed: 64px;   /* sidebar shell, icon rail */
  --hx-topbar-h: 56px;           /* top-bar shell header */
  --hx-content-max: 1440px;
  --hx-content-pad: 40px;        /* desktop; 24px tablet; 16px phone (see media queries) */
  --hx-reading-max: 68ch;
  --hx-lane-min: 220px;          /* board: minimum lane width before lanes wrap (.hx-board) */
  /* Container thresholds (900 / 600 / 480 / 360 / 300) cannot be tokens: @container
     does not read custom properties. They are listed in hx.tokens.json
     layout.container and in chapter 02 section 6. */

  /* ---- Motion ------------------------------------------------------------- */
  --hx-dur-fast: 120ms;   /* hover, focus, toggles */
  --hx-dur-base: 200ms;   /* reveal, dialog, drawer */
  --hx-dur-slow: 480ms;   /* the pulse line draw-on */
  --hx-ease: cubic-bezier(0.2, 0, 0, 1);
  --hx-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Z-index ------------------------------------------------------------ */
  --hx-z-sticky: 10; --hx-z-rail: 20; --hx-z-drawer: 40; --hx-z-dialog: 50; --hx-z-toast: 60; --hx-z-tooltip: 70;
}

/* --------------------------------------------------------------------------
   Dark theme. Same token names, no new ones. Neutrals keep the Ink hue.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hx-bg: #131A1D; --hx-surface: #1E2529; --hx-surface-sunk: #0C1316;
    --hx-line: #2E373B; --hx-line-strong: #424C51;
    --hx-fg: #E4E9EB; --hx-fg-muted: #A3ACB1; --hx-fg-subtle: #798286;
    --hx-band: #0C1316; --hx-band-fg: #FFFFFF; --hx-band-fg-muted: #A3ACB1;
    --hx-band-line: rgba(255,255,255,0.10); --hx-band-hover: #1C262A; --hx-band-raised: #151E22;
    --hx-accent: #FF7700; --hx-accent-hover: #FF8A24; --hx-accent-fg: #1C292E;
    --hx-accent-strong: #FFA04D; --hx-accent-soft: rgba(255,119,0,0.16); --hx-accent-rgb: 255,119,0;
    --hx-good: #6FD39F;     --hx-good-dot: #2FB86F;     --hx-good-soft: rgba(47,184,111,0.16);
    --hx-warning: #E8B94A;  --hx-warning-dot: #D9A520;  --hx-warning-soft: rgba(217,165,32,0.16);
    --hx-critical: #F48A98; --hx-critical-dot: #E0334D; --hx-critical-soft: rgba(224,51,77,0.16);
    --hx-info: #8FC6CF;     --hx-info-dot: #3E98A4;     --hx-info-soft: rgba(62,152,164,0.16);
    --hx-neutral: #A3ACB1;  --hx-neutral-dot: #6B7377;  --hx-neutral-soft: rgba(255,255,255,0.08);
    --hx-viz-1: #058EAF; --hx-viz-2: #BB881A; --hx-viz-3: #806FCD; --hx-viz-4: #5A9F5D; --hx-viz-other: #798286;
    --hx-viz-5: #BC598C; --hx-viz-6: #0D9488;
    --hx-viz-grid: #2E373B;
    --hx-focus: #FFFFFF;
    --hx-overlay: rgba(0,0,0,0.55);
    --hx-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.35);
    --hx-shadow-lg: 0 12px 32px -12px rgba(0,0,0,0.6), 0 4px 12px -6px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --hx-bg: #131A1D; --hx-surface: #1E2529; --hx-surface-sunk: #0C1316;
  --hx-line: #2E373B; --hx-line-strong: #424C51;
  --hx-fg: #E4E9EB; --hx-fg-muted: #A3ACB1; --hx-fg-subtle: #798286;
  --hx-band: #0C1316; --hx-band-fg: #FFFFFF; --hx-band-fg-muted: #A3ACB1;
  --hx-band-line: rgba(255,255,255,0.10); --hx-band-hover: #1C262A; --hx-band-raised: #151E22;
  --hx-accent: #FF7700; --hx-accent-hover: #FF8A24; --hx-accent-fg: #1C292E;
  --hx-accent-strong: #FFA04D; --hx-accent-soft: rgba(255,119,0,0.16); --hx-accent-rgb: 255,119,0;
  --hx-good: #6FD39F;     --hx-good-dot: #2FB86F;     --hx-good-soft: rgba(47,184,111,0.16);
  --hx-warning: #E8B94A;  --hx-warning-dot: #D9A520;  --hx-warning-soft: rgba(217,165,32,0.16);
  --hx-critical: #F48A98; --hx-critical-dot: #E0334D; --hx-critical-soft: rgba(224,51,77,0.16);
  --hx-info: #8FC6CF;     --hx-info-dot: #3E98A4;     --hx-info-soft: rgba(62,152,164,0.16);
  --hx-neutral: #A3ACB1;  --hx-neutral-dot: #6B7377;  --hx-neutral-soft: rgba(255,255,255,0.08);
  --hx-viz-1: #058EAF; --hx-viz-2: #BB881A; --hx-viz-3: #806FCD; --hx-viz-4: #5A9F5D; --hx-viz-other: #798286;
  --hx-viz-5: #BC598C; --hx-viz-6: #0D9488;
  --hx-viz-grid: #2E373B;
  --hx-focus: #FFFFFF;
  --hx-overlay: rgba(0,0,0,0.55);
  --hx-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.35);
  --hx-shadow-lg: 0 12px 32px -12px rgba(0,0,0,0.6), 0 4px 12px -6px rgba(0,0,0,0.4);
}

/* Responsive content padding */
@media (max-width: 1023px) { :root { --hx-content-pad: 24px; } }
@media (max-width: 639px)  { :root { --hx-content-pad: 16px; --hx-control-h: 44px; } }

/* Reduced motion: keep state changes, drop travel */
@media (prefers-reduced-motion: reduce) {
  :root { --hx-dur-fast: 0ms; --hx-dur-base: 0ms; --hx-dur-slow: 0ms; }
}