/* Design tokens - colours, type, spacing. Edit brand values here. */
/* =========================================
   Tokens (brand v2 - coral hero, teal wordmark/pyramid, cream base)
   ========================================= */
:root {
  /* Teal system (wordmark, pyramid body, quiet secondary furniture) */
  --brand-teal:        #1F4E4A;   /* Limitless Teal - wordmark + pyramid body */
  --brand-teal-deep:   #0E2B2A;   /* Deep Teal - dark sections, footer */
  --sage:              #A8B5A0;   /* logo on dark backgrounds only, decorative */
  --sage-soft:         #D6DED0;   /* light wash, valid-state */

  /* Coral (the hero: CTAs, links, hover accents, progress, icons, apex) */
  --coral:             #D97757;
  --coral-deep:        #BF5A38;   /* button hover/pressed, small coral text needing contrast */
  --coral-soft:        #E8A98E;   /* soft coral for small caps labels on dark */
  --coral-lightest:    #FAF0EA;

  /* Surfaces (cream canvas, not pure white) */
  --canvas:            #F0EEE6;   /* primary page canvas (Cream) */
  --canvas-soft:       #F0EEE6;   /* card / hero surface (Cream) */
  --canvas-raised:     #FFFDF7;
  --ceramic:           #EDEBE9;

  /* Ink ladder */
  --ink:               #1F1E1D;   /* headlines / primary text */
  --body:              #3A3835;   /* body text on cream */
  --muted:             #7A8583;
  --label:             #2B4644;
  --text-on-dark:      rgba(255,255,255,1);
  --text-on-dark-soft: rgba(255,255,255,0.70);

  /* Borders + dividers */
  --border:            #E3DFD3;
  --border-mid:        #C9C3B1;

  /* Spacing (rem-based, anchored 1rem = 10px via 62.5%) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.6rem;
  --space-4: 2.4rem;
  --space-5: 3.2rem;
  --space-6: 4.0rem;
  --space-7: 4.8rem;
  --space-8: 5.6rem;
  --space-9: 6.4rem;

  --gutter:    1.6rem;
  --gutter-md: 2.4rem;
  --gutter-lg: 4.0rem;

  /* Type tokens */
  --font-sans:    'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --tracking:     -0.01em;
  --tracking-dis: -0.016em;

  /* Radii */
  --r-card:   12px;
  --r-pill:   50px;
  --r-input:  4px;

  /* Shadow stacks (whisper-soft, layered) */
  --shadow-card: 0 0 0.5px rgba(14,43,42,0.14), 0 1px 1px rgba(14,43,42,0.24);
  --shadow-nav:  0 1px 3px rgba(14,43,42,0.10), 0 2px 2px rgba(14,43,42,0.06), 0 0 2px rgba(14,43,42,0.07);
  --shadow-frap: 0 0 6px rgba(14,43,42,0.24), 0 8px 12px rgba(14,43,42,0.14);
  --shadow-frap-active: 0 0 6px rgba(14,43,42,0.24), 0 8px 12px rgba(0,0,0,0);

  /* Motion */
  --t-fast: 0.2s ease;
  --t-med:  0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --press:  0.95;
}