/* Copyright (c) 2026 Erewhon Labs LLC. All Rights Reserved. */
/* ============================================================
   Erewhon Labs — Design Tokens (Sodium Lamp + Satoshi)
   The locked, final system. Import in every Erewhon surface.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;600;700&display=swap');

:root {
  /* ── Color: base ──────────────────────────────────────── */
  --paper:      #FFFFFF;
  --off-white:  #FAFAFA;
  --warm-50:    #F5F2ED;   /* warm cream, sunken surfaces */
  --warm-100:   #ECE7DD;   /* warm hairline tint */
  --warm-200:   #D9D2C5;
  --warm-300:   #B8B0A2;
  --warm-500:   #6B655B;
  --warm-700:   #3A352E;
  --ink:        #1B1714;   /* warm near-black, not pure */
  --ink-deep:   #0F0C0A;

  /* ── Color: brand (Sodium Lamp) ───────────────────────── */
  --sodium:        #FF7A2E;
  --sodium-hover:  #E8651A;
  --sodium-soft:   rgba(255, 122, 46, 0.10);
  --sodium-tint:   #FFE9D9;

  /* ── Color: semantic ──────────────────────────────────── */
  --success:    #2F8A5A;
  --success-bg: #DEF0E5;
  --warning:    #B8821C;
  --warning-bg: #F7EBC9;
  --error:      #C8412F;
  --error-bg:   #F4DDD7;
  --info:       #2A6FB5;
  --info-bg:    #DCEBF7;

  /* ── Surface roles (light) ─────────────────────────────── */
  --bg:            var(--off-white);
  --bg-raised:     var(--paper);
  --bg-sunken:     var(--warm-50);
  --surface:       var(--paper);
  --surface-hover: var(--warm-50);

  --fg:            var(--ink);
  --fg-muted:      var(--warm-500);
  --fg-subtle:     var(--warm-300);
  --fg-on-accent:  var(--paper);

  --border:         rgba(27, 23, 20, 0.08);
  --border-strong:  rgba(27, 23, 20, 0.16);
  --border-hover:   rgba(27, 23, 20, 0.24);

  --accent:        var(--sodium);
  --accent-hover:  var(--sodium-hover);
  --accent-fg:     var(--paper);
  --accent-soft:   var(--sodium-soft);

  /* ── Type: families ────────────────────────────────────── */
  --font-display:     'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:        'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-handwritten: 'Caveat', 'Bradley Hand', cursive;   /* marginalia layer only */

  /* ── Type: scale (1.25 minor third) ───────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  /* ── Type: weights ─────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* ── Type: line heights ────────────────────────────────── */
  --leading-tight:   1.0;
  --leading-snug:    1.15;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* ── Type: tracking ────────────────────────────────────── */
  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-mono:    0.02em;

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

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ── Shadows / elevation (very soft, warm) ─────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27, 23, 20, 0.05);
  --shadow-2: 0 1px 2px rgba(27, 23, 20, 0.04), 0 8px 24px rgba(27, 23, 20, 0.06);
  --shadow-3: 0 2px 4px rgba(27, 23, 20, 0.05), 0 16px 48px rgba(27, 23, 20, 0.10);
  --shadow-focus: 0 0 0 3px rgba(255, 122, 46, 0.30);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;

  /* ── Layout ────────────────────────────────────────────── */
  --container-prose:   1120px;
  --container-product: 1280px;
  --container-wide:    1440px;
  --measure-prose:     64ch;
  --grid-gutter:       24px;
}

/* ── Dark mode ───────────────────────────────────────────── */
:root[data-theme="dark"],
.theme-dark {
  --bg:            #14110F;
  --bg-raised:     #1E1A17;
  --bg-sunken:     #0C0A09;
  --surface:       #1E1A17;
  --surface-hover: #28231F;

  --fg:            #F2EEE8;
  --fg-muted:      #B5AEA3;
  --fg-subtle:     #6E665B;
  --fg-on-accent:  var(--ink-deep);

  --border:        rgba(242, 238, 232, 0.10);
  --border-strong: rgba(242, 238, 232, 0.18);
  --border-hover:  rgba(242, 238, 232, 0.28);

  --accent:        #FF8A48;
  --accent-hover:  #FFA572;
  --accent-fg:     var(--ink-deep);
  --accent-soft:   rgba(255, 138, 72, 0.16);
}

/* ============================================================
   Semantic styles — apply via class
   ============================================================ */

.h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.display {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
}
.h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: var(--weight-light); }
.h2 { font-size: var(--text-2xl); line-height: var(--leading-snug);  font-weight: var(--weight-light); }
.h3 { font-size: var(--text-xl);  line-height: var(--leading-snug);  font-weight: var(--weight-medium); }
.h4 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
}
.body, p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  font-weight: var(--weight-regular);
}
.body-lg { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg);        font-weight: var(--weight-regular); }
.body-sm { font-size: var(--text-sm); line-height: var(--leading-normal);  color: var(--fg-muted);  font-weight: var(--weight-regular); }
.caption { font-size: var(--text-xs); line-height: var(--leading-normal);  color: var(--fg-subtle); }
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  letter-spacing: var(--tracking-mono);
}

/* Marginalia / handwritten layer — ship sparingly */
.handwritten {
  font-family: var(--font-handwritten);
  font-weight: 600;
  font-size: 1.35em;
  color: var(--fg-muted);
  letter-spacing: 0.005em;
}

/* Signature accent treatment: thin display + sodium <em> in regular weight */
.display em, .h1 em {
  font-style: normal;
  font-weight: var(--weight-regular);
  color: var(--accent);
}