@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =============================================================
   TOKENS — source of truth for every surface.
   ============================================================= */
:root {
  /* Color · primitive */
  --cream:        #FAF6F1;
  --paper:        #FFFFFF;
  --border:       #E8DFD0;
  --border-strong:#D4C7A8;
  --text:         #2D3142;
  --text-2:       #5A5A5A;
  --text-3:       #8C8E97;
  --coral:        #E07A5F;
  --coral-tint:   #F2A98F;
  --coral-soft:   rgba(224,122,95,0.10);
  --coral-mid:    rgba(224,122,95,0.20);
  --coral-strong: rgba(224,122,95,0.32);
  --teal:         #3D5A80;
  --teal-soft:    rgba(61,90,128,0.08);
  --bg-deep:      #1E2334;
  --green:        #27AE60;
  --green-soft:   rgba(39,174,96,0.10);
  --red:          #E74C3C;
  --red-soft:     rgba(231,76,60,0.08);
  --amber:        #D4A24E;

  /* Semantic */
  --bg:           var(--cream);
  --surface:      var(--paper);
  --primary:      var(--coral);
  --action:       var(--text);
  --action-hover: var(--bg-deep);

  /* Type · families */
  --font-ui:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Type · scale */
  --t-display:  56px;
  --t-h1:       36px;
  --t-h2:       26px;
  --t-h3:       20px;
  --t-body:     16px;
  --t-small:    14px;
  --t-caption:  12px;
  --t-mono:     11px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px;  --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 3px rgba(45,49,66,0.06);
  --shadow-2: 0 4px 14px rgba(45,49,66,0.08);
  --shadow-3: 0 12px 32px rgba(45,49,66,0.10);
  --shadow-glow-coral: 0 0 0 3px rgba(224,122,95,0.18);

  /* Chart palette (logo color order) */
  --chart-1: var(--coral);      /* drop */
  --chart-2: var(--text);       /* in */
  --chart-3: var(--text-3);     /* finops */
  --chart-4: var(--teal);       /* extension */
  --chart-5: var(--coral-tint); /* extension */
}

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid rgba(224,122,95,0.30);
  transition: border-color 0.15s;
}
a:hover { border-bottom-color: var(--coral); }

/* =============================================================
   CONSERVATIVE DIRECTION — token overrides only
   ============================================================= */
body.conservative {
  --t-display: 44px;
  --t-h1: 30px;
  --t-h2: 22px;
}