/* =========================================================================
   Tome Health — Editorial Archive
   Foundational color + typography tokens
   ========================================================================= */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ================ RAW PALETTE ================ */
  --cream:       #FDF9EE;
  --parchment:   #F5F2ED;
  --stone:       #E5E0D8;
  --plum:        #3E2F40;
  --plum-deep:   #2A1F2C;
  --plum-soft:   #574359;
  --terracotta:  #B67B5E;
  --terracotta-soft: #D9B29C;
  --sage:        #5B7B7A;
  --sage-soft:   #8FA8A7;
  --charcoal:    #1F2A33;
  --charcoal-70: rgba(31, 42, 51, 0.7);
  --charcoal-50: rgba(31, 42, 51, 0.5);
  --charcoal-30: rgba(31, 42, 51, 0.3);

  --error:       #BA1A1A;
  --success:     #4F6B4A;
  --warning:     #B8863B;
  --info:        #5B7B7A;

  /* ================ SEMANTIC ================ */
  --background:          var(--cream);
  --surface:             var(--cream);
  --surface-muted:       var(--parchment);
  --surface-elevated:    #FFFDF7;
  --surface-inverse:     var(--plum);

  --foreground:          var(--charcoal);
  --foreground-muted:    var(--charcoal-70);
  --foreground-subtle:   var(--charcoal-50);
  --foreground-inverse:  var(--cream);

  --primary:             var(--plum);
  --primary-foreground:  var(--cream);
  --secondary:           var(--terracotta);
  --secondary-foreground:#FFFFFF;
  --accent:              var(--sage);
  --accent-foreground:   var(--cream);

  --border:              rgba(229, 224, 216, 0.6);
  --border-ghost:        rgba(229, 224, 216, 0.2);
  --ring:                rgba(62, 47, 64, 0.35);

  /* ================ TYPE ================ */
  --font-display:  'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-xs:         12px;

  --lh-tight:      1.2;
  --lh-snug:       1.3;
  --lh-normal:     1.5;
  --lh-relaxed:    1.6;

  --tracking-h1:   -0.02em;
  --tracking-h2:   -0.01em;
  --tracking-caps: 0.05em;

  /* ================ RADII ================ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-pill: 999px;

  /* ================ SPACING ================ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.4rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;

  /* ================ SHADOWS ================ */
  --shadow-xs: 0 1px 2px  rgba(62, 47, 64, 0.04);
  --shadow-sm: 0 4px 12px rgba(62, 47, 64, 0.05);
  --shadow-md: 0 8px 24px rgba(62, 47, 64, 0.06);
  --shadow-lg: 0 16px 40px rgba(62, 47, 64, 0.06);
  --shadow-xl: 0 24px 60px rgba(62, 47, 64, 0.08);

  --glass-blur: 12px;
  --glass-bg:   rgba(253, 249, 238, 0.72);
  --glass-bg-dark: rgba(62, 47, 64, 0.65);

  --grad-primary: linear-gradient(180deg, #4A3A4C 0%, #3E2F40 60%, #372A39 100%);
  --grad-secondary: linear-gradient(180deg, #C08A6E 0%, #B67B5E 60%, #A86E52 100%);
}

[data-theme="dark"] {
  --background: #1A1318;
  --surface: #231A24;
  --surface-muted: #1F1720;
  --surface-elevated: #2A2130;
  --foreground: var(--cream);
  --foreground-muted: rgba(253, 249, 238, 0.72);
  --foreground-subtle: rgba(253, 249, 238, 0.5);
  --primary: #E8D9C8;
  --primary-foreground: var(--plum-deep);
  --border: rgba(229, 224, 216, 0.1);
  --border-ghost: rgba(229, 224, 216, 0.06);
  --glass-bg: rgba(42, 33, 48, 0.7);
}

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
  color: var(--foreground);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  color: var(--foreground);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--foreground);
  text-wrap: pretty;
}

.small, small, table, td {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--foreground-muted);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}