/* Colors — 26-token palette, verbatim from the source page.
   Contract: the complete light palette sits on a bare :root; dark is
   redefined twice — once behind a prefers-color-scheme block, once under
   :root[data-theme="dark"] — and :root[data-theme="light"] restates light so
   an explicit choice wins in either direction. */

:root {
  color-scheme: light;

  /* ground */
  --bg:             #EFF2F7;  /* cool paper */
  --surface:        #F7F9FC;  /* index card */
  --surface-raised: #FFFFFF;  /* detail panel, popover, search field */

  /* ink ladder */
  --text:           #1B2536;  /* archival ink */
  --text-muted:     #4A576C;  /* descriptions, slugs, meta */

  /* lines */
  --border:         #D5DCE7;  /* decorative hairline (cards, dividers) */
  --border-strong:  #75839A;  /* input/control boundaries */
  --rule-brass:     #D5C48E;  /* decorative ruled line under card headers only */

  /* accent 1 — archival ink blue */
  --accent:         #33518A;
  --accent-strong:  #28406E;
  --on-accent:      #FFFFFF;
  --accent-soft:    #DCE4F2;
  --accent-ink:     #24406F;

  /* accent 2 — brass (identity only) */
  --brass:          #8A6412;
  --brass-text:     #6F5008;
  --brass-soft:     #F1E6CB;

  /* semantic */
  --ok-text:        #1D6B45;
  --ok-soft:        #D9EDE0;
  --warn-text:      #9E3A18;
  --warn-soft:      #F9E4D8;

  /* neutral chip/badge */
  --chip-bg:        #E3E8F1;
  --chip-text:      #39465C;

  /* effects */
  --scrim:          rgba(15, 20, 32, 0.45);
  --shadow-card:    0 1px 2px rgba(27, 37, 54, 0.06);
  --shadow-lift:    0 2px 8px rgba(27, 37, 54, 0.10);
  --shadow-panel:   -8px 0 32px rgba(27, 37, 54, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:             #0F1420;
    --surface:        #161D2C;
    --surface-raised: #1D2637;
    --text:           #E7EBF4;
    --text-muted:     #A6B1C6;
    --border:         #2A3549;
    --border-strong:  #5B6A85;
    --rule-brass:     #4A3D1E;
    --accent:         #96B7EE;
    --accent-strong:  #B3CBF4;
    --on-accent:      #0F1420;
    --accent-soft:    #243350;
    --accent-ink:     #BCD0F5;
    --brass:          #D2A64E;
    --brass-text:     #DDB768;
    --brass-soft:     #372C11;
    --ok-text:        #82CFA6;
    --ok-soft:        #15301F;
    --warn-text:      #EFA075;
    --warn-soft:      #3A2012;
    --chip-bg:        #232D40;
    --chip-text:      #B9C4D8;
    --scrim:          rgba(4, 8, 16, 0.60);
    --shadow-card:    none;
    --shadow-lift:    none;
    --shadow-panel:   -8px 0 32px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #0F1420;
  --surface:        #161D2C;
  --surface-raised: #1D2637;
  --text:           #E7EBF4;
  --text-muted:     #A6B1C6;
  --border:         #2A3549;
  --border-strong:  #5B6A85;
  --rule-brass:     #4A3D1E;
  --accent:         #96B7EE;
  --accent-strong:  #B3CBF4;
  --on-accent:      #0F1420;
  --accent-soft:    #243350;
  --accent-ink:     #BCD0F5;
  --brass:          #D2A64E;
  --brass-text:     #DDB768;
  --brass-soft:     #372C11;
  --ok-text:        #82CFA6;
  --ok-soft:        #15301F;
  --warn-text:      #EFA075;
  --warn-soft:      #3A2012;
  --chip-bg:        #232D40;
  --chip-text:      #B9C4D8;
  --scrim:          rgba(4, 8, 16, 0.60);
  --shadow-card:    none;
  --shadow-lift:    none;
  --shadow-panel:   -8px 0 32px rgba(0, 0, 0, 0.55);
}

/* Explicit light choice — restates the light palette so it outranks the
   prefers-color-scheme block (0,1,1 beats the plain :root inside the media
   query). Same role the source's :not([data-theme="light"]) guard served. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:             #EFF2F7;
  --surface:        #F7F9FC;
  --surface-raised: #FFFFFF;
  --text:           #1B2536;
  --text-muted:     #4A576C;
  --border:         #D5DCE7;
  --border-strong:  #75839A;
  --rule-brass:     #D5C48E;
  --accent:         #33518A;
  --accent-strong:  #28406E;
  --on-accent:      #FFFFFF;
  --accent-soft:    #DCE4F2;
  --accent-ink:     #24406F;
  --brass:          #8A6412;
  --brass-text:     #6F5008;
  --brass-soft:     #F1E6CB;
  --ok-text:        #1D6B45;
  --ok-soft:        #D9EDE0;
  --warn-text:      #9E3A18;
  --warn-soft:      #F9E4D8;
  --chip-bg:        #E3E8F1;
  --chip-text:      #39465C;
  --scrim:          rgba(15, 20, 32, 0.45);
  --shadow-card:    0 1px 2px rgba(27, 37, 54, 0.06);
  --shadow-lift:    0 2px 8px rgba(27, 37, 54, 0.10);
  --shadow-panel:   -8px 0 32px rgba(27, 37, 54, 0.16);
}

/* Semantic aliases — added by this design system for readability; they resolve
   to the source tokens above and never introduce a new colour. */
:root {
  --text-body:       var(--text);
  --text-meta:       var(--text-muted);
  --surface-page:    var(--bg);
  --surface-card:    var(--surface);
  --surface-panel:   var(--surface-raised);
  --border-hairline: var(--border);
  --border-control:  var(--border-strong);
  --link:            var(--accent);
  --link-hover:      var(--accent-strong);
}

/* Typography — three faces, exact stacks from the source, plus the type roles
   the page actually uses (every size/weight/leading below is measured from
   the source CSS, not rounded). */

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* roles — shorthand font values, ready for `font:` */
  --type-page-title:    600 32px/1.15 var(--font-display);   /* section h2, -0.25px tracking */
  --type-panel-title:   600 24px/1.2  var(--font-display);   /* drawer title */
  --type-wordmark:      600 18px/1.2  var(--font-display);   /* header, -0.25px tracking */
  --type-card-title:    600 17px/1.35 var(--font-body);
  --type-subhead:       600 16px/1.4  var(--font-body);
  --type-body:          400 16px/1.55 var(--font-body);      /* body default */
  --type-body-sm:       400 14px/1.45 var(--font-body);
  --type-control:       500 14px/1.2  var(--font-body);      /* buttons, chips, nav */
  --type-stat:          500 28px/1.1  var(--font-mono);      /* tabular */
  --type-code:          400 13px/1.5  var(--font-mono);
  --type-meta:          500 11px/1.2  var(--font-mono);      /* call numbers, labels: 0.08em, uppercase */
  --type-badge:         500 11px/1.4  var(--font-mono);      /* 0.08em, uppercase */

  /* tracking */
  --track-display: -0.25px;   /* every display-face heading */
  --track-meta:     0.08em;   /* every uppercase mono label */

  /* measure */
  --measure-prose: 65ch;      /* intros, descriptions, callouts */
  --measure-foot:  72ch;      /* footer paragraphs */
}

/* Spacing — INTENTIONAL ADDITION (see readme.md → Intentional additions).
   The source uses literal px values; this scale simply names the ones it
   actually uses. No value here is invented, snapped, or rounded — note the
   off-grid 6/10/14/18 steps that the source genuinely relies on. */

:root {
  --space-1:  4px;   /* chip gap in phase-skills rows */
  --space-2:  6px;   /* badge gaps, badge vertical padding */
  --space-3:  8px;   /* chip row gap, badge row gap, default inline gap */
  --space-4:  10px;  /* card head rule gap, search-box gap */
  --space-5:  12px;  /* filter stack gap, code padding, foot-link padding */
  --space-6:  14px;  /* search-box side padding, callout padding */
  --space-7:  16px;  /* card grid gap, card side rhythm, section blocks */
  --space-8:  18px;  /* card horizontal padding (16px 18px) */
  --space-9:  20px;  /* container gutter (mobile), guide-block padding */
  --space-10: 24px;  /* drawer padding, filter bottom margin */
  --space-11: 32px;  /* container gutter (>=768px), empty-state padding */
  --space-12: 40px;  /* router-block bottom margin */
  --space-13: 48px;  /* section padding-block (mobile) */
  --space-14: 64px;  /* section padding-block (>=768px) */

  /* layout */
  --container-max: 1200px;
  --gutter:        20px;
  --gutter-md:     32px;
  --grid-card-min: 264px;  /* auto-fill minmax for the skill grid */
  --grid-gap:      16px;
  --grid-gap-xl:   20px;   /* >=1280px */
  --drawer-w:      480px;  /* >=768px; 90vw cap */
  --hit-min:       44px;   /* every interactive target */
  --chip-h:        32px;   /* visible chip height inside a 44px hit area */
  --field-h:       48px;   /* search box; 52px >=640px */
}

/* Radii, borders, elevation. Three radii only — small enough that the page
   reads as paper stock rather than as software. */

:root {
  --r-sm: 3px;   /* chips, badges, code, nav pills — the default */
  --r-md: 6px;   /* cards, buttons, fields, panels */
  --r-lg: 12px;  /* reserved; unused in the source page */

  --hairline: 1px solid var(--border);
  --control-line: 1px solid var(--border-strong);
  --rule: 1px solid var(--rule-brass);   /* brass rule under card headers only */

  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  --header-h: 101px;   /* wordmark row + scrolling nav-pill row */
}

@media (min-width: 768px) {
  :root { --header-h: 61px; }
}

/* Motion — short, linear-ish, and fully reduced-motion gated in the source.
   No keyframes exist anywhere in the product: transitions only. */

:root {
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */ /* drawer enter */
  --ease-out: ease-out; /* @kind other */ /* cards, buttons */

  --dur-tint:   120ms; /* @kind other */ /* chip/badge colour, grid dim, marker rotate */
  --dur-hover:  150ms; /* @kind other */ /* card lift, button fills */
  --dur-exit:   180ms; /* @kind other */ /* drawer dismiss, backdrop fade */
  --dur-enter:  240ms; /* @kind other */ /* drawer open */
}