/* Design tokens — colours, type, spacing. Edit brand values here. */
/* =========================================
   Tokens (mapped from Starbucks structure to Limitless AIOS brand)
   ========================================= */
:root {
  /* Four-tier teal system */
  --brand-teal:        #1F4E4A;   /* Limitless Teal - H1, brand signal (Starbucks Green analog) */
  --brand-teal-accent: #1F4E4A;   /* Teal Accent - primary CTA fill (Green Accent analog) */
  --brand-teal-deep:   #0E2B2A;   /* Deep Teal - feature bands, footer (House Green analog) */
  --brand-teal-hover:  #163C38;
  --sage:              #A8B5A0;   /* decorative accents */
  --sage-soft:         #D6DED0;   /* light wash, valid-state */

  /* Reserved bronze (Rewards/Premium ceremony only) */
  --bronze:            #C89968;
  --bronze-soft:       #E8CFA8;
  --bronze-lightest:   #FAF6EE;

  /* Surfaces (warm-neutral canvas, not pure white) */
  --canvas:            #F2EBDC;   /* primary page canvas (Neutral Warm analog) */
  --canvas-soft:       #FAF8F3;   /* off-white card / hero surface */
  --canvas-raised:     #FFFDF7;
  --ceramic:           #EDEBE9;

  /* Ink ladder */
  --ink:               #0E2B2A;
  --body:              #4A5957;
  --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: 'Fraunces', 'Inter', Georgia, 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;
}