/* ================================================================
   VitalityDesk Design System v2
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand — crimson stays the single accent */
  --primary:       #A32942;
  --primary-dark:  #7E1E33;
  --primary-light: #C4354F;
  --accent:        #A32942;
  --accent-glow:   rgba(163, 41, 66, 0.10);

  /* Surfaces — warm editorial paper */
  --bg:            #F4F0E8;  /* warm paper */
  --card:          #FBF8F1;  /* raised paper */
  --card-hover:    #F6F2E9;
  --elevated:      #FFFFFF;
  --stone:         #E7E1D5;  /* soft stone panel */
  --ink:           #171817;  /* near-black ink */

  /* Borders — warm hairlines */
  --border:        #DED7C8;
  --border-light:  #E7E1D4;
  --border-accent: rgba(163, 41, 66, 0.30);

  /* Secondary accent — deep operations green (booked / positive) */
  --amber:         #176B52;
  --amber-sub:     rgba(23,107,82,0.10);

  /* Text — ink on paper */
  --text:          #171817;
  --muted:         #6B665C;
  --subtle:        #97907F;

  /* Semantic */
  --success:       #176B52;
  --warning:       #B4791C;
  --error:         #C0392B;

  /* Fonts */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 16px;
  --t-lg:   18px;
  --t-xl:   20px;
  --t-2xl:  clamp(22px, 2.2vw, 28px);
  --t-3xl:  clamp(28px, 3.2vw, 40px);
  --t-4xl:  clamp(36px, 4.5vw, 56px);
  --t-5xl:  clamp(48px, 6.5vw, 80px);
  --t-6xl:  clamp(60px, 8.5vw, 112px);
  --t-hero: clamp(52px, 7vw, 96px);

  /* 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;

  /* Radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 150ms;
  --d-med:  280ms;
  --d-slow: 500ms;

  /* Section rhythm */
  --section-y: clamp(80px, 10vw, 120px);
  --section-gap: clamp(64px, 8vw, 96px);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--t-6xl); }
h2 { font-size: var(--t-5xl); }
h3 { font-size: var(--t-4xl); }
h4 { font-size: var(--t-3xl); }
h5 { font-size: var(--t-2xl); }
h6 { font-size: var(--t-xl); font-weight: 600; }

p { margin: 0; line-height: 1.65; text-wrap: pretty; }
a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease-out); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; font-variant-numeric: tabular-nums; }
::selection { background: var(--primary); color: #fff; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}