/* ============================================================================
   CONFORMAL AI — FAMILY DESIGN TOKENS
   One palette. Three products. Light + dark.
   ---------------------------------------------------------------------------- */

:root {
  --c-ink:    #14151a;
  --c-paper:  #f8f8f5;
  --c-slate:  #5b616c;
  --c-mist:   #e6e7e4;
  --c-signal: #0fb981;

  --c-ink-2:    #1d1f26;
  --c-ink-3:    #2a2d36;
  --c-paper-2:  #ffffff;
  --c-signal-bright: #1fd68f;
  --c-signal-deep:   #0a8f63;

  --alt-blue:  #2f6bff;
  --alt-amber: #e8a13a;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bg:          var(--c-paper);
  --surface:     var(--c-paper-2);
  --surface-2:   #f1f1ed;
  --text:        var(--c-ink);
  --text-muted:  var(--c-slate);
  --text-faint:  #8b909a;
  --border:      var(--c-mist);
  --border-strong: #d4d5d0;
  --accent:      var(--c-signal);
  --accent-ink:  #04150f;
  --accent-soft: rgba(15, 185, 129, 0.10);

  --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.05);
  --shadow-md: 0 10px 30px -14px rgba(20, 21, 26, 0.20);
  --shadow-lg: 0 36px 70px -30px rgba(20, 21, 26, 0.34);

  --plate-ink:   var(--c-ink);
  --plate-paper: var(--c-paper);
  --plate-bg:    var(--surface);
  --plate-fg:    var(--c-ink);
}

[data-theme="dark"] {
  --bg:          var(--c-ink);
  --surface:     var(--c-ink-2);
  --surface-2:   #23262e;
  --text:        var(--c-paper);
  --text-muted:  #9ca1ab;
  --text-faint:  #6b707b;
  --border:      rgba(246, 246, 240, 0.10);
  --border-strong: rgba(246, 246, 240, 0.18);
  --accent:      var(--c-signal-bright);
  --accent-ink:  #04150f;
  --accent-soft: rgba(31, 214, 143, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 34px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.7);

  --plate-bg: var(--surface-2);
  --plate-fg: var(--c-paper);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.45s var(--ease), color 0.35s var(--ease);
}

::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}