/* ============================================================
   Koru Design System — Foundations
   ============================================================
   A values-led parent brand spanning 13 verticals.
   Visual posture: editorial, warm, regenerative, dignified.
   ============================================================ */

@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&display=swap");

:root {
  /* ---------- Color : Core (paper & ink) ---------- */
  --ink:           #1c1a17;   /* deep warm black — primary text, marks */
  --ink-soft:      #3a3631;   /* secondary text */
  --ink-muted:     #6b655c;   /* tertiary, captions */
  --ink-faint:     #a8a195;   /* placeholder, disabled */

  --paper:         #f4efe4;   /* page ground — warm off-white */
  --paper-2:       #ece5d3;   /* surface 2 — cards on paper */
  --paper-3:       #e0d8c3;   /* surface 3 — sunken, borders */
  --paper-edge:    #d5cbb1;   /* hairline borders */

  --bone:          #fbf9f3;   /* pure card-on-paper */
  --shell:         #fffdf7;   /* highest surface */

  /* ---------- Color : Earth accents (vertical-keyed) ---------- */
  --moss:          #3d5a3d;   /* primary regenerative accent */
  --moss-deep:     #2a3f2b;
  --moss-soft:     #758f6f;
  --moss-tint:     #dbe2cf;

  --clay:          #b85a3a;   /* warm terracotta */
  --clay-deep:     #8c3f25;
  --clay-soft:     #d39079;
  --clay-tint:     #ebd1c3;

  --ochre:         #c89540;   /* mustard warmth */
  --ochre-deep:    #936a23;
  --ochre-soft:    #d9b378;
  --ochre-tint:    #ecdcbe;

  --sky:           #5b8a90;   /* muted teal */
  --sky-deep:      #3d6469;
  --sky-soft:      #92b3b7;
  --sky-tint:      #cfdcde;

  --plum:          #6b3f5e;   /* deep restrained plum */
  --plum-deep:     #4a2c41;
  --plum-soft:     #9c7a90;
  --plum-tint:     #dccfd6;

  --stone:         #8a8478;   /* warm grey */
  --stone-deep:    #5a554c;
  --stone-soft:    #b6b1a4;
  --stone-tint:    #d8d3c5;

  /* ---------- Semantic ---------- */
  --success:       #4a7c4f;
  --warning:       #b8841e;
  --danger:        #a8431f;
  --info:          #4d7882;

  /* ---------- Background tokens ---------- */
  --bg:            var(--paper);
  --bg-elev-1:     var(--bone);
  --bg-elev-2:     var(--shell);
  --bg-sunk:       var(--paper-2);
  --bg-inverse:    var(--ink);

  /* ---------- Foreground tokens ---------- */
  --fg1:           var(--ink);
  --fg2:           var(--ink-soft);
  --fg3:           var(--ink-muted);
  --fg-faint:      var(--ink-faint);
  --fg-inverse:    var(--paper);
  --fg-link:       var(--moss-deep);
  --fg-accent:     var(--moss);

  /* ---------- Borders ---------- */
  --border:        var(--paper-edge);
  --border-strong: #b8ad8f;
  --border-ink:    var(--ink);

  /* ---------- Type families ---------- */
  --font-display:  "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --font-sans:     "Geist", "Söhne", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type scale (modular, ~1.2) ---------- */
  --t-12:  0.75rem;
  --t-13:  0.8125rem;
  --t-14:  0.875rem;
  --t-15:  0.9375rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-20:  1.25rem;
  --t-24:  1.5rem;
  --t-30:  1.875rem;
  --t-36:  2.25rem;
  --t-48:  3rem;
  --t-60:  3.75rem;
  --t-80:  5rem;
  --t-104: 6.5rem;

  /* ---------- Line height ---------- */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-loose:   1.7;  /* @kind font */

  /* ---------- Letter spacing ---------- */
  --tr-tight:   -0.025em;
  --tr-snug:    -0.012em;
  --tr-normal:  0; /* @kind font */
  --tr-wide:    0.02em;
  --tr-eyebrow: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --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 (restrained — paper, not plastic) ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---------- Shadows (warm ink, low intensity) ---------- */
  --sh-1:  0 1px 0 rgba(28, 26, 23, 0.04), 0 1px 2px rgba(28, 26, 23, 0.06);
  --sh-2:  0 2px 4px rgba(28, 26, 23, 0.06), 0 4px 12px rgba(28, 26, 23, 0.05);
  --sh-3:  0 6px 16px rgba(28, 26, 23, 0.08), 0 16px 32px rgba(28, 26, 23, 0.06);
  --sh-4:  0 12px 40px rgba(28, 26, 23, 0.12), 0 24px 60px rgba(28, 26, 23, 0.08);
  --sh-inset: inset 0 0 0 1px rgba(28, 26, 23, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.5, 0, 0.8, 0.2); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.4, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   Base reset + typography
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* ---------- Semantic type roles ---------- */

.k-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.k-display, h1.k-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--t-60), 7vw, var(--t-104));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}

h1, .k-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-60);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  margin: 0;
}

h2, .k-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
  margin: 0;
}

h3, .k-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
  margin: 0;
}

h4, .k-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-18);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
  margin: 0;
}

p, .k-body {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  color: var(--fg2);
  margin: 0;
}

.k-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-20);
  line-height: var(--lh-snug);
  color: var(--fg2);
  letter-spacing: var(--tr-snug);
}

.k-small {
  font-size: var(--t-14);
  line-height: var(--lh-snug);
  color: var(--fg3);
}

.k-caption {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  color: var(--fg3);
  letter-spacing: var(--tr-snug);
}

.k-mono {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: 0;
  color: var(--fg2);
}

.k-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
}

em, i, .k-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

code, .k-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  color: var(--fg1);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--moss);
  color: var(--paper);
}