/* Taylor Erwin — deployed styles (design-system tokens, flattened) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* =========================================================
   Colors — dark, warm, executive.
   Near-black warm ground, bone ink, burnt-orange accent.
   Base values first, then semantic aliases.
   ========================================================= */
:root {
  /* ---- Ground / surfaces (warm near-black) ---- */
  --bg:         #0C0B0A;   /* page ground */
  --bg-raise:   #100E0C;   /* raised hover surface */
  --bg-card:    #100F0D;   /* card fill */
  --bg-sunk:    #080706;   /* lightbox / deepest */

  /* ---- Ink ramp (bone → muted, never pure gray) ---- */
  --ink:    #F4F0E8;   /* primary text */
  --ink-2:  #E4DED2;   /* card body — high contrast */
  --ink-3:  #C9C2B5;   /* secondary body */
  --ink-4:  #ADA699;   /* tertiary / captions */
  --ink-5:  #97907F;   /* muted — labels */
  --ink-6:  #8C867B;   /* faintest */

  /* ---- Accent (burnt orange — never a reading color) ---- */
  --accent:      #E08862;
  --accent-hi:   #EF9876;   /* hover / lift */
  --accent-dim:  #B5654A;   /* pressed / deep */

  /* ---- Hairlines (bone over dark, by opacity) ---- */
  --line-10: rgba(244,240,232,.10);
  --line-14: rgba(244,240,232,.14);
  --line-18: rgba(244,240,232,.18);
  --line-26: rgba(244,240,232,.26);
  --line-50: rgba(244,240,232,.50);

  /* ---- Accent washes (glows / fills) ---- */
  --accent-08: rgba(224,136,98,.08);
  --accent-13: rgba(224,136,98,.13);
  --accent-20: rgba(224,136,98,.20);

  /* ---------- Semantic aliases ---------- */
  --surface-page:   var(--bg);
  --surface-card:   var(--bg-card);
  --surface-raise:  var(--bg-raise);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-muted:     var(--ink-4);
  --text-faint:     var(--ink-5);
  --text-accent:    var(--accent);

  --border-subtle:  var(--line-10);
  --border-default: var(--line-14);
  --border-strong:  var(--line-26);

  --focus-ring:     var(--accent);
}

/* =========================================================
   Spacing & layout — 4px base rhythm, section padding, container.
   ========================================================= */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  22px;
  --sp-6:  30px;
  --sp-7:  38px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 92px;
  --sp-11: 124px;   /* section vertical rhythm */

  /* ---- Layout ---- */
  --wrap:  1140px;   /* max content width */
  --pad-x: 48px;     /* section horizontal padding (desktop) */
  --band-y: 124px;   /* section vertical padding */
  --gap-hair: 1px;   /* grid hairline gap (cells read as one ruled table) */
}

@media (max-width: 1100px) { :root { --pad-x: 40px; --band-y: 104px; } }
@media (max-width: 900px)  { :root { --pad-x: 24px; --band-y: 88px; } }
@media (max-width: 620px)  { :root { --pad-x: 18px; --band-y: 72px; } }

/* =========================================================
   Effects — radii, borders, shadows, glows, motion.
   The system is flat and ruled: hairline borders, almost no
   rounding, no drop shadows. Depth comes from glow + inset rules.
   ========================================================= */
:root {
  /* ---- Radii (minimal — this brand is square) ---- */
  --r-none: 0;    /* @kind radius */
  --r-xs:   2px;    /* buttons, chips, focus */
  --r-sm:   3px;    /* skip-link, small controls */

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--line-14);
  --border-soft: 1px solid var(--line-10);
  --border-firm: 1px solid var(--line-26);

  /* ---- Accent emphasis (inset top rule on hover cards) ---- */
  --emph-inset: inset 0 2px 0 var(--accent);

  /* ---- Glow (the only "shadow" — radial accent bloom) ---- */
  --glow-accent: radial-gradient(circle, rgba(224,136,98,.20), rgba(224,136,98,0) 62%); /* @kind other */
  --glow-soft:   radial-gradient(circle, rgba(224,136,98,.13), rgba(224,136,98,0) 64%); /* @kind other */

  /* ---- Protection gradient (caption legibility over imagery) ---- */
  --scrim-up: linear-gradient(to top, rgba(12,11,10,.82), transparent); /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.2,.6,.2,1);   /* @kind other */
  --ease-draw:  cubic-bezier(.4,.1,.2,1);   /* @kind other */
  --dur-fast:   .2s;    /* @kind other */
  --dur-mid:    .35s;   /* @kind other */
  --dur-slow:   .6s;    /* @kind other */

  /* ---- Focus ---- */
  --focus: 2px solid var(--accent);
  --focus-offset: 3px;
}

/* =========================================================
   Base — reset, element defaults, shared primitives.
   Depends on the token files (imported before this one).
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--bg); }

a:focus-visible, button:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}

/* shared utility */
.accent { color: var(--accent); }

/* content container */
.ds-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation: none !important; }
}