/*
  Design tokens for the Rest Sleep Economic Calculator public site.

  Two surfaces with intentionally distinct visual languages:
  - .surface-microsite: elegant editorial data-viz aesthetic (FT / Pudding / OWiD)
  - .surface-calculator: overt Rest brand (continuous with the app and B2B tool)

  Colors, typography, and spacing are separated so we can extend without surprise.
*/

:root {
  /* ---- Typography ---- */
  --font-display: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-numeric: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

  --fs-display-xl: clamp(3rem, 7vw, 5.5rem);
  --fs-display-lg: clamp(2.25rem, 5vw, 3.75rem);
  --fs-display-md: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-display-sm: clamp(1.375rem, 2.5vw, 1.75rem);
  --fs-body-lg: 1.25rem;
  --fs-body: 1.125rem;
  --fs-body-sm: 1rem;
  --fs-caption: 0.875rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --letter-tight: -0.02em;
  --letter-snug: -0.01em;
  --letter-normal: 0;
  --letter-wide: 0.04em;
  --letter-caps: 0.08em;

  /* ---- Spacing scale (perfect fourth) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
}

/* ============================================================
   Surface: Microsite — Rest brand (light base)
   ============================================================ */
.surface-microsite {
  /* Backgrounds */
  --bg:          #F8F9FA;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #EEEEF4;

  /* Text */
  --text:        #0D0F1A;
  --text-muted:  rgba(13, 15, 26, 0.55);
  --text-subtle: rgba(13, 15, 26, 0.38);
  --text-inverse: #F8F9FA;

  /* Structure */
  --rule:        rgba(13, 15, 26, 0.08);
  --rule-strong: rgba(13, 15, 26, 0.14);

  /* Accents */
  --accent:       #8B6CFF;
  --accent-hover: #BB7AFF;
  --accent-muted: rgba(139, 108, 255, 0.10);

  /* Chart palette — keep editorial colors for visualizations */
  --c-1: #4C2FB9;
  --c-2: #B0583C;
  --c-3: #4A7C59;
  --c-4: #C8963A;
  --c-5: #8B6CFF;
  --c-6: #2B6B7A;
  --c-7: #BB7AFF;
  --c-8: #3A4A5B;

  --c-conservative: #8B6CFF;
  --c-higher:       #FF7E4A;
  --c-midpoint:     #4C2FB9;
  --c-grid:         rgba(13, 15, 26, 0.08);

  --c-loss:      #B0583C;
  --c-potential: #4A7C59;

  /* Typography — DM Sans only */
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-numeric: "DM Sans", system-ui, sans-serif;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* ============================================================
   Dark section overrides — scoped to .section--dark elements
   ============================================================ */
.section--dark {
  background: #191924;
  color: #F8F9FA;

  --bg:          #191924;
  --bg-elevated: #2A2C49;
  --bg-sunken:   #2A2C49;

  --text:        #F8F9FA;
  --text-muted:  #A6AEBA;
  --text-subtle: #727379;
  --text-inverse: #0D0F1A;

  --rule:        rgba(255, 255, 255, 0.06);
  --rule-strong: rgba(255, 255, 255, 0.12);

  --accent:       #8B6CFF;
  --accent-hover: #BB7AFF;
  --accent-muted: rgba(139, 108, 255, 0.15);
}

/* ============================================================
   Surface: Calculator (Rest-branded, conversion)
   Continuous with the Rest app and internal B2B tool.
   ============================================================ */
.surface-calculator {
  /* Backgrounds */
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F8F9FA;

  /* Text */
  --text: #111827;
  --text-muted: #4B5563;
  --text-subtle: #6B7280;
  --text-inverse: #FFFFFF;

  /* Structure */
  --rule: #E5E7EB;
  --rule-strong: #D1D5DB;

  /* Rest brand accents (from internal tool) */
  --accent: #6B73FF;         /* Rest signature violet-blue */
  --accent-hover: #5B63EE;
  --accent-muted: #EEF0FF;
  --accent-deep: #2C3E50;    /* dark slate supporting */
  --accent-warm: #8B5CF6;    /* warm violet */
  --accent-teal: #17A2B8;    /* sleep-teal */

  /* Chart palette (Rest-tuned) */
  --c-1: #6B73FF;
  --c-2: #8B5CF6;
  --c-3: #17A2B8;
  --c-4: #2C3E50;
  --c-5: #F59E0B;
  --c-6: #10B981;

  --c-conservative: #17A2B8;
  --c-higher: #8B5CF6;
  --c-midpoint: #6B73FF;
  --c-grid: #E5E7EB;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}