/* Unosparq design tokens. Every color, size, and curve on the site is defined
   here and only here. Component CSS references tokens, never raw values. */

:root {
  /* Brand primitives */
  --deep-forest: #0B1D0F;
  --green-shadow: #162118;
  --pistachio: #96C96A;
  --warm-cream: #F7F6F3;
  --warm-charcoal: #2C2A26;
  --error: #B03030;

  /* Alpha ramps */
  --cream-72: rgba(247, 246, 243, 0.72);
  --cream-55: rgba(247, 246, 243, 0.55);
  --cream-42: rgba(247, 246, 243, 0.42);
  --cream-12: rgba(247, 246, 243, 0.12);
  --charcoal-80: rgba(44, 42, 38, 0.80);
  --charcoal-58: rgba(44, 42, 38, 0.58);
  --charcoal-25: rgba(44, 42, 38, 0.25);
  --charcoal-12: rgba(44, 42, 38, 0.12);
  --pistachio-30: rgba(150, 201, 106, 0.30);
  --pistachio-12: rgba(150, 201, 106, 0.12);

  /* Gradients */
  --grad-glow: radial-gradient(ellipse at 50% 150%, rgba(150, 201, 106, 0.42) 0%, transparent 52%);
  --grad-card: linear-gradient(135deg, rgba(150, 201, 106, 0.28) 0%, var(--pistachio-12) 100%);
  --grad-stage: linear-gradient(135deg, #EAF3DF 0%, #E3EED6 55%, #DCEACF 100%);

  /* Deep green for links and highlights on light surfaces */
  --green-deep: #3E6B23;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Glacial Indifference', 'Helvetica Neue', Arial, sans-serif;
  --display-xl: clamp(48px, 5.5vw, 80px);
  --display-lg: clamp(40px, 4vw, 60px);
  --display-md: clamp(34px, 3.5vw, 52px);
  --text-lg: 17px;
  --text-md: 16px;
  --text-base: 14px;
  --text-sm: 12px;
  --text-xs: 11px;
  --text-eyebrow: 10px;
  --track-eyebrow: 0.22em;
  --track-label: 0.12em;
  --track-btn: 0.08em;

  /* Shape, depth, motion */
  --radius-card: 12px;
  --radius-frame: 16px;
  --radius-pill: 100px;
  --shadow-card: 0 8px 32px rgba(11, 29, 15, 0.10);
  --shadow-frame: 0 24px 64px rgba(4, 20, 8, 0.30);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Layout */
  --pad-x: clamp(24px, 6vw, 80px);
  --nav-h: 88px;
}

/* Section theming. Mark any section dark or light and every component
   inside resolves its own colors. */
[data-theme="dark"] {
  --surface: var(--deep-forest);
  --surface-alt: var(--green-shadow);
  --text: var(--warm-cream);
  --text-soft: var(--cream-72);
  --text-muted: var(--cream-55);
  --text-faint: var(--cream-42);
  --hairline: var(--cream-12);
}

[data-theme="light"] {
  --surface: var(--warm-cream);
  --surface-alt: #FFFFFF;
  --text: var(--warm-charcoal);
  --text-soft: var(--charcoal-80);
  --text-muted: var(--charcoal-58);
  --text-faint: var(--charcoal-25);
  --hairline: var(--charcoal-12);
}