/* ============================================================
   KRATHES — design tokens
   Two anchor colors, no third. All UI states are tints/shades.
   ============================================================ */

/* ---- Webfont registration --------------------------------- */
/* Free fallbacks loaded from Google Fonts. If licensed Tiempos
   Headline and Söhne files are present in /fonts, prefer them. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Anchor colors (do not introduce a third) ----------- */
  --oxblood:        #5C1F1B;   /* primary */
  --ivory:          #F1ECE0;   /* secondary / page background */
  --sumi:           #1A1612;   /* dark-mode background only */

  /* ---- Oxblood scale (tints + shades, no other hue) ------- */
  --oxblood-50:     #F4E8E6;
  --oxblood-100:    #E5C9C5;
  --oxblood-200:    #C99A93;
  --oxblood-300:    #A86A60;
  --oxblood-400:    #834239;
  --oxblood-500:    #5C1F1B;   /* anchor */
  --oxblood-600:    #4D1916;
  --oxblood-700:    #3E1411;
  --oxblood-800:    #2E0F0D;
  --oxblood-900:    #1F0907;

  /* ---- Ivory scale (warm neutral) ------------------------- */
  --ivory-50:       #FBF8F1;
  --ivory-100:      #F6F2E7;
  --ivory-200:      #F1ECE0;   /* anchor */
  --ivory-300:      #E5DECC;
  --ivory-400:      #D2C8AE;
  --ivory-500:      #B6AB8C;
  --ivory-600:      #847B62;
  --ivory-700:      #4F4936;

  /* ---- Sumi scale (dark mode) ----------------------------- */
  --sumi-50:        #2A2521;
  --sumi-100:       #221E1A;
  --sumi-200:       #1A1612;   /* anchor */
  --sumi-300:       #14110E;
  --sumi-400:       #0E0B09;

  /* ---- Semantic — light mode ------------------------------ */
  --bg:             var(--ivory-200);
  --bg-raised:      var(--ivory-100);
  --bg-recessed:    var(--ivory-300);

  --fg:             var(--oxblood-700);   /* body text on ivory */
  --fg-strong:      var(--oxblood-900);   /* headings */
  --fg-muted:       var(--ivory-700);     /* secondary text */
  --fg-faint:       var(--ivory-600);     /* captions, footnotes */
  --fg-on-oxblood:  var(--ivory-100);

  --accent:         var(--oxblood-500);
  --accent-hover:   var(--oxblood-700);
  --accent-press:   var(--oxblood-800);

  /* States — tints/shades of anchors only */
  --state-success-fg: var(--oxblood-600);   /* "audit pass" — deeper oxblood */
  --state-error-fg:   var(--oxblood-800);   /* "audit fail" — denser oxblood */
  --state-warn-fg:    var(--oxblood-400);
  --state-disabled:   var(--ivory-500);

  /* Hairlines */
  --rule:           color-mix(in oklab, var(--oxblood-500) 12%, transparent);
  --rule-strong:    color-mix(in oklab, var(--oxblood-500) 24%, transparent);
  --rule-heavy:     var(--oxblood-500);   /* 2px section rule */
  --rule-on-sumi:   color-mix(in oklab, var(--ivory-200) 18%, transparent);

  /* ---- Type families -------------------------------------- */
  /* Display / wordmark — Tiempos Headline preferred, Cormorant SC fallback */
  --font-display:  "Tiempos Headline", "Cormorant SC", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  /* Marketing body — Source Serif Pro preferred, EB Garamond fallback */
  --font-serif:    "Source Serif Pro", "EB Garamond", "Iowan Old Style", Georgia, serif;
  /* App UI — Söhne preferred, Inter fallback */
  --font-sans:     "Söhne", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Code / data / citations */
  --font-mono:     "JetBrains Mono", "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (conservative; print-grade) ------------- */
  --fs-12:   12px;   /* footnote / colophon */
  --fs-13:   13px;   /* small caps / eyebrow */
  --fs-14:   14px;   /* UI default */
  --fs-16:   16px;   /* body */
  --fs-18:   18px;   /* lead */
  --fs-22:   22px;   /* h4 */
  --fs-28:   28px;   /* h3 */
  --fs-40:   40px;   /* h2 */
  --fs-56:   56px;   /* h1 */
  --fs-72:   72px;   /* hero */
  --fs-96:   96px;   /* wordmark, occasional */

  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.7;
  --lh-loose:   1.85;

  --track-display:  -0.01em;  /* hero, h1 */
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-wider:    0.08em;
  --track-widest:   0.12em;   /* small caps, eyebrows, wordmark */

  /* ---- Spacing — 8pt base grid ---------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ---- Layout widths -------------------------------------- */
  --measure-prose:  64ch;     /* long-form reading width */
  --measure-narrow: 48ch;
  --container-max:  1200px;
  --container-app:  100%;     /* the app fills */

  /* ---- Borders & corners ---------------------------------- */
  --radius-0:    0px;
  --radius-1:    1px;   /* micro-chamfer on inputs */
  --radius-2:    2px;   /* maximum corner allowed */
  --bw-hairline: 1px;
  --bw-rule:     2px;   /* section rule */

  /* ---- Motion --------------------------------------------- */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --dur-press: 80ms;
  --dur-hover: 120ms;
  --dur-page:  160ms;
}

/* ---- Dark mode ------------------------------------------- */
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:           var(--sumi-200);
    --bg-raised:    var(--sumi-100);
    --bg-recessed:  var(--sumi-300);

    --fg:           var(--ivory-200);
    --fg-strong:    var(--ivory-100);
    --fg-muted:     var(--ivory-400);
    --fg-faint:     var(--ivory-500);
    --fg-on-oxblood: var(--ivory-100);

    --accent:       var(--oxblood-300);     /* lighter on dark for contrast */
    --accent-hover: var(--oxblood-200);
    --accent-press: var(--oxblood-400);

    --rule:         var(--rule-on-sumi);
  }
}

/* ============================================================
   Semantic element styles — drop-in
   ============================================================ */

html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "kern", "onum";
}

/* ---- Headings — display family --------------------------- */
.h-hero, h1.hero,
.h1, h1, .h2, h2, .h3, h3, .h4, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 600;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.h-hero, h1.hero { font-size: var(--fs-72); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.h1, h1         { font-size: var(--fs-56); line-height: var(--lh-display); }
.h2, h2         { font-size: var(--fs-40); line-height: var(--lh-tight); }
.h3, h3         { font-size: var(--fs-28); line-height: var(--lh-tight); }
.h4, h4         { font-size: var(--fs-22); line-height: var(--lh-snug); letter-spacing: 0; }

/* ---- Body, paragraph ------------------------------------- */
p, .p {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: var(--measure-prose);
  text-wrap: pretty;
}
.lead { font-size: var(--fs-22); line-height: 1.55; color: var(--fg-strong); }
.small, small { font-size: var(--fs-14); }
.caption { font-size: var(--fs-13); color: var(--fg-muted); }

/* ---- Eyebrow / small-caps label -------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  font-feature-settings: "smcp" on, "c2sc" on;
  color: var(--accent);
  font-weight: 600;
}

/* ---- Wordmark -------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

/* ---- Links — always underlined --------------------------- */
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, var(--accent) 50%, transparent);
  transition: color var(--dur-hover) var(--ease-out),
              text-decoration-thickness var(--dur-hover) var(--ease-out),
              text-decoration-color var(--dur-hover) var(--ease-out);
}
a:hover  { color: var(--accent-hover); text-decoration-thickness: 2px; text-decoration-color: var(--accent-hover); }
a:active { color: var(--accent-press); }

/* ---- Code / monospace ------------------------------------ */
code, .mono, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "liga" off, "calt" off;
}

/* ---- Section rule (the letterhead règle) ----------------- */
.rule {
  height: var(--bw-rule);
  background: var(--rule-heavy);
  border: 0;
  margin: var(--sp-5) 0;
  width: var(--sp-7);
}
.rule-full { width: 100%; }

/* ---- Hairline divider ------------------------------------ */
.hairline { border: 0; border-top: var(--bw-hairline) solid var(--rule); margin: var(--sp-5) 0; }

/* ---- Buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 22px;
  border: var(--bw-hairline) solid var(--accent);
  border-radius: var(--radius-1);
  background: var(--accent);
  color: var(--fg-on-oxblood);
  cursor: pointer;
  transition: background var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out);
  text-decoration: none;
}
.btn:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { background: var(--accent-press); border-color: var(--accent-press); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--state-disabled);
  border-color: var(--state-disabled);
  color: var(--ivory-100);
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
}
.btn-ghost:hover  { background: var(--ivory-300); }
.btn-ghost:active { background: var(--ivory-400); }

/* ---- Form inputs ----------------------------------------- */
.input {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  color: var(--fg-strong);
  background: var(--ivory-100);
  border: var(--bw-hairline) solid var(--rule-strong);
  border-radius: var(--radius-1);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.input::placeholder { color: var(--fg-faint); font-style: italic; }
.input:hover { border-color: var(--accent); }
.input:focus { border-color: var(--accent); background: var(--ivory-50); }

/* ---- Card ------------------------------------------------- */
.card {
  background: var(--bg-raised);
  border: var(--bw-hairline) solid var(--rule);
  border-radius: var(--radius-1);
  padding: var(--sp-5);
}
.card-emphasis { border-top: var(--bw-rule) solid var(--accent); }

/* ---- Citation pill --------------------------------------- */
.cite {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--accent);
  border: var(--bw-hairline) solid var(--rule-strong);
  background: var(--ivory-100);
  padding: 2px 8px;
  border-radius: var(--radius-1);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.cite::before { content: "§"; font-family: var(--font-display); font-style: italic; opacity: 0.7; }

/* ---- Selection ------------------------------------------- */
::selection { background: var(--oxblood-500); color: var(--ivory-100); }