/* ==========================================================================
   DESIGN TOKENS — Happy Hive Design System
   Source of truth: DESIGN.md  "The Energetic Atelier"
   ========================================================================== */

:root {
  /* ── Primary (Warm Peach) ───────────────────────────────────────────── */
  --primary:              #FFBE86;
  --primary-container:    #FFD9B3;
  --primary-fixed:        #ffe8d0;
  --primary-fixed-dim:    #FFBE86;
  --on-primary:           #5a2800;
  --on-primary-container: #3a1500;

  /* ── Tertiary / Sapphire Blue (CTAs & highlights only) ──────────────── */
  --tertiary:              #055a99;
  --tertiary-container:    #067bc2;
  --on-tertiary:           #ffffff;
  --on-tertiary-container: #ffffff;

  /* ── Secondary (Sunshine Yellow) ────────────────────────────────────── */
  --secondary:              #8a7200;
  --secondary-container:    #fef3bf;
  --on-secondary:           #ffffff;
  --on-secondary-container: #3d3000;

  /* ── Surface Hierarchy (tonal layering, no borders) ──────────────────── */
  --background:                  #f8fafc;
  --surface:                     #ffffff;
  --surface-bright:              #f5f8fb;
  --surface-container-lowest:    #f0f4f8;
  --surface-container-low:       #e8eef4;
  --surface-container:           #dde5ed;
  --surface-container-high:      #d2dce6;
  --surface-container-highest:   #c7d3df;

  /* ── On-Surface ───────────────────────────────────────────────────────── */
  --on-surface:         #0d1b22;
  --on-surface-variant: #3a5060;
  --outline-variant:    rgba(196, 120, 48, 0.15);

  /* ── Error ────────────────────────────────────────────────────────────── */
  --error:    #ba1a1a;
  --on-error: #ffffff;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  --text-display-lg: clamp(2.5rem,  5vw, 3.75rem);
  --text-display-md: clamp(2rem,    4vw, 3rem);
  --text-display-sm: clamp(1.625rem,3vw, 2.25rem);
  --text-headline-lg:clamp(1.375rem,2.5vw,1.875rem);
  --text-headline-md:clamp(1.25rem, 2vw, 1.5rem);
  --text-headline-sm:1.125rem;
  --text-title-lg:   1.0625rem;
  --text-title-md:   1rem;
  --text-body-lg:    1rem;
  --text-body-md:    0.9375rem;
  --text-body-sm:    0.875rem;
  --text-label-lg:   0.875rem;
  --text-label-md:   0.75rem;
  --text-label-sm:   0.6875rem;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ── Elevation / Shadows (ambient, never heavy) ───────────────────────── */
  --shadow-ambient: 0 20px 40px rgba(196, 120, 48, 0.06);
  --shadow-float:   0 8px 24px rgba(196, 120, 48, 0.08);
  --shadow-cta:     0 4px 20px rgba(6, 123, 194, 0.30);
  --shadow-chat:    0 24px 56px rgba(196, 120, 48, 0.14);

  /* ── Glassmorphism (nav & modals) ─────────────────────────────────────── */
  --glass-bg:   rgba(255, 255, 255, 0.82);
  --glass-blur: blur(20px);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-fast:   150ms cubic-bezier(0.2, 0, 0, 1);
  --ease-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --ease-slow:   400ms cubic-bezier(0.2, 0, 0, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --max-width:  1200px;
  --nav-height: 72px;
}