/* ================================================================
   Vitality Desk — Color & Type Foundations
   Dark charcoal page · maroon vital accent · warm muted blocks.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Dark gray scale (page + deep surfaces) ---- */
  --ink-900: #0E0E10;
  --ink-800: #16161A;
  --ink-700: #1E1E22;
  --ink-600: #2A2A2F;
  --ink-500: #3A3A40;

  /* ---- Paper — warm whites on dark ---- */
  --paper-50:  #060608;   /* page background (deepest) */
  --paper-100: #ECE8E6;   /* near-white text */
  --paper-200: #BDB6B2;   /* muted text */
  --paper-300: #75706C;   /* low-emphasis */

  /* ---- Mist (warm surface tint) ---- */
  --mist-100: #D8CFCB;
  --mist-200: #9C918C;

  /* ---- Vital — primary accent (maroon red from logo) ---- */
  --vital-500: #8B1F2B;
  --vital-600: #6E1822;
  --vital-300: #B23A48;

  /* ---- Block accents (warm muted, never bright) ---- */
  --sun-500:      #C9A14A;
  --acid-500:     #A65A3F;
  --electric-500: #5A1820;
  --plum-900:     #1A0D0F;
  --metal-400:    #7A7670;

  /* ---- Semantic shortcuts ---- */
  --bg: var(--paper-50);
  --fg-on-paper: var(--paper-100);

  /* ---- Type families ---- */
  --font-display: "Archivo Black", "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-display-heavy: "Archivo Black", "Helvetica Neue", system-ui, sans-serif;
  --font-display-cond: "Archivo", "Helvetica Neue Condensed", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale ---- */
  --t-eyebrow: 12px;
  --t-body-sm: 14px;
  --t-body: 17px;
  --t-body-lg: 19px;
  --t-h4: clamp(20px, 1.8vw, 24px);
  --t-h3: clamp(28px, 2.6vw, 40px);
  --t-h2: clamp(44px, 5vw, 80px);
  --t-h1: clamp(64px, 9vw, 144px);
  --t-display: clamp(88px, 14vw, 240px);

  /* ---- Spacing ---- */
  --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: 200px;

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-block: 36px;
  --r-block-lg: 48px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 200ms;
  --d-med:  400ms;
  --d-slow: 700ms;
}

/* ================================================================
   Base
   ================================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper-50);
  color: var(--paper-100);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,.h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: 0.92; letter-spacing: -0.025em; font-weight: 900; margin: 0; text-wrap: balance; }
h2,.h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 0.94; letter-spacing: -0.02em; font-weight: 900; margin: 0; text-wrap: balance; }
h3,.h3 { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.02; letter-spacing: -0.01em; font-weight: 800; margin: 0; }
h4,.h4 { font-family: var(--font-body);    font-size: var(--t-h4); line-height: 1.2;  letter-spacing: -0.005em; font-weight: 700; margin: 0; }
.display { font-family: var(--font-display-heavy); font-size: var(--t-display); line-height: 0.84; letter-spacing: -0.035em; font-weight: 900; }
.eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
p,.body  { font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; margin: 0; }
.body-lg { font-size: var(--t-body-lg); line-height: 1.5; }
.body-sm { font-size: var(--t-body-sm); line-height: 1.5; }
code,.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease-out-expo); }
::selection { background: var(--vital-500); color: var(--paper-100); }