/* =============================================================
   Seeking Awen — design tokens
   Cool, misty Pacific Northwest base · candle-warm accents.
   Light and dark from day one. WCAG AA against body text.
   ============================================================= */

/* ---------- Webfonts (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLOR — Light mode (default)
     Inspired by: morning fog on basalt, lichen, parchment,
     the inside of an Orthodox candle's glow.
     ========================================================= */

  /* Surfaces — parchment / fog */
  --parchment:        #f4efe6;   /* page bg — warm off-white, like vellum */
  --parchment-soft:   #ebe4d6;   /* cards, raised surfaces */
  --fog:              #dcd6ca;   /* dividers, subtle fills */
  --fog-deep:         #c4bdae;   /* hairline borders */

  /* Forest / lichen — primary cool */
  --moss-50:          #e6ebe2;
  --moss-100:         #c8d3c0;
  --moss-300:         #8a9b81;
  --moss-500:         #5a6e54;   /* primary green */
  --moss-700:         #3d4f3a;
  --moss-900:         #1f2c1e;

  /* Sea / slate — primary cool secondary */
  --slate-50:          #e3e7ea;
  --slate-100:         #b9c4cc;
  --slate-300:         #7a8a94;
  --slate-500:         #4a5b67;   /* drift-sea blue-grey */
  --slate-700:         #2f3d47;
  --slate-900:         #182027;

  /* Ember / candle — warm accent (USE SPARINGLY) */
  --ember-50:          #f7e9d4;
  --ember-200:         #e9c89a;
  --ember-400:         #c89160;   /* link / call-to-action */
  --ember-600:         #8f5a2e;   /* hover, pressed accent */
  --ember-800:         #5a3819;

  /* Halo gold — for the awen rays mark only, not body chrome */
  --halo:              #b89968;
  --halo-deep:         #8a6f3f;

  /* Thorn / oxblood — error, also rare emphasis */
  --thorn-300:         #b07a6e;
  --thorn-500:         #8a4a3c;
  --thorn-700:         #5a2c22;

  /* Bark / ink — text */
  --ink:               #20211c;   /* body text */
  --ink-soft:          #3d3e36;   /* secondary text */
  --ink-mute:          #6a6b60;   /* tertiary, captions */
  --ink-faint:         #94948a;   /* hairline labels */

  /* =========================================================
     SEMANTIC — light mode
     ========================================================= */
  --bg:                var(--parchment);
  --bg-raised:         var(--parchment-soft);
  --bg-sunk:           #ece5d6;
  --bg-overlay:        rgba(244, 239, 230, 0.86);

  --fg:                var(--ink);
  --fg-soft:           var(--ink-soft);
  --fg-mute:           var(--ink-mute);
  --fg-faint:          var(--ink-faint);
  --fg-inverse:        var(--parchment);

  --border:            var(--fog-deep);
  --border-soft:       var(--fog);
  --rule:              rgba(32, 33, 28, 0.12);   /* hairline rules between sections */

  --accent:            var(--ember-600);          /* links, focused/active accent */
  --accent-hover:      var(--ember-800);
  --accent-soft:       var(--ember-50);

  --primary:           var(--moss-700);           /* primary brand green */
  --primary-hover:     var(--moss-900);
  --primary-soft:      var(--moss-50);

  --secondary:         var(--slate-700);
  --secondary-soft:    var(--slate-50);

  --halo-mark:         var(--halo);               /* awen rays color */

  --success:           var(--moss-500);
  --warning:           var(--ember-400);
  --error:             var(--thorn-500);
  --rust:              var(--thorn-500);

  --selection-bg:      var(--ember-200);
  --selection-fg:      var(--ink);

  /* =========================================================
     TYPE
     ========================================================= */
  --font-body:         'Source Serif 4', 'Source Serif Pro', 'Charter', 'Georgia', 'Times New Roman', serif;
  --font-display:      'Cormorant Garamond', 'Source Serif 4', 'Charter', 'Georgia', serif;
  --font-wordmark:     'Cardo', 'EB Garamond', 'Georgia', serif;
  --font-mono:         'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:           0.75rem;    /* 12px */
  --text-sm:           0.875rem;   /* 14px */
  --text-base:         1rem;       /* 16px */
  --text-body:         1.1875rem;  /* 19px */
  --text-lg:           1.5rem;     /* 24px */
  --text-xl:           1.875rem;   /* 30px */
  --text-2xl:          2.5rem;     /* 40px */
  --text-3xl:          3.5rem;     /* 56px */
  --text-4xl:          5rem;       /* 80px */
  --text-5xl:          7rem;       /* 112px */

  --leading-tight:     1.15;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.65;
  --leading-loose:     1.85;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  --measure:           64ch;
  --measure-narrow:    52ch;
  --measure-wide:      72ch;

  /* =========================================================
     SPACING
     ========================================================= */
  --space-0:           0;
  --space-1:           0.25rem;
  --space-2:           0.5rem;
  --space-3:           0.75rem;
  --space-4:           1rem;
  --space-5:           1.5rem;
  --space-6:           2rem;
  --space-7:           3rem;
  --space-8:           4rem;
  --space-9:           6rem;
  --space-10:          9rem;

  /* =========================================================
     RADIUS
     ========================================================= */
  --radius-none:       0;
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         6px;
  --radius-lg:         10px;
  --radius-pill:       999px;

  /* =========================================================
     SHADOW
     ========================================================= */
  --shadow-xs:         0 1px 0 rgba(32, 33, 28, 0.04);
  --shadow-sm:         0 1px 2px rgba(32, 33, 28, 0.06), 0 1px 1px rgba(32, 33, 28, 0.04);
  --shadow-md:         0 4px 12px rgba(32, 33, 28, 0.08), 0 1px 2px rgba(32, 33, 28, 0.04);
  --shadow-lg:         0 12px 32px rgba(32, 33, 28, 0.12), 0 2px 6px rgba(32, 33, 28, 0.06);
  --shadow-inset:      inset 0 1px 2px rgba(32, 33, 28, 0.06);
  --shadow-halo:       0 0 24px rgba(184, 153, 104, 0.35);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --ease-fog:          cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:     150ms;
  --duration-base:     280ms;
  --duration-slow:     520ms;
  --duration-slower:   900ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --page-max:          1200px;
  --reading-max:       720px;

  --z-base:            1;
  --z-raised:          10;
  --z-sticky:          50;
  --z-overlay:         100;
  --z-modal:           200;
}

/* =============================================================
   DARK MODE
   ============================================================= */
[data-theme="dark"] {
  --bg:                #161a17;
  --bg-raised:         #1e2420;
  --bg-sunk:           #0f1311;
  --bg-overlay:        rgba(22, 26, 23, 0.88);

  --fg:                #ebe4d4;
  --fg-soft:           #c8c2b3;
  --fg-mute:           #948e80;
  --fg-faint:          #6a6557;
  --fg-inverse:        #1e2420;

  --border:            #2f342e;
  --border-soft:       #262a25;
  --rule:              rgba(235, 228, 212, 0.10);

  --accent:            #d8a070;
  --accent-hover:      #ecb98a;
  --accent-soft:       #2a2017;

  --primary:           #8a9b81;
  --primary-hover:     #a8b89e;
  --primary-soft:      #1f2820;

  --secondary:         #7a8a94;
  --secondary-soft:    #1a2025;

  --halo-mark:         #d8b87a;

  --success:           #8a9b81;
  --warning:           #d8a070;
  --error:             #c08a7c;
  --rust:              #c08a7c;

  --selection-bg:      #5a3819;
  --selection-fg:      #ebe4d4;

  --shadow-xs:         0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-inset:      inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-halo:       0 0 28px rgba(216, 184, 122, 0.40);
}

/* =============================================================
   BASE
   ============================================================= */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  font-feature-settings: "kern", "liga", "onum";
  font-variant-numeric: oldstyle-nums;
  transition: background-color var(--duration-base) var(--ease-fog),
              color var(--duration-base) var(--ease-fog);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-medium); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); font-style: italic; }
h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-family: var(--font-body); }
h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-family: var(--font-body); color: var(--fg-mute); }

p {
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
  hanging-punctuation: first last;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transition: color var(--duration-fast) var(--ease-fog),
              text-decoration-color var(--duration-fast) var(--ease-fog);
}
a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

blockquote {
  margin: var(--space-6) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--fg-soft);
  line-height: var(--leading-snug);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-soft);
}
pre {
  background: var(--bg-sunk);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  overflow-x: auto;
  line-height: var(--leading-normal);
}
pre code { background: transparent; padding: 0; border: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--space-7) auto;
  max-width: 12rem;
}

small { font-size: var(--text-sm); color: var(--fg-mute); }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  margin: 0.05em 0.06em 0 -0.04em;
  color: var(--accent);
}

.smallcaps {
  font-variant: small-caps;
  letter-spacing: var(--tracking-wider);
  text-transform: lowercase;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-mute);
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}