/* ============================================================
   PreventiveCore Design Tokens
   Single source of truth for colour, type, spacing, radius,
   elevation and motion. No other file may declare a hex literal.
   ============================================================ */

:root{
  /* ── Surfaces ─────────────────────────────────────────── */
  --pc-bg:              #0D1117;
  --pc-bg-elevated:     #121822;
  --pc-surface:         #161D28;
  --pc-surface-hover:   #1C2532;
  --pc-surface-sunken:  #0A0F16;

  --pc-border:          #232C3A;
  --pc-border-strong:   #334052;

  /* ── Text ─────────────────────────────────────────────── */
  --pc-text:            #E6EAF0;
  --pc-text-secondary:  #9AA6B8;
  --pc-text-tertiary:   #8C97A8;
  --pc-text-inverse:    #0D1117;

  /* ── Brand ──────────────────────────────────────────────
     One blue cannot serve as both text-on-dark and a fill behind
     white text: #2F81F7 carries white at only 3.75:1, and reading
     as text on the tinted active-nav surface it drops to 4.17:1.
     So the role is split, and each value is chosen to pass AA in
     the place it is actually used:

       --pc-brand        structural: borders, focus rings, chart
                         series, the value tints are derived from
       --pc-brand-text   any brand-coloured TEXT on a dark or
                         tinted surface (5.6:1 on surface, 5.1:1
                         on the active-nav tint)
       --pc-brand-solid  a solid fill carrying white text
                         (4.76:1 against white)                    */
  --pc-brand:           #2F81F7;
  --pc-brand-text:      #4A93FF;
  --pc-brand-solid:     #1F6FE0;
  --pc-brand-hover:     #4A93FF;
  --pc-brand-active:    #1B5FC4;
  --pc-brand-subtle:    rgba(47,129,247,.12);
  --pc-brand-border:    rgba(47,129,247,.35);
  --pc-accent-teal:     #2DA9A0;
  --pc-accent-teal-text:#5FC9C0;   /* teal as TEXT on dark/tinted (7.5:1) */
  --pc-accent-teal-bg:  rgba(45,169,160,.12);
  --pc-accent-teal-border:rgba(45,169,160,.35);

  /* ── Semantic status ──────────────────────────────────── */
  --pc-success:         #2EA043;
  --pc-success-text:    #56C96B;
  --pc-success-bg:      rgba(46,160,67,.12);
  --pc-success-border:  rgba(46,160,67,.35);

  --pc-warning:         #D29922;
  --pc-warning-text:    #E3B341;
  --pc-warning-bg:      rgba(210,153,34,.12);
  --pc-warning-border:  rgba(210,153,34,.35);

  /* Carries white at 5.03:1. The lighter #D64545 managed only 4.38:1,
     which the styleguide's danger button exposed. Status *text* still
     uses --pc-danger-text; this value is for fills. */
  --pc-danger:          #C93B3B;
  --pc-danger-text:     #F0736F;
  --pc-danger-bg:       rgba(214,69,69,.12);
  --pc-danger-border:   rgba(214,69,69,.35);

  --pc-info:            #2F81F7;
  --pc-info-text:       #6CB0FF;
  --pc-info-bg:         rgba(47,129,247,.12);
  --pc-info-border:     rgba(47,129,247,.35);

  --pc-neutral:         #6B7787;
  --pc-neutral-text:    #9AA6B8;
  --pc-neutral-bg:      rgba(107,119,135,.12);
  --pc-neutral-border:  rgba(107,119,135,.35);

  /* ── Radius ───────────────────────────────────────────── */
  --pc-r-sm:   4px;
  --pc-r-md:   6px;
  --pc-r-lg:   8px;
  --pc-r-pill: 999px;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --pc-1:  4px;  --pc-2:  8px;  --pc-3: 12px;  --pc-4: 16px;
  --pc-5: 20px;  --pc-6: 24px;  --pc-8: 32px;  --pc-10: 40px;
  --pc-12: 48px; --pc-16: 64px;

  /* ── Typography ───────────────────────────────────────── */
  --pc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pc-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --pc-fs-page:    24px;  --pc-lh-page:    1.25;  --pc-fw-page:    600;
  --pc-fs-section: 15px;  --pc-lh-section: 1.3;   --pc-fw-section: 600;
  --pc-fs-sub:     13px;  --pc-lh-sub:     1.4;   --pc-fw-sub:     600;
  --pc-fs-body:    14px;  --pc-lh-body:    1.55;
  --pc-fs-support: 12px;  --pc-lh-support: 1.5;
  --pc-fs-label:   11px;  --pc-lh-label:   1.4;
  --pc-fs-kpi:     30px;  --pc-lh-kpi:     1;
  --pc-fs-table:   13px;  --pc-lh-table:   1.5;
  --pc-fs-btn:     13px;

  --pc-tracking-label: .04em;

  /* ── Elevation ────────────────────────────────────────── */
  --pc-e-0: none;
  --pc-e-1: 0 1px 2px rgba(0,0,0,.35);
  --pc-e-2: 0 4px 12px rgba(0,0,0,.35);
  --pc-e-3: 0 16px 40px rgba(0,0,0,.5);

  /* ── Motion ───────────────────────────────────────────── */
  --pc-transition: 120ms cubic-bezier(.4,0,.2,1);

  /* ── Layout ───────────────────────────────────────────── */
  --pc-sidebar-w: 260px;
  --pc-control-h: 34px;
  --pc-row-h:     40px;

  /* ── Focus ────────────────────────────────────────────── */
  --pc-focus-ring: 0 0 0 2px var(--pc-bg), 0 0 0 4px var(--pc-brand);

  /* ── Chart series (see pc-charts.js) ──────────────────── */
  --pc-chart-1: #2F81F7;
  --pc-chart-2: #2DA9A0;
  --pc-chart-3: #2EA043;
  --pc-chart-4: #D29922;
  --pc-chart-5: #D64545;
  --pc-chart-6: #6B7787;
  --pc-chart-grid: rgba(255,255,255,.05);
}

@media (prefers-reduced-motion: reduce){
  :root{ --pc-transition: 0ms; }
}