/* ==========================================================================
   IMPEL FASHION — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow & motion.
   Do not hardcode raw values anywhere else in the CSS — reference a token.
   Change the brand here and it propagates everywhere. See:
   /Claude_Research_and_Recommendations/02_UI_UX_Improvements.md
   ========================================================================== */

:root {

  /* ---- Color: Brand ----------------------------------------------------
     v2 palette (revised after owner review, Aug 2026): Navy stays as the
     premium base. The gold accent tested as flat/dated and is retired as
     the dominant accent — replaced by a vivid sky-blue + cyan-glow pair,
     which also ties directly into the animated export-route map motif.
     Gold survives only as a rare, tiny "est. 2005" heritage touch.
     Rule unchanged: accent colors are for CTAs/icons/glows only — body
     text is always navy/charcoal on light, white/off-white on dark. */
  --color-navy: #0B1C2C;         /* primary — headings, footer, strong elements */
  --color-navy-600: #142943;     /* hover/active state for navy surfaces */
  --color-navy-50: #E9ECEF;      /* faint navy tint for subtle fills */
  --color-charcoal: #1F2A33;     /* secondary — body text on light backgrounds */

  --color-accent: #2E8FE0;        /* primary accent — CTAs, links, focus, active states */
  --color-accent-600: #1D6FBD;    /* hover/active state for accent elements */
  --color-accent-100: rgba(46,143,224,0.14); /* focus ring / soft badge fill */
  --color-cyan: #2FD9C8;          /* glow accent — map routes, highlights, premium sparkle */
  --color-cyan-100: rgba(47,217,200,0.14);

  --color-gold: #C6A75E;         /* heritage accent — used sparingly (est. 2005 marks only) */
  --color-gold-600: #B3934E;
  --color-gold-100: rgba(198,167,94,0.15);
  --color-teal: #2A9D8F;         /* trust / success — certifications, positive states */
  --color-teal-100: rgba(42,157,143,0.12);

  /* ---- Color: Neutrals --------------------------------------------------- */
  --color-bg: #FFFFFF;           /* v2: pure crystal white — main page background */
  --color-surface: #FFFFFF;      /* cards, navbar, sections */
  --color-border: #EDEFF2;       /* v2: lighter cool gray — crisper against pure white */
  --color-white: #FFFFFF;

  /* ---- Color: Text --------------------------------------------------- */
  --color-text: var(--color-charcoal);
  --color-text-muted: #5B6770;
  --color-text-on-dark: #F4F3F0;
  --color-text-on-dark-muted: #9AA6AF;
  --color-heading: var(--color-navy);

  /* ---- Typography ---------------------------------------------------- */
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — clamps between the mobile and desktop values named
     in 07_UI_UX.md §5, so no separate mobile override is needed for size. */
  --fs-hero:      clamp(2.125rem, 1.55rem + 2.9vw, 4rem);      /* 34px -> 64px */
  --fs-h1:        clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --fs-h2:        clamp(1.625rem, 1.35rem + 1.4vw, 2.625rem);  /* 26px -> 42px */
  --fs-h3:        clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);   /* 22px -> 26px */
  --fs-lead:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17px -> 19px */
  --fs-body:      1.0625rem;                                    /* 17px */
  --fs-small:     0.9375rem;                                    /* 15px */
  --fs-micro:     0.8125rem;                                    /* 13px */
  --fs-eyebrow:   0.8125rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --ls-eyebrow: 0.14em;
  --ls-heading: -0.01em;

  /* ---- Spacing (8pt grid, per 07_UI_UX.md §6) -------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-13: 104px;
  --space-16: 128px;

  --section-padding-y: clamp(64px, 6vw + 24px, 140px); /* 64px mobile -> 140px desktop */
  --container-max: 1280px;
  --container-padding-x: clamp(20px, 5vw, 64px);

  /* ---- Radius ---------------------------------------------------------- */
  --radius-sm: 8px;    /* buttons, inputs */
  --radius-md: 14px;   /* cards */
  --radius-lg: 24px;   /* large media panels */
  --radius-pill: 999px;

  /* ---- Shadow ------------------------------------------------------------ */
  --shadow-card: 0 2px 8px rgba(11, 28, 44, 0.06);
  --shadow-card-hover: 0 16px 32px rgba(11, 28, 44, 0.12);
  --shadow-nav: 0 1px 0 rgba(11, 28, 44, 0.06), 0 8px 24px rgba(11, 28, 44, 0.04);
  --shadow-button: 0 1px 2px rgba(11, 28, 44, 0.08);

  /* ---- Motion (mirrors GSAP easing so CSS-only fallbacks feel the same) - */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* ~ Expo.out */
  --ease-out-soft: cubic-bezier(0.25, 1, 0.5, 1); /* ~ Power2.out */
  --dur-fast: 0.3s;
  --dur-base: 0.6s;
  --dur-slow: 0.9s;

  /* ---- Layered z-index scale (documented so future devs don't guess) --- */
  --z-nav: 100;
  --z-loader: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Component: Navbar ------------------------------------------------ */
  --nav-height: 86px;
  --nav-height-scrolled: 68px;
  --nav-blur: 16px;
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* ---- Component: Buttons ----------------------------------------------- */
  --btn-height: 52px;
  --btn-height-mobile: 48px;
}