/* =========================================================================
   PIV Engine — Design Tokens
   Single source of truth. Import into every app.
   ========================================================================= */

:root {
  /* Brand */
  --brand-orange: #F97316;
  --brand-orange-600: #EA580C;
  --brand-orange-050: rgba(249, 115, 22, 0.08);
  --brand-orange-100: rgba(249, 115, 22, 0.14);
  --brand-navy: #1E293B;

  /* Neutral scale — Zinc */
  --zinc-50:  #FAFAFA;
  --zinc-100: #F4F4F5;
  --zinc-200: #E4E4E7;
  --zinc-300: #D4D4D8;
  --zinc-400: #A1A1AA;
  --zinc-500: #71717A;
  --zinc-600: #52525B;
  --zinc-700: #3F3F46;
  --zinc-800: #27272A;
  --zinc-900: #18181B;
  --zinc-950: #09090B;

  /* Semantic — LIGHT (default) */
  --bg:            #FFFFFF;
  --bg-raised:     #F7F7F8;
  --bg-sunken:     #EFEFF1;
  --bg-inverse:    var(--brand-navy);
  --bg-inverse-2:  var(--zinc-950);

  --fg:            var(--zinc-900);   /* primary */
  --fg-muted:      var(--zinc-500);   /* secondary */
  --fg-subtle:     var(--zinc-400);   /* tertiary / metadata */
  --fg-inverse:    #FFFFFF;

  --border:        var(--zinc-200);
  --border-strong: var(--zinc-300);
  --divider:       var(--zinc-100);

  --accent:        var(--brand-orange);
  --accent-hover:  var(--brand-orange-600);
  --accent-tint:   var(--brand-orange-050);
  --accent-tint-2: var(--brand-orange-100);

  /* Data */
  --data-pos: #15803D;
  --data-neg: #B91C1C;
  --data-warn: #B45309;

  /* Type — Source Sans 3 for everything, Source Code Pro for numerics */
  --font-sans: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-mono: 'Source Code Pro', 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-display: 52px;   /* page title  */
  --fs-h1:      34px;
  --fs-h2:      22px;
  --fs-h3:      17px;
  --fs-body:    15px;
  --fs-meta:    13px;
  --fs-micro:   12px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --tracking-tight: -0.02em;
  --tracking-label:  0.06em;

  /* Spacing — 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Radius — squared aesthetic; pill radius reserved for nav only */
  --r-sm: 3px;    /* tags */
  --r-md: 4px;    /* buttons, inputs */
  --r-lg: 6px;    /* cards */
  --r-modal: 8px;
  --r-full: 9999px;  /* NAV PILL */

  /* Shell */
  --container: 1320px;
  --container-px: 32px;
  --nav-h: 52px;

  /* Motion — hover feedback only */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
}


/* =========================================================================
   BASE
   ========================================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  font-family: var(--font-sans);
}
.t-serif, .page-title, .section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}
p { margin: 0; color: var(--fg-muted); }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.num  { font-variant-numeric: tabular-nums; }

/* Utility hierarchy */
.t-display { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.t-h1      { font-size: var(--fs-h1);      font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.t-h2      { font-size: var(--fs-h2);      font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.t-h3      { font-size: var(--fs-h3);      font-weight: 600; line-height: var(--lh-snug); }
.t-body    { font-size: var(--fs-body);    color: var(--fg-muted); line-height: var(--lh-body); }
.t-meta    { font-size: var(--fs-meta);    color: var(--fg-subtle); }
.t-label   { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-subtle); }

/* Container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-px); }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }