/* ============================================================
   KimaraCode — Quiet Protocol
   Base color + type tokens, plus semantic element styles.
   ============================================================ */

:root {
  /* ---- Grey Split palette (light, warm-paper default) ---- */
  --kc-bg:         #F5F3EE;
  --kc-bg-elev:    #FAF8F3;
  --kc-ink:        #111111;
  --kc-kimara:     #777777;
  --kc-code:       #A8AAA0;
  --kc-muted:      #8F9388;
  --kc-rule:       #E8E5E0;
  --kc-rule-soft:  #EFEDE7;

  /* ---- Dark mode (Ivory on Ink) ---- */
  --kc-bg-dark:        #11120F;
  --kc-bg-elev-dark:   #181915;
  --kc-ink-dark:       #F0EBDF;
  --kc-rule-dark:      #2A2C27;
  --kc-rule-soft-dark: #1F211D;

  /* ---- Semantic surface tokens (light default) ---- */
  --bg:        var(--kc-bg);
  --bg-elev:   var(--kc-bg-elev);
  --fg1:       var(--kc-ink);
  --fg2:       var(--kc-kimara);
  --fg3:       var(--kc-muted);
  --fg-inv:    #FFFFFF;
  --rule:      var(--kc-rule);
  --rule-soft: var(--kc-rule-soft);

  --bg-gradient: radial-gradient(circle at top, #F7F4EF 0, #F4F2EC 45%, #F3F1EB 100%);

  /* ---- Semantic intent ---- */
  --intent-positive: #4A6B52;
  --intent-warning:  #8A6B3C;
  --intent-danger:   #8B4A4A;
  --intent-info:     var(--kc-kimara);

  /* ---- Type families ---- */
  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* ---- Type scale ---- */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.4375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-display: 6.875rem;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-flat:  -0.005em;
  --tracking-wide:  0.05em;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Radii ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
  --r-mark: 19%;

  --bw-1: 1px;
  --bw-2: 1.5px;

  /* ---- Shadows ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(17,17,17,0.04);
  --shadow-2: 0 4px 12px -8px rgba(17,17,17,0.10);
  --shadow-3: 0 12px 28px -16px rgba(17,17,17,0.18),
              0 4px 8px -6px rgba(17,17,17,0.08);
  --shadow-inset-rule: inset 0 -1px 0 var(--rule);

  /* ---- Motion ---- */
  --ease-quiet:  cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-enter:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:   cubic-bezier(0.55, 0.05, 0.85, 0.45);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- The Editorial Underline ---- */
  --underline-color: var(--kc-muted);
  --underline-offset: 6px;
  --underline-thickness: 1px;
}

[data-theme="dark"] {
  --bg:        var(--kc-bg-dark);
  --bg-elev:   var(--kc-bg-elev-dark);
  --fg1:       var(--kc-ink-dark);
  --fg2:       var(--kc-code);
  --fg3:       var(--kc-kimara);
  --rule:      var(--kc-rule-dark);
  --rule-soft: var(--kc-rule-soft-dark);
  --bg-gradient: none;
  --underline-color: var(--kc-kimara);
  /* White plate behind the QR so its black modules stay scannable on the
     near-black dark background. Light mode keeps it transparent (below). */
  --qr-plate:  #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--kc-bg-dark);
    --bg-elev:   var(--kc-bg-elev-dark);
    --fg1:       var(--kc-ink-dark);
    --fg2:       var(--kc-code);
    --fg3:       var(--kc-kimara);
    --rule:      var(--kc-rule-dark);
    --rule-soft: var(--kc-rule-soft-dark);
    --bg-gradient: none;
    --underline-color: var(--kc-kimara);
    --qr-plate:  #ffffff;
  }
}

/* ============================================================
   Geist Sans — self-hosted
   ============================================================ */
@font-face { font-family: 'Geist'; font-weight: 400; font-display: optional; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 500; font-display: optional; src: url('/assets/fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 600; font-display: optional; src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2'); }

/* ============================================================
   Base / semantic element styles
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-3) var(--ease-quiet), color var(--dur-3) var(--ease-quiet);
}

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

.kc-wordmark { font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-tight); }
.kc-wordmark .kimara { color: var(--kc-kimara); }
.kc-wordmark .code   { color: var(--kc-code); }

.kc-display {
  font-family: var(--font-mono);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

h1, .h1 { font-family: var(--font-sans); font-size: var(--t-3xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-5); }
h2, .h2 { font-family: var(--font-sans); font-size: var(--t-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-4); }
h3, .h3 { font-family: var(--font-sans); font-size: var(--t-xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-flat); margin: 0 0 var(--s-3); }
h4, .h4 { font-family: var(--font-sans); font-size: var(--t-lg); font-weight: 600; line-height: var(--leading-snug); margin: 0 0 var(--s-3); }

p { margin: 0 0 var(--s-4); color: var(--fg1); }
.lead { font-size: var(--t-md); color: var(--fg2); }
small, .caption { font-size: var(--t-sm); color: var(--fg3); }

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

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-color: var(--underline-color);
  transition: text-decoration-color var(--dur-2) var(--ease-quiet),
              color var(--dur-2) var(--ease-quiet);
}
a:hover { text-decoration-color: var(--fg1); }

.quiet-underline {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
  text-decoration-color: var(--underline-color);
}

.kc-caret::before { content: "> "; color: var(--kc-kimara); font-family: var(--font-mono); font-weight: 500; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9375em; }
code { background: var(--rule-soft); padding: 1px 6px; border-radius: var(--r-1); color: var(--fg2); }
pre { background: var(--bg-elev); border: 1px solid var(--rule); padding: var(--s-4); border-radius: var(--r-1); overflow-x: auto; line-height: 1.55; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }