:root {
  /* ═══════════ HELM.PORTS DESIGN TOKENS (non-negotiable single source of truth) ═══════════ */
  /* Surfaces */
  --canvas:          #ffffff;
  --surface-subtle:  #fafbfc;   /* only for current-page, hover, active-chip */
  --hairline:        #eef1f4;   /* table header underline */
  --hairline-alt:    #f2f5f8;   /* row dividers */
  --border-input:    #dde2e8;
  --border-chip:     #e3e8ee;
  --border-chip-on:  #b0bcc9;

  /* Ink */
  --ink-primary:     #0b0e11;   /* hero, primary data */
  --ink-body:        #1f2937;   /* table body */
  --ink-secondary:   #5f6b7a;   /* subline, meta, labels */
  --ink-tertiary:    #69737f;   /* table headers, placeholders, inactive */
  --ink-faint:       #6c7682;   /* inactive pagination */

  /* Accent (the ONLY accent) */
  --accent:          #2b6e8c;
  --accent-halo:     rgba(43, 110, 140, 0.10);

  /* Semantic (dots only — never fills, never pills) */
  --sev-critical:    #c44536;
  --sev-high:        #9c611f;
  --sev-medium:      #54707d;
  --sev-low:         #65727e;

  /* Radius */
  --radius-input:    12px;
  --radius-chip:     999px;
  --radius-btn:      6px;

  /* Spacing scale */
  --space-section:   64px;   /* use 64–96px between major sections */
  --space-block:     24px;   /* between sub-blocks */
  --space-tight:     8px;

  /* Type scale */
  --fs-hero:         clamp(2rem, 5vw, 3.25rem);
  --fs-subline:      1.05rem;
  --fs-body:         0.9rem;
  --fs-label:        0.7rem;   /* uppercase, letter-spacing 0.06em */
  --fs-meta:         0.8rem;

  /* Weights (500 is max anywhere; never 600/700/bold) */
  --w-hero:          500;
  --w-body:          450;
  --w-regular:       400;
  --w-label:         500;

  /* Motion: micro and chromatic only (100–150ms). No spatial animation, hover lift, or scale */
  --transition:      0.12s ease;

  /* Layout */
  --max-width:       1180px;

  /* ═══════════ LEGACY ALIASES (mapped to Helm.Ports tokens) ═══════════ */
  --bg:              var(--canvas);
  --surface:         var(--canvas);
  --surface-dark:    var(--ink-primary);
  --border:          var(--border-input);
  --line:            var(--hairline);
  --text:            var(--ink-body);
  --text-muted:      var(--ink-secondary);
  --text-light:      var(--ink-tertiary);
  --critical:        var(--sev-critical);
  --high:            var(--sev-high);
  --active:          var(--accent);
  --verified:        var(--accent);
  --neutral:         var(--ink-secondary);

  /* Safe Areas */
  --safe-top:        env(safe-area-inset-top, 0px);
  --safe-bottom:     env(safe-area-inset-bottom, 0px);
  --safe-left:       env(safe-area-inset-left, 0px);
  --safe-right:      env(safe-area-inset-right, 0px);

  /* Touch Targets & Component Heights */
  --touch-min:       44px;
  --header-h:        56px;
  --bottomnav-h:     56px;

  /* Typography fallback stack */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:       400 0.9rem/1.5 var(--font-family-base);
  --font-h1:         500 var(--fs-hero)/1.15 var(--font-family-base);
  --font-h2:         500 1.25rem/1.3 var(--font-family-base);
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --label-mono-size: 11px;
  --label-mono-tracking: 0.06em;
}

/* Light / Default Theme */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --background:       var(--canvas);
  --foreground:       var(--ink-primary);
  --muted-foreground: var(--ink-secondary);
  --accent:           #2b6e8c;
  --accent-fill:      var(--surface-subtle);
  --line:             var(--hairline);
  --sev-critical:     #c44536;
  --sev-high:         #9c611f;
  --sev-moderate:     #54707d;
}

/* Dark Theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:          #0e1210;
  --surface-subtle:  #151a17;
  --hairline:        #1f2823;
  --hairline-alt:    #19211c;
  --border-input:    #2a352e;
  --border-chip:     #243028;
  --border-chip-on:  #3d4e43;
  --ink-primary:     #e9ede9;
  --ink-body:        #d4dad4;
  --ink-secondary:   #9fa69f;
  --ink-tertiary:    #868f87;
  --ink-faint:       #7c857e;
  --accent:          #4a94b8;
  --accent-halo:     rgba(74, 148, 184, 0.15);
  --sev-critical:    #f08484;
  --sev-high:        #d9a24a;
  --sev-medium:      #8db4e2;
  --sev-low:         #868f87;
  --background:      #0e1210;
  --foreground:      #e9ede9;
  --muted-foreground:#9fa69f;
  --accent-fill:     #1c2a22;
  --line:            #243028;
}

/* Night Theme */
:root[data-theme="night"] {
  color-scheme: dark;
  --canvas:          #080404;
  --surface-subtle:  #120a08;
  --hairline:        #1f1210;
  --hairline-alt:    #170e0c;
  --border-input:    #301b17;
  --border-chip:     #2a1613;
  --border-chip-on:  #4a2923;
  --ink-primary:     #e0857a;
  --ink-body:        #cc786d;
  --ink-secondary:   #b5786b;
  --ink-tertiary:    #ab6d5f;
  --ink-faint:       #9c6c5e;
  --accent:          #e0857a;
  --accent-halo:     rgba(224, 133, 122, 0.15);
  --sev-critical:    #ff6b5e;
  --sev-high:        #d08a3e;
  --sev-medium:      #bc8577;
  --sev-low:         #ab6d5f;
  --background:      #080404;
  --foreground:      #e0857a;
  --muted-foreground:#b5786b;
  --accent-fill:     #2a1412;
  --line:            #301b17;
}