/* ─────────────────────────────────────────────
   REFINERY · DESIGN TOKENS  (v3 · Warm Intelligence)
   Direction: A24 x Claude x Worldlabs
   ───────────────────────────────────────────── */

:root {
  /* canvas — Claude's warm cream, never pure white */
  --bg:           #faf9f5;
  --bg-elevated:  #f5f0e8;
  --bg-sunken:    #efe9de;

  /* dark surfaces — warm near-black, never #000 */
  --night:        #1a1814;
  --night-soft:   #252320;
  --night-edge:   #2e2b28;
  --light-on-dark:#faf9f5;
  --light-on-dark-soft: #a09d96;
  --rule-on-dark: rgba(250, 249, 245, 0.12);

  /* ink — warm darks, never pure black */
  --ink:          #141413;
  --ink-soft:     #3d3d3a;
  --ink-mute:     #6c6a64;
  --ink-faint:    #8e8b82;

  /* rules & hairlines */
  --rule:         #e6dfd8;
  --rule-strong:  #d5d0c8;

  /* accent — terracotta-orange, pushed warm from Claude's coral */
  --accent:       #c8714e;
  --accent-soft:  #d4845e;
  --accent-mute:  rgba(200, 113, 78, 0.08);
  --accent-deep:  #a9583e;

  /* compat: secondary accent merged with primary */
  --accent2:      var(--accent);
  --accent2-soft: var(--accent-soft);

  /* ── type ───────────────────────────────────── */

  /* serif display — editorial authority (EB Garamond) */
  --font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-serif);

  /* sans body/UI — clean geometric (Inter) */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* mono — metadata only (JetBrains Mono) */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* type scale */
  --t-display-xl: clamp(48px, 5.5vw, 72px);
  --t-display-lg: clamp(36px, 4vw, 56px);
  --t-display-md: clamp(28px, 3vw, 40px);
  --t-display-sm: clamp(24px, 2.2vw, 32px);
  --t-title-lg:   22px;
  --t-title-md:   18px;
  --t-title-sm:   16px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-label:      12px;
  --t-mono:       13px;
  --t-mono-sm:    11px;

  /* compat: old scale names → new values */
  --t-h1:         var(--t-display-xl);
  --t-h2:         var(--t-display-lg);
  --t-h3:         var(--t-display-md);
  --t-lead:       var(--t-title-lg);
  --t-mono-lg:    var(--t-body-sm);

  /* leading */
  --leading-display: 1.05;
  --leading-title:   1.30;
  --leading-body:    1.55;
  --leading-mono:    1.40;

  /* tracking */
  --tracking-display: -0.025em;
  --tracking-body:    -0.005em;
  --tracking-mono:     0.02em;

  /* ── space ──────────────────────────────────── */
  --s-1: 0.25rem;   /*  4px */
  --s-2: 0.5rem;    /*  8px */
  --s-3: 0.75rem;   /* 12px */
  --s-4: 1rem;      /* 16px */
  --s-5: 1.5rem;    /* 24px */
  --s-6: 2.5rem;    /* 40px */
  --s-7: 4rem;      /* 64px */
  --s-8: 6rem;      /* 96px */
  --s-9: 8rem;      /* 128px */

  /* grid */
  --grid-gutter:  clamp(16px, 2vw, 32px);
  --content-max:  1280px;
  --content-narrow: 860px;

  /* compat */
  --frame-inset:  0px;
  --frame-stroke: 1px;
  --grid-cols:    12;

  /* ── motion ─────────────────────────────────── */
  --ease:      cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-fast:  100ms;
  --dur-base:  150ms;
  --dur-slow:  300ms;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #1a1814;
    --bg-elevated:  #252320;
    --bg-sunken:    #1e1c18;
    --ink:          #faf9f5;
    --ink-soft:     #d5d0c8;
    --ink-mute:     #a09d96;
    --ink-faint:    #8e8b82;
    --rule:         rgba(250, 249, 245, 0.12);
    --rule-strong:  rgba(250, 249, 245, 0.18);
    --accent:       #d4845e;
    --accent-soft:  #c8714e;
    --accent-mute:  rgba(212, 132, 94, 0.12);
    --accent-deep:  #e09572;
  }
}