/*
 * sigma-design-system - canonical design tokens (single source of truth)
 *
 * Status: POC (ADR-0020, Proposed). Not yet wired into any product build.
 *
 * Values are seeded from the LIVE production theme
 * (tacho-anal/web/src/css/app.css @theme block - the set the build ships),
 * extended with the spacing / z-index / transition / motion scales that
 * previously existed only in the unused docs/design_tokens.css reference.
 *
 * Conflict resolution (per ADR-0020): production wins.
 *   - surface base       #0f0f0f   (not the reference #0a0b0f)
 *   - --radius-sm        6px       (not the reference 4px)
 *   - font family        "Inter"   (not the reference "Outfit") - since
 *     superseded: D-HI6 round 5 (docs/adr/0040) replaced Inter with
 *     Manrope platform-wide; see the --sg-font-sans token below.
 *
 * Every token is a plain CSS custom property on :root, so it works with no
 * runtime JS, in a server-rendered page and in a Capacitor webview alike, and
 * is themeable at runtime by reassigning a variable. Web Components in this
 * package style themselves exclusively from these variables.
 */

:root {
  /* ── Surfaces / backgrounds ── */
  --sg-color-surface: #0f0f0f;          /* darkest page background */
  --sg-color-surface-alt: #1a1a1a;      /* alternate layer */
  --sg-color-surface-raised: #252525;   /* raised panels, checkboxes */
  --sg-color-surface-elevated: #2a2a2a; /* highest surface */

  /* ── Text / on-surface ── */
  --sg-color-on-surface: #e0e0e0;        /* primary text */
  --sg-color-on-surface-strong: #ffffff; /* max-contrast text */
  --sg-color-on-surface-muted: #a0a0a0;  /* secondary text */
  --sg-color-on-surface-faint: #939393;  /* faint labels/hints. History: #666 -> #8a8a8a (5.4:1 on --sg-color-surface but only 4.44:1 on --sg-color-surface-raised, so badge-dense admin pages on raised panels still failed AA - axe color-contrast on org-detail/org-tree) -> #939393, which clears 4.5:1 on EVERY surface (5.0:1 on raised #252525, 4.67:1 on elevated #2a2a2a, 6.0:1 on base #0f0f0f). Still below muted (#a0a0a0) so the hierarchy holds. Disabled text (contrast-exempt) may use --sg-color-outline. */

  /* ── Borders / outlines ── */
  --sg-color-outline: #333333;        /* default border */
  --sg-color-outline-subtle: #2a2a2a; /* subtle dividers */

  /* ── Primary accent (cyan) ── */
  --sg-color-primary: #00d4ff;
  --sg-color-primary-hover: #33dfff;

  /* ── Semantic ── */
  --sg-color-danger: #e74c3c;
  --sg-color-danger-hover: #c0392b;
  --sg-color-success: #2ecc71;

  /* ── Domain-specific accents ── */
  --sg-color-accent-card: #ff69b4; /* card / driver data (hot pink) */
  --sg-color-accent-cert: #9b59b6; /* certificates (purple) */
  --sg-color-accent-sig: #f39c12;  /* signature, warnings (amber) */

  /* ── Violation severity ── */
  --sg-color-severity-msi: #e74c3c; /* Most Serious Infringement (red) */
  --sg-color-severity-vsi: #e67e22; /* Very Serious Infringement (orange) */
  --sg-color-severity-si: #f1c40f;  /* Serious Infringement (yellow) */
  --sg-color-severity-mi: #3498db;  /* Minor Infringement (blue) */

  /* ── Radii ── */
  --sg-radius-sm: 6px;
  --sg-radius-md: 8px;
  --sg-radius-lg: 12px;
  --sg-radius-full: 9999px; /* pills (badges) */

  /* ── Shadows ── */
  --sg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --sg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* carried from reference */

  /* ── Typography (D-HI6 round 5, FINAL: Manrope + JetBrains Mono,
   *    docs/adr/0040-owner-decision-register.md - replaces Inter,
   *    both verified for Greek+Cyrillic coverage; EL is the platform's
   *    default locale) ── */
  --sg-font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --sg-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Spacing scale (carried from reference; production @theme lacked it) ── */
  --sg-space-xs: 4px;
  --sg-space-sm: 8px;
  --sg-space-md: 16px;
  --sg-space-lg: 24px;
  --sg-space-xl: 32px;
  --sg-space-2xl: 48px;
  --sg-space-3xl: 64px;

  /* ── Z-index scale (carried from reference) ── */
  --sg-z-base: 1;
  --sg-z-sticky: 10;
  --sg-z-nav: 100;
  --sg-z-modal: 1000;
  --sg-z-overlay: 9999;

  /* ── Transitions / motion (carried from reference) ── */
  --sg-transition-fast: 0.15s ease;
  --sg-transition-base: 0.2s ease;
  --sg-transition-slow: 0.3s ease;

  /* ── Type scale (added 2026-06-19; the component build surfaced that
   *    there was no font-size token, forcing literals in every control) ── */
  --sg-font-size-2xs: 0.6875rem; /* counters / micro-labels, a notch under xs */
  --sg-font-size-xs: 0.75rem;
  --sg-font-size-sm: 0.8125rem;
  --sg-font-size-base: 0.875rem; /* default control + body-small */
  --sg-font-size-md: 1rem;
  --sg-font-size-lg: 1.125rem;
  --sg-font-size-xl: 1.5rem;

  /* ── On-accent contrast ── */
  --sg-color-on-primary: var(--sg-color-surface); /* readable ON primary (cyan is light) */

  /* ── Semantic tints (badge/alert backgrounds; previously inlined rgba) ── */
  --sg-color-danger-tint: rgba(231, 76, 60, 0.15);
  --sg-color-success-tint: rgba(46, 204, 113, 0.15);
  --sg-color-warning-tint: rgba(243, 156, 18, 0.15);
  --sg-color-info-tint: rgba(0, 212, 255, 0.15);

  /* ── Form-control tokens (added 2026-06-19; the form components had no
   *    dedicated input bg / border / focus-ring / geometry tokens) ── */
  --sg-color-input-bg: var(--sg-color-surface-alt);
  --sg-color-input-border: var(--sg-color-outline);
  --sg-color-control-checked: var(--sg-color-primary); /* checkbox/radio/switch "on" fill */
  --sg-color-focus-ring: rgba(0, 212, 255, 0.30);
  --sg-control-padding-y: 0.5rem;
  --sg-control-padding-x: 0.75rem;
  --sg-control-size: 1.125rem; /* checkbox box / radio dot bounding size */
  --sg-border-width: 1px;

  /* ── Overlay scrim + toast/drawer z-index (added 2026-06-19 by the
   *    Feedback group; sg-modal previously inlined rgba(0,0,0,0.6) as its
   *    backdrop, and there was no z token above --sg-z-overlay for toasts
   *    that must float above every other overlay) ── */
  --sg-color-scrim: rgba(0, 0, 0, 0.6); /* dialog/drawer backdrop dimmer */
  --sg-z-toast: 10000;                  /* toasts sit above modal/drawer/overlay */

  /* ── Minimum touch target (added 2026-06-19; WCAG 2.2 SC 2.5.8 comfort
   *    target — icon/close buttons pad their hit area to this) ── */
  --sg-touch-target: 2.75rem; /* 44px at default root font size */

  /* ── Custom scrollbar (added 2026-06-19; native scrollbars look out of place
   *    on dark surfaces - apply the .sg-scrollbar recipe in QUALITY-GATE docs
   *    to any scrollable surface: time-picker columns, listboxes, table, etc.) ── */
  --sg-scrollbar-size: 0.625rem;             /* 10px track width */
  --sg-scrollbar-thumb: #767676; /* History: var(--sg-color-outline)=#333 was 1.38:1 on --sg-color-surface-alt (#1a1a1a) - thumb effectively invisible. #767676 clears WCAG 1.4.11 >=3:1 on EVERY surface (4.22:1 base #0f0f0f, 3.83:1 alt #1a1a1a, 3.37:1 raised #252525, 3.16:1 elevated #2a2a2a) and stays below hover #939393 so the hierarchy holds. Note: #6e6e6e fails elevated at 2.81:1. */
  --sg-scrollbar-thumb-hover: var(--sg-color-on-surface-faint);
  --sg-scrollbar-track: transparent;

  /* ── Dropzone (added 2026-06-19 by the Forms group; sg-file-upload needed a
   *    themeable name for the drag-over highlight rather than reusing the info
   *    tint inline) ── */
  --sg-color-dropzone-active-bg: var(--sg-color-info-tint); /* drag-over fill */

  /* ── Command palette geometry (added 2026-06-19 by the Actions group; the
   *    Ctrl/Cmd-K launcher needs a tokenized panel width + top offset rather
   *    than literals, matching sg-modal's no-hardcoded-width rule) ── */
  --sg-cmdk-max-width: 36rem;  /* launcher panel max width */
  --sg-cmdk-top-offset: 10vh;  /* gap from viewport top to the panel */

  /* ══════════════════════════════════════════════════════════════════════════
   * CATALOGUE EXTENSION (added 2026-06-30, lane/ds-tokens)
   *
   * The single source of truth for the values components had been HARDCODING:
   * font weights, line-heights, a spacing micro-step + larger type sizes, motion
   * (split duration + easing tokens), the standardized interactive STATES (focus-
   * ring geometry, disabled dimming, hover/active mix, cursors) and the scrollbar
   * thumb radius. Every token above this banner is unchanged. Components do not
   * yet all reference these (that refactor is the follow-up the catalogue exists
   * to enable). Rationale + the full divergence list:
   *   docs/design-system/token-catalogue.md
   * ══════════════════════════════════════════════════════════════════════════ */

  /* ── Font weights ──
   *  Literals 400/500/600/700 were inlined in ~87 components (600 alone 70x).
   *  600 (semibold) is the default control / label / heading weight. */
  --sg-font-weight-normal: 400;
  --sg-font-weight-medium: 500;
  --sg-font-weight-semibold: 600;
  --sg-font-weight-bold: 700;

  /* ── Line-heights (unitless) ──
   *  Literals 1 / 1.2 / 1.3 / 1.4 / 1.5 were inlined ~80x across components. */
  --sg-line-height-none: 1;      /* icons, single-line numeric/badge displays */
  --sg-line-height-tight: 1.2;   /* buttons, headings, compact controls */
  --sg-line-height-snug: 1.3;    /* dense labels, table cells */
  --sg-line-height-normal: 1.4;  /* default control + body text */
  --sg-line-height-relaxed: 1.5; /* long-form prose, multi-line descriptions */

  /* ── Larger type sizes (the scale stopped at xl = 1.5rem; headings need more) ── */
  --sg-font-size-2xl: 1.875rem; /* section headings */
  --sg-font-size-3xl: 2.25rem;  /* page / hero headings */

  /* ── Spacing micro-step ──
   *  The px scale (xs 4 / sm 8 / md 16 / lg 24 / xl 32 / 2xl 48 / 3xl 64) lacked a
   *  2px step; controls reached for 0.125rem literals instead. Snap off-scale rem
   *  paddings (0.1875/0.3125/0.35rem ...) to the nearest step. */
  --sg-space-2xs: 2px;

  /* ── Motion: standalone durations + easings ──
   *  --sg-transition-{fast,base,slow} above bundle duration+easing for the common
   *  `transition:` shorthand and stay. These split the two out so an `animation:`
   *  (which can't consume the composite) or a property needing duration XOR easing
   *  alone references a token instead of a literal. Spinners used 0.7-1.4s ad-hoc;
   *  --sg-duration-spinner is the one canonical indeterminate cycle. */
  --sg-duration-instant: 0.1s;
  --sg-duration-fast: 0.15s;   /* == --sg-transition-fast duration */
  --sg-duration-base: 0.2s;    /* == --sg-transition-base duration */
  --sg-duration-slow: 0.3s;    /* == --sg-transition-slow duration */
  --sg-duration-spinner: 0.8s; /* canonical indeterminate spinner/loader cycle */
  --sg-ease-standard: ease;    /* == the easing in the composite transition tokens */
  --sg-ease-in: ease-in;
  --sg-ease-out: ease-out;
  --sg-ease-in-out: ease-in-out;

  /* ── Interactive STATES (hover / active / focus-visible / disabled) ──
   *  Focus-ring geometry (outline 2px, offset 2px, the soft 3px box-shadow halo)
   *  and the disabled dimming (0.4-0.6 across components — a real drift) were
   *  inlined per component. Pair the geometry with the existing
   *  --sg-color-focus-ring (halo color) + --sg-color-primary (outline color). */
  --sg-focus-ring-width: 2px;   /* :focus-visible outline thickness */
  --sg-focus-ring-offset: 2px;  /* outline-offset; use -2px to inset on a clipped control */
  --sg-focus-ring-spread: 3px;  /* box-shadow halo spread (the soft-glow ring form) */
  --sg-opacity-disabled: 0.5;   /* the ONE disabled-state dimming for every control */
  --sg-opacity-muted: 0.6;      /* de-emphasized but still enabled */
  --sg-state-hover-mix: 8%;     /* % of #000/#fff mixed into a fill on :hover (color-mix) */
  --sg-state-active-mix: 15%;   /* % mixed into a fill on :active (press) */

  /* ── Cursors for the standardized interactive states ── */
  --sg-cursor-interactive: pointer;  /* buttons, links, tabs, selectables */
  --sg-cursor-text: text;            /* text inputs / textareas */
  --sg-cursor-disabled: not-allowed; /* any control in its disabled state */

  /* ── Scrollbar thumb radius ──
   *  The .sg-scrollbar recipe (sizes/colors are tokenized above) hardcoded a
   *  999px thumb radius in 15 components; this names it (a pill on a thin thumb). */
  --sg-scrollbar-radius: var(--sg-radius-full);

  /* ── Syntax highlighting (sg-code) ──
   *  A SEMANTIC layer that maps a highlighter's token kinds onto the existing
   *  palette, so code highlighting is themed from the SSoT and no component ever
   *  ships a hardcoded syntax palette (ADR: sg-code syntax highlighting). Each is
   *  an alias of a palette token already tuned for legibility on the code surface
   *  (--sg-color-surface-alt, #1a1a1a); change the alias here to re-theme every
   *  <sg-code highlight>. The DS is dark-only today; a future light theme only
   *  needs to re-map THESE aliases under a prefers-color-scheme block - the
   *  component needs no change. These are var() aliases, so they are exempt from
   *  the tokens.json / app.css mirrors (which cannot express var()); the
   *  token-parity gate skips their non-color (var()) fallbacks in sg-code. */
  --sg-syntax-comment:  var(--sg-color-on-surface-faint); /* comments (rendered italic) */
  --sg-syntax-keyword:  var(--sg-color-primary);          /* keywords / tags / sections */
  --sg-syntax-string:   var(--sg-color-success);          /* string / attr-value literals */
  --sg-syntax-number:   var(--sg-color-accent-sig);       /* numeric literals */
  --sg-syntax-constant: var(--sg-color-severity-si);      /* booleans / null / constants (yellow) */
  --sg-syntax-function: var(--sg-color-accent-card);      /* function / method names (pink) */
  --sg-syntax-class:    var(--sg-color-severity-mi);      /* class names */
  --sg-syntax-type:     var(--sg-color-severity-mi);      /* type annotations */
  --sg-syntax-variable: var(--sg-color-on-surface);       /* variables / identifiers */
  --sg-syntax-operator: var(--sg-color-on-surface-muted); /* operators / punctuation */
  --sg-syntax-section:  var(--sg-color-primary);          /* headings / labels */
  --sg-syntax-error:    var(--sg-color-danger);           /* error tokens / diff deletions */
  --sg-syntax-inserted: var(--sg-color-success);          /* diff insertions */
  --sg-syntax-deleted:  var(--sg-color-danger);           /* diff deletions */
}