/* ─────────────────────────────────────────────────────────────
   logan_bailey · SIGNAL design system · v1.0
   The single source of truth for the personal brand.
   Drop this into any project. Pair with DESIGN_SYSTEM.md.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── surfaces ── */
  --surface:        #f4f1ea;       /* page background */
  --surface-2:      #ebe7dd;       /* cards, sections, bands */
  --surface-3:      #e3dfd3;       /* deeper recess */

  /* ── ink (text on light) ── */
  --ink:            #13141a;       /* headings, primary text */
  --ink-2:          #3a3a44;       /* body copy */
  --ink-muted:      #7f7d76;       /* meta, labels, captions */

  /* ── accents (shared light/dark) ── */
  --accent:         #d97757;       /* burnt sienna — the warm one */
  --accent-soft:    rgba(217, 119, 87, 0.08);
  --signal:         #4a8de2;       /* electric blue — links, code, data */
  --signal-soft:    rgba(74, 141, 226, 0.08);

  /* ── status (use sparingly) ── */
  --ok:             #5a7a4d;
  --warn:           #c98a3a;
  --err:            #c25450;

  /* ── rules ── */
  --hair:           rgba(19, 20, 26, 0.10);   /* hairline borders */
  --rule:           rgba(19, 20, 26, 0.20);   /* visible borders */

  /* ── type ── */
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, "Geist Mono", monospace;
  --font-serif:     "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:      "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ── type scale (rem, root 16px) ── */
  --t-display:      3.5rem;   /* 56  — hero */
  --t-h1:           2.5rem;   /* 40 */
  --t-h2:           1.75rem;  /* 28 */
  --t-h3:           1.25rem;  /* 20 */
  --t-body:         0.9375rem;/* 15 */
  --t-meta:         0.6875rem;/* 11 */
  --t-micro:        0.625rem; /* 10 */

  --tracking-display: -0.04em;
  --tracking-heading: -0.025em;
  --tracking-body:    0;
  --tracking-meta:    0.12em;     /* mono meta breathes */
  --tracking-caps:    0.16em;

  /* ── spacing (4-base 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;
  --s-24: 96px;
  --s-32: 128px;

  /* ── radii (mostly 0 — this system is hard-edged) ── */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* ── motion ── */
  --ease:   cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-1:  120ms;
  --dur-2:  240ms;
  --dur-3:  420ms;

  /* ── elevation (almost none — flat by default) ── */
  --shadow-1: 0 1px 0 var(--hair);
  --shadow-2: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);

  /* ── layout ── */
  --container:  1240px;
  --gutter:     32px;
  --gutter-sm:  20px;

  color-scheme: light;
}

/* ── dark mode ── */
[data-theme="dark"], :root.dark {
  --surface:        #13141a;
  --surface-2:      #1a1c24;
  --surface-3:      #22242e;

  --ink:            #ede9df;
  --ink-2:          #a8a59c;
  --ink-muted:      #5e5d57;

  --hair:           rgba(237, 233, 223, 0.10);
  --rule:           rgba(237, 233, 223, 0.20);

  --accent-soft:    rgba(217, 119, 87, 0.10);
  --signal-soft:    rgba(74, 141, 226, 0.12);

  color-scheme: dark;
}

/* ── auto dark if user prefers ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #13141a;
    --surface-2:      #1a1c24;
    --surface-3:      #22242e;
    --ink:            #ede9df;
    --ink-2:          #a8a59c;
    --ink-muted:      #5e5d57;
    --hair:           rgba(237, 233, 223, 0.10);
    --rule:           rgba(237, 233, 223, 0.20);
    --accent-soft:    rgba(217, 119, 87, 0.10);
    --signal-soft:    rgba(74, 141, 226, 0.12);
    color-scheme: dark;
  }
}

/* ─── primitives ─── */

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

a {
  color: var(--signal);
  text-decoration: none;
  text-underline-offset: 4px;
}
a:hover { text-decoration: underline; }

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

/* mono code blocks */
code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* hairline page grid (optional class) */
.lb-grid-bg {
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 40px 40px;
}