/* ============================================================
   Lumen Design System — Tokens
   Black & white minimalism · lavender secondary · Klein blue accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color · Monochrome foundation ---------- */
  --white:        #ffffff;
  --bg:           #ffffff;
  --bg-alt:       #fafafa;       /* page-level subtle wash */
  --bg-sunken:    #f5f5f5;       /* code blocks, inset wells */

  --ink:          #0a0a0a;       /* primary text */
  --ink-2:        #404040;       /* body */
  --ink-3:        #6b6b6b;       /* secondary text */
  --ink-4:        #a8a8a8;       /* tertiary, placeholder */
  --ink-5:        #d4d4d4;       /* disabled */

  --line:         #e8e8e8;       /* default hairline */
  --line-2:       #f0f0f0;       /* lighter divider */
  --line-3:       #d0d0d0;       /* hover border */

  /* ---------- Color · Lavender (secondary) ---------- */
  --lavender-50:  #f6f1fb;
  --lavender-100: #e8dff5;
  --lavender-200: #d4c4ec;
  --lavender-300: #c9b8e8;       /* brand soft */
  --lavender-500: #a78bd9;       /* brand core */
  --lavender-700: #7e60b8;

  /* ---------- Color · Klein blue (accent) ---------- */
  --klein:        #002fa7;       /* International Klein Blue */
  --klein-hover:  #00257f;
  --klein-press:  #001b5e;
  --klein-tint:   #e6eaf6;       /* 6% tint for backgrounds */
  --klein-deep:   #001245;       /* deepest IKB — replaces black as surface */

  /* ---------- Dark surfaces (NEVER use black or gray as bg) ---------- */
  /* When you need a "dark mode moment", reach for these — they are
     deep, cold, on-brand, and NOT black/gray.                          */
  --surface-night:    #1a1547;   /* deep ultraviolet — primary dark surface */
  --surface-midnight: #0e0a2e;   /* deepest — use sparingly, for full bleeds */

  /* ---------- Color · Semantic ---------- */
  --success:      #1a7f37;
  --warning:      #9a6700;
  --danger:       #b3261e;

  /* ---------- Aliases (use these in components) ---------- */
  --fg1:          var(--ink);
  --fg2:          var(--ink-2);
  --fg3:          var(--ink-3);
  --fg4:          var(--ink-4);

  --accent:       var(--klein);
  --accent-hover: var(--klein-hover);
  --accent-tint:  var(--klein-tint);

  --secondary:        var(--lavender-500);
  --secondary-tint:   var(--lavender-100);

  /* ---------- Type · families ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type · scale (1.25 minor third on display, denser body) ---------- */
  --fs-display-1: 72px;
  --fs-display-2: 56px;
  --fs-display-3: 44px;

  --fs-h1:        36px;
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-h4:        18px;

  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-label:     11px;          /* eyebrows, ALL CAPS */

  /* ---------- Type · line-height ---------- */
  --lh-display:   1.05;
  --lh-heading:   1.2;
  --lh-body:      1.55;
  --lh-tight:     1.3;

  /* ---------- Type · tracking ---------- */
  --tr-display:   -0.02em;
  --tr-heading:   -0.01em;
  --tr-body:       0;
  --tr-label:      0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-0:    0px;
  --r-sm:   2px;       /* inputs, buttons */
  --r-md:   4px;       /* cards, modals */
  --r-pill: 9999px;    /* badges only */

  /* ============================================================
     BORDER SYSTEM
     ============================================================
     Borders carry the load that shadows and rounded corners don't.
     There are 4 STROKE WEIGHTS and 5 STROKE COLORS. They combine
     into 5 component classes — every component picks exactly one.

     WEIGHTS                          COLORS
     --stroke-hair   1px              --stroke-line     #E8E8E8 · default hairline
     --stroke-med    1.5px            --stroke-ink      #0A0A0A · emphasis / structure
     --stroke-bold   2px              --stroke-accent   #002FA7 · active / focus / selected
     --stroke-xbold  3px              --stroke-lav      #A78BD9 · secondary surface edge
                                      --stroke-soft     #D4C4EC · on-lavender hairline
     ============================================================ */
  --stroke-hair:    1px;
  --stroke-med:     1.5px;
  --stroke-bold:    2px;
  --stroke-xbold:   3px;

  --stroke-line:    #e8e8e8;
  --stroke-ink:     #0a0a0a;
  --stroke-accent:  #002fa7;
  --stroke-lav:     #a78bd9;
  --stroke-soft:    #d4c4ec;

  /* ---------- Per-class border bundles (use these directly) ---------- */
  /* Class A · STRUCTURAL — page chrome, table outline, card outline       */
  --border-structural:   var(--stroke-hair) solid var(--stroke-line);

  /* Class B · INTERACTIVE — buttons, inputs, search, dropdowns           */
  --border-interactive:  var(--stroke-hair) solid var(--stroke-ink);
  --border-interactive-hover:   var(--stroke-hair) solid var(--stroke-ink);
  --border-interactive-focus:   var(--stroke-bold) solid var(--stroke-accent);

  /* Class C · DIVIDER — row separators, section separators (lighter)     */
  --border-divider:      var(--stroke-hair) solid #f0f0f0;

  /* Class D · EMPHASIS — quote blocks, key callouts, selected row        */
  --border-emphasis:     var(--stroke-xbold) solid var(--stroke-ink);
  --border-emphasis-accent: var(--stroke-xbold) solid var(--stroke-accent);

  /* Class E · ON-LAVENDER — borders that live on the lavender surface    */
  --border-on-lavender:  var(--stroke-hair) solid var(--stroke-soft);

  /* ---------- Shadows (only two) ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.08);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:   120ms;
  --dur-base:    200ms;
  --dur-page:    320ms;

  /* ---------- Layout · Grid ---------- */
  /* 12-column grid · column = 1fr · gutter = horizontal rhythm */
  --grid-cols:        12;
  --grid-gutter-desk: 24px;     /* between columns, desktop */
  --grid-gutter-tab:  16px;     /* between columns, tablet */
  --grid-gutter-mob:  12px;     /* between columns, mobile */

  /* Page side padding (page → outer edge) */
  --page-pad-desk:   64px;
  --page-pad-tab:    32px;
  --page-pad-mob:    24px;

  /* Max content widths */
  --maxw-content:   1200px;
  --maxw-prose:      640px;
  --maxw-narrow:     480px;

  /* ---------- Layout · Vertical rhythm (5 tiers) ----------
     Use these — NEVER ad-hoc margins. Same tier = same value, every time.
     ----------------------------------------------------------- */
  --gap-section:    96px;   /* between top-level sections of a page */
  --gap-block:      48px;   /* between distinct blocks within a section */
  --gap-group:      24px;   /* between related groups (heading → grid, list items) */
  --gap-item:       12px;   /* between sibling items in a group (form fields, list rows) */
  --gap-inline:      8px;   /* between adjacent atoms (icon ↔ label, button ↔ button) */
  --gap-tight:       4px;   /* between bonded atoms (label ↔ hint, eyebrow ↔ heading) */

  /* ---------- Layout · Horizontal rhythm (3 tiers) ----------
     Pad-x for containers. Same container type → same value.
     ----------------------------------------------------------- */
  --pad-container:   32px;  /* large surfaces: cards, panels, modals body */
  --pad-control:     16px;  /* mid surfaces: inputs, table cells, list rows */
  --pad-compact:      8px;  /* small surfaces: chips, tags, dense menu items */

  /* ---------- Component dimensions (heights) ---------- */
  --h-control:       40px;  /* default button / input */
  --h-control-sm:    32px;  /* compact button / input */
  --h-control-lg:    48px;  /* large CTA */
  --h-row:           48px;  /* table row, list row */
  --h-row-dense:     36px;  /* dense table row */
  --h-nav:           56px;  /* top nav bar */
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: var(--tr-heading);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.display-1, .display-2, .display-3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 96;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
}
.display-1 { font-size: var(--fs-display-1); }
.display-2 { font-size: var(--fs-display-2); }
.display-3 { font-size: var(--fs-display-3); }

p { margin: 0; color: var(--fg2); }

small, .caption { font-size: var(--fs-caption); color: var(--fg3); }

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg1);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base) var(--ease);
}
a:hover { text-decoration: underline; }

::selection { background: var(--klein); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--klein);
  outline-offset: 2px;
  border-radius: 0;
}