/* ============================================================
   LUXE INNER CIRCLE — Design Tokens
   Dark, editorial, anti-slop luxury
============================================================ */

:root {
  /* Surfaces — deep, layered blacks */
  --surface-0: #060504;      /* page base */
  --surface-1: #0c0b09;      /* card base */
  --surface-2: #141210;      /* elevated card */
  --surface-3: #1c1915;      /* hover / pressed */
  --surface-line: #2a2621;   /* hairline divider */
  --surface-line-soft: #1a1714;

  /* Ink (text on dark) */
  --ink-100: #f4ede0;        /* display */
  --ink-200: #e8dfce;        /* titles */
  --ink-300: #c8bfae;        /* body high */
  --ink-400: #9a9184;        /* body */
  --ink-500: #6b6459;        /* muted */
  --ink-600: #47423a;        /* disabled */

  /* Accent — Antique Cold Gold (de-saturated, not AI-gold) */
  --gold-100: #f0dfae;       /* highlight */
  --gold-200: #d9c07e;       /* text-gold */
  --gold-300: #c9a961;       /* primary accent */
  --gold-400: #a88744;       /* pressed */
  --gold-500: #6e5528;       /* deep */

  /* Secondary accents (for tweaks) */
  --crimson-300: #b4414f;
  --crimson-400: #8e2a36;
  --platinum-300: #c9cbc9;
  --platinum-400: #9ea19e;

  /* Signal */
  --sig-live: #e6c55d;
  --sig-success: #8aa06b;
  --sig-warn: #cc8a3f;

  /* Type */
  --font-display: "Cormorant Garamond", "Noto Serif KR", ui-serif, serif;
  --font-serif-kr: "Noto Serif KR", "Cormorant Garamond", serif;
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing (8-pt base with editorial rhythm) */
  --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;
  --s-11: 192px;

  /* Radius — crisp, minimal */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Shadow — subtle, no glowy AI smear */
  --shadow-hairline: inset 0 0 0 1px var(--surface-line);
  --shadow-gold: 0 0 0 1px rgba(201, 169, 97, 0.35), 0 24px 80px -30px rgba(201, 169, 97, 0.25);
  --shadow-lift: 0 30px 60px -30px rgba(0,0,0,.8), 0 18px 40px -28px rgba(0,0,0,.6);

  /* Motion */
  --ease-out-cubic: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out-cubic: cubic-bezier(.7, 0, .2, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 820ms;

  /* Grain overlay opacity */
  --grain-opacity: .06;

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* Tweak-driven overrides */
:root[data-accent="crimson"] {
  --gold-100: #f2bcc3;
  --gold-200: #d47a84;
  --gold-300: #b4414f;
  --gold-400: #8e2a36;
  --gold-500: #5a1620;
  --sig-live: #d47a84;
}
:root[data-accent="platinum"] {
  --gold-100: #eeeeea;
  --gold-200: #c9cbc9;
  --gold-300: #a7aba7;
  --gold-400: #747872;
  --gold-500: #3f433d;
  --sig-live: #c9cbc9;
}
:root[data-bg="brown"] {
  --surface-0: #0c0805;
  --surface-1: #140d08;
  --surface-2: #1c130b;
  --surface-3: #241810;
  --surface-line: #2e2016;
}
:root[data-bg="charcoal"] {
  --surface-0: #0c0d0e;
  --surface-1: #131416;
  --surface-2: #1a1c1f;
  --surface-3: #222529;
  --surface-line: #2a2d32;
}