/* ============================================================
   North7 Design System — Color & Type Tokens
   ------------------------------------------------------------
   Three themes share the same accent hues; only neutrals,
   surfaces, and contrast values shift.

   Themes:
     :root, [data-theme="light"]   — paper, ink, warm slate
     [data-theme="pastel"]         — sage, sand, mist, peach
     [data-theme="dark"]           — alpine night, pine, ember

   Pull the variable, not the hex. Always.
============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   1. BASE TOKENS (theme-independent)
============================================================ */
:root {
  /* ---------- Type families ---------- */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (modular, ratio 1.250 — major third) ---------- */
  --fs-xs:    0.75rem;    /* 12 — captions, footnotes */
  --fs-sm:    0.875rem;   /* 14 — small UI text */
  --fs-base:  1rem;       /* 16 — body */
  --fs-md:    1.125rem;   /* 18 — large body / lede */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.75rem;    /* 28 */
  --fs-2xl:   2.25rem;    /* 36 */
  --fs-3xl:   3rem;       /* 48 */
  --fs-4xl:   4rem;       /* 64 */
  --fs-5xl:   5.5rem;     /* 88 — hero display */

  /* ---------- Line heights ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrow labels */

  /* ---------- Font weights ---------- */
  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-sb:     600;
  --fw-bold:   700;

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

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- Brand accent hues (shared) ---------- */
  --pine-50:   #ECF2EE;
  --pine-100:  #D4E2D7;
  --pine-200:  #A8C4AE;
  --pine-300:  #74A07E;
  --pine-400:  #4B7D58;
  --pine-500:  #2F5C3D;    /* primary */
  --pine-600:  #224730;
  --pine-700:  #183524;
  --pine-800:  #0F2317;

  --ember-50:  #FBEFE8;
  --ember-100: #F6DAC9;
  --ember-200: #EFB695;
  --ember-300: #E58F61;
  --ember-400: #D26B3A;    /* accent */
  --ember-500: #B0532A;
  --ember-600: #8A3F1E;
  --ember-700: #5F2B14;

  --sky-50:    #ECF1F4;
  --sky-100:   #D2DEE7;
  --sky-200:   #A3BDCD;
  --sky-300:   #6E96AE;
  --sky-400:   #467289;
  --sky-500:   #2F5468;

  --sand-50:   #F6EFE3;
  --sand-100:  #ECDFC4;
  --sand-200:  #DDC79B;
  --sand-300:  #C7A972;

  /* ---------- Shadows (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 1px rgba(28, 24, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.06), 0 1px 1px rgba(28, 24, 18, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(28, 24, 18, 0.08), 0 2px 4px -2px rgba(28, 24, 18, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(28, 24, 18, 0.10), 0 4px 8px -4px rgba(28, 24, 18, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(28, 24, 18, 0.18), 0 8px 16px -8px rgba(28, 24, 18, 0.08);
  --shadow-ring: 0 0 0 1px rgba(28, 24, 18, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   220ms;
  --t-slow:   400ms;

  /* ---------- Layout ---------- */
  --content-narrow: 38rem;   /* 608 — long-form reading */
  --content-base:   62rem;   /* 992 — standard articles */
  --content-wide:   80rem;   /* 1280 — galleries, apps */
  --content-bleed:  96rem;   /* 1536 — max */
}

/* ============================================================
   2. THEME: LIGHT (default)
   Paper, ink, pine.
============================================================ */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg:         #FAF7F1;   /* warm paper */
  --bg-soft:    #F2EDE3;
  --bg-sunken:  #E9E1D2;
  --surface:    #FFFFFF;
  --surface-2:  #FAF7F1;

  /* Foreground */
  --fg:         #1C1812;   /* near-black ink, warm */
  --fg-1:       #1C1812;
  --fg-2:       #4A4338;   /* secondary text */
  --fg-3:       #80776A;   /* tertiary / muted */
  --fg-4:       #B0A797;   /* placeholder, disabled */
  --fg-inverse: #FAF7F1;

  /* Borders */
  --border:        rgba(28, 24, 18, 0.10);
  --border-strong: rgba(28, 24, 18, 0.20);
  --border-subtle: rgba(28, 24, 18, 0.06);

  /* Brand */
  --brand:         var(--pine-500);
  --brand-hover:   var(--pine-600);
  --brand-press:   var(--pine-700);
  --brand-soft:    var(--pine-50);
  --on-brand:      #FAF7F1;

  --accent:        var(--ember-400);
  --accent-hover:  var(--ember-500);
  --accent-soft:   var(--ember-50);
  --on-accent:     #FAF7F1;

  /* Semantic */
  --success: #2E6B43;
  --warning: #B47D1E;
  --danger:  #A6402C;
  --info:    var(--sky-400);

  --success-soft: #E5EFE8;
  --warning-soft: #F6ECD5;
  --danger-soft:  #F6E2DC;
  --info-soft:    #E3ECF1;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(75, 125, 88, 0.35);

  /* Selection */
  --selection-bg: rgba(210, 107, 58, 0.25);
}

/* ============================================================
   3. THEME: PASTEL
   Soft chalky alpine — sage, sand, mist, peach.
============================================================ */
[data-theme="pastel"] {
  --bg:         #F4F1E8;
  --bg-soft:    #EAE6D8;
  --bg-sunken:  #DFD9C5;
  --surface:    #FBF9F2;
  --surface-2:  #F4F1E8;

  --fg:         #2B2A24;
  --fg-1:       #2B2A24;
  --fg-2:       #5C5849;
  --fg-3:       #8C8773;
  --fg-4:       #B8B19A;
  --fg-inverse: #FBF9F2;

  --border:        rgba(43, 42, 36, 0.10);
  --border-strong: rgba(43, 42, 36, 0.20);
  --border-subtle: rgba(43, 42, 36, 0.06);

  /* Softer brand */
  --brand:         #6E9A78;   /* dusty sage */
  --brand-hover:   #5C8466;
  --brand-press:   #4B6E54;
  --brand-soft:    #DDE8DE;
  --on-brand:      #FBF9F2;

  --accent:        #E5A07A;   /* faded peach */
  --accent-hover:  #D38961;
  --accent-soft:   #F6E3D5;
  --on-accent:     #2B2A24;

  --success: #6E9A78;
  --warning: #C9A55E;
  --danger:  #C47660;
  --info:    #8FAEBC;

  --success-soft: #DDE8DE;
  --warning-soft: #EFE4C9;
  --danger-soft:  #F0DAD0;
  --info-soft:    #D9E4EA;

  --focus-ring: 0 0 0 3px rgba(110, 154, 120, 0.30);
  --selection-bg: rgba(229, 160, 122, 0.28);
}

/* ============================================================
   4. THEME: DARK
   Alpine night — deep navy/charcoal, pine, ember.
============================================================ */
[data-theme="dark"] {
  --bg:         #14171B;   /* alpine night */
  --bg-soft:    #1A1E23;
  --bg-sunken:  #0F1216;
  --surface:    #1E2329;
  --surface-2:  #262C33;

  --fg:         #F0EBE0;
  --fg-1:       #F0EBE0;
  --fg-2:       #C5BFB1;
  --fg-3:       #8E8676;
  --fg-4:       #5C5749;
  --fg-inverse: #14171B;

  --border:        rgba(240, 235, 224, 0.10);
  --border-strong: rgba(240, 235, 224, 0.20);
  --border-subtle: rgba(240, 235, 224, 0.05);

  --brand:         #7AB58C;   /* brighter pine for contrast */
  --brand-hover:   #98C8A6;
  --brand-press:   #B6DBC1;
  --brand-soft:    rgba(122, 181, 140, 0.14);
  --on-brand:      #14171B;

  --accent:        #E58F61;
  --accent-hover:  #EFA882;
  --accent-soft:   rgba(229, 143, 97, 0.14);
  --on-accent:     #14171B;

  --success: #7AB58C;
  --warning: #E3BD6A;
  --danger:  #E08572;
  --info:    #8FB8CC;

  --success-soft: rgba(122, 181, 140, 0.14);
  --warning-soft: rgba(227, 189, 106, 0.14);
  --danger-soft:  rgba(224, 133, 114, 0.14);
  --info-soft:    rgba(143, 184, 204, 0.14);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.40);
  --shadow-ring: 0 0 0 1px rgba(240, 235, 224, 0.06);

  --focus-ring: 0 0 0 3px rgba(122, 181, 140, 0.40);
  --selection-bg: rgba(229, 143, 97, 0.35);
}

/* ============================================================
   5. SEMANTIC TYPE STYLES
   Apply to any element; or use the helper classes below.
============================================================ */

/* Base */
html { font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }
::selection { background: var(--selection-bg); }

/* Display & headings — Instrument Serif for character */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-sb);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-reg);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Eyebrow — small uppercase label, used above headings */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Pull-quote — italic serif */
.t-quote, blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--brand);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
}

/* Code */
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-med);
  background: var(--bg-soft);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

pre, .t-pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--bg-sunken);
  color: var(--fg-1);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
pre code { background: none; padding: 0; }

/* Link */
a, .t-link {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--brand) 35%, transparent);
  transition: color var(--t-fast) var(--ease-soft), text-decoration-color var(--t-fast) var(--ease-soft);
}
a:hover { color: var(--brand-hover); text-decoration-color: var(--brand-hover); }

/* Utility */
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-brand { color: var(--brand); }
.fg-accent { color: var(--accent); }

.bg     { background: var(--bg); }
.surface { background: var(--surface); }