/* ==========================================================================
   KPRS FOODS — DESIGN TOKENS
   Colors recalibrated in Module 05 against the actual supplied logo
   (see comments on navy-900/navy-700/cyan-600/cyan-bright below).
   ========================================================================== */

:root {
  /* ---- Color: core palette (6 named values) ----
     navy-900 / navy-700 recalibrated in Module 05 to match the actual
     supplied logo (sampled: ~#13294E). cyan-600 recalibrated in Module 05:
     the original #0E96A0 only had a 3.57:1 contrast ratio against white,
     failing WCAG AA (4.5:1) for the button hover state's white text —
     #0B7B84 fixes this (5.02:1) while staying in the same color family. */
  --navy-900: #13294E;   /* primary deep navy — header, footer, dark sections */
  --navy-700: #1E3F73;   /* secondary navy — gradients, hover surfaces */
  --cyan-500: #14B8C4;   /* brand accent — CTAs, links, active/focus */
  --cyan-600: #0B7B84;   /* accent pressed/hover state (WCAG AA fixed) */
  --neutral-50: #F5F8F9; /* elegant off-white section background */
  --neutral-200: #E1E8EC;/* borders, dividers, card outlines on light bg */

  /* Logo's actual brand mark color, sampled at ~#69FAFD. Too light for
     WCAG-compliant text/button use on white (1.26:1 contrast — fails),
     so it is NOT used for functional UI text/buttons. It IS accessible
     against the navy backgrounds (11.47:1), so it's available as a purely
     decorative accent on dark sections only (e.g. icon glyphs on navy). */
  --cyan-bright: #69FAFD;

  /* ---- Color: derived/utility ---- */
  --white: #FFFFFF;
  --ink: #10202F;              /* body text on light backgrounds */
  --ink-muted: #4A5C68;        /* secondary text on light backgrounds */
  --on-navy: #F2F6F7;          /* body text on navy backgrounds */
  --on-navy-muted: #A9BAC4;    /* secondary text on navy backgrounds */
  --success: #1F9D63;          /* form success state */
  --danger: #C8503A;           /* form error state */
  --focus-ring: #14B8C4;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --tracking-tight: -0.01em;

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

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(10, 31, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 31, 51, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 31, 51, 0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-floating: 110;
  --z-popup-overlay: 200;
  --z-popup: 210;
}

/* Breakpoints (documented for reference; used via min-width media queries)
   --bp-sm:  480px   phones (large)
   --bp-md:  768px   tablets
   --bp-lg:  1024px  laptops
   --bp-xl:  1280px  desktops
   --bp-2xl: 1536px  large desktops
*/