/* Eliit design tokens — kept in sync with eliit_ui.
   If you touch this file, mirror the change in the app's palette. */

:root {
  /* Surfaces (darkest → brightest) */
  --surface-lowest: #060e20;
  --surface:         #0b1326;
  --surface-low:     #131b2e;
  --surface-high:    #222a3d;
  --surface-highest: #2d3449;
  --surface-bright:  #31394d;

  /* Text */
  --on-surface:          #dae2fd;
  --on-surface-variant:  #bfc9c5;

  /* Brand */
  --primary:           #94d2c5;
  --primary-container: #64a195;
  --on-primary:        #003730;
  --tertiary:          #ffb5a2;

  /* Outline */
  --outline-variant: #3f4946;

  /* Translucent helpers */
  --glass-border:    rgba(148, 210, 197, 0.2);
  --hairline:        rgba(63, 73, 70, 0.15);
  --hairline-strong: rgba(63, 73, 70, 0.3);

  /* Typography */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Inter', ui-monospace, monospace;

  /* Type scale — editorial */
  --type-h1: clamp(80px, 10vw, 160px);
  --type-h2: clamp(48px, 6vw, 88px);
  --type-h3: 48px;
  --type-section-title: 36px;
  --type-lede: 20px;
  --type-body: 19px;
  --type-pullquote: 28px;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 900px;
  --max-width-letter: 760px;
  --section-padding-y: 180px;
  --section-padding-x: 40px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  :root {
    --section-padding-y: 100px;
    --section-padding-x: 24px;
    --type-h3: 36px;
    --type-section-title: 28px;
    --type-lede: 17px;
    --type-body: 17px;
    --type-pullquote: 22px;
  }
}