/* ==========================================================================
   HappyFeet — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Change values here; every component follows.
   ========================================================================== */

:root {
  /* ---- Brand palette (from the HappyFeet logo: deep navy + gold + azure) ---- */
  --c-navy-900: #050e1f;   /* deepest — badge core */
  --c-navy-800: #0a1a33;   /* primary dark surface (footer, sidebars, heroes) */
  --c-navy-700: #10233f;
  --c-navy-600: #17325c;

  --c-azure-700: #235a99;  /* link hover / strong */
  --c-azure-600: #2f6db5;  /* primary interactive (links, secondary buttons) */
  --c-azure-500: #357db9;  /* secondary blue */
  --c-azure-100: #dbeaf7;  /* light tint bg */
  --c-azure-50:  #eef5fc;
  --c-blue-800:  #0b325d;  /* deep mountain blue (placeholders) */

  --c-gold-600: #b8862f;   /* CTA hover */
  --c-gold-500: #d1a54e;   /* accent / CTA background */
  --c-gold-400: #e6bd63;
  --c-gold-300: #f0c866;   /* light highlight */
  --c-gold-100: #f7e9c9;   /* light tint bg */

  --c-warm-100: #faf5ea;   /* warm ivory surface (pairs with gold) */
  --c-warm-200: #f2e9d8;
  --c-warm-300: #e7d9bf;

  /* ---- Neutrals (navy-tinted) ---- */
  --c-ink-900: #0b1626;    /* headings */
  --c-ink-700: #263243;    /* body text */
  --c-ink-500: #5a6675;    /* muted text */
  --c-ink-300: #97a2b0;
  --c-line:    #e3e7ee;    /* borders */
  --c-bg:      #ffffff;
  --c-bg-soft: #f5f8fc;
  --c-white:   #ffffff;

  /* ---- Dark-surface support (absorbs former hardcoded on-dark text values) ---- */
  --c-surface-dark:  var(--c-navy-800);
  --c-on-dark:       #c8d6ea;   /* body text on navy */
  --c-on-dark-muted: #93a5bf;   /* secondary text on navy */
  --c-on-dark-dim:   #6f819c;   /* labels / dividers on navy */
  --c-overlay-dark:  5, 14, 31; /* rgb triplet for rgba(var(--c-overlay-dark), a) */

  /* ---- Semantic ---- */
  --c-primary: var(--c-azure-600);
  --c-primary-strong: var(--c-azure-700);
  --c-accent:  var(--c-gold-500);
  --c-accent-strong: var(--c-gold-600);
  --c-gold-ink: #7a5c17;   /* gold-toned text on light backgrounds (AA-safe) */
  --c-success: #2e9e6b;
  --c-warning: #c8892a;
  --c-danger:  #d1503f;
  --c-info:    #2f6db5;

  /* ---- Typography ---- */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-hero: clamp(2.25rem, 5vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radius ---- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(16, 33, 31, 0.06), 0 1px 3px rgba(16, 33, 31, 0.08);
  --sh-md: 0 6px 18px rgba(16, 33, 31, 0.10);
  --sh-lg: 0 18px 40px rgba(16, 33, 31, 0.16);
  --sh-focus: 0 0 0 3px rgba(47, 109, 181, 0.38);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* ---- Motion ---- */
  --t-fast: 120ms ease;
  --t-base: 220ms ease;
  --t-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 700;
}

/* Breakpoints (reference — used in media queries throughout):
   sm 480px · md 768px · lg 1024px · xl 1200px */