/* ============================================================
   tokens.css
   Design tokens: the single source of truth for the visual
   system. Nothing here paints anything on its own; every other
   stylesheet reads from these custom properties.

   Palette is drawn from the Ridgeback logo mark itself: a deep navy
   dog-head-in-gear emblem with an amber "WORKWEAR" accent, on a clean
   cool-grey page.
   ============================================================ */

:root {
  /* --- Brand palette -------------------------------------- */
  --navy:      #192E47; /* the logo's own navy: dark surfaces, headings, primary text */
  --navy-800:  #16273D; /* between navy and navy-900: gradient stops              */
  --navy-900:  #122032; /* deepest navy: footer, hero base                        */
  --steel:     #5B6675; /* mid blue-grey: quiet accents, icons                    */
  --amber:     #F59E1B; /* the "WORKWEAR" accent: primary action colour           */
  --amber-600: #D9850C; /* amber, pressed/hover                                    */
  --amber-soft: rgba(245, 158, 27, 0.14); /* tint for badges, icon plates          */
  --amber-glow: rgba(245, 158, 27, 0.35); /* tinted shadow for primary CTAs        */
  --slate:     #45566B; /* steel-blue: secondary accent, Corporate division       */
  --teal:      #2C6E68; /* deep service teal: Hospitality division                */
  --teal-600:  #235852; /* teal, pressed/hover                                     */

  /* --- Neutrals ------------------------------------------- */
  --bg:          #EDEFF3; /* page background: cool light grey                     */
  --surface:     #F6F8FA; /* raised card / panel surface                          */
  --paper:       #FFFFFF; /* lightest: inputs, elevated cards                     */
  --ink:         #1C2530; /* body text                                            */
  --ink-soft:    #5A6675; /* muted text, captions                                 */
  --line:        rgba(28, 37, 48, 0.12); /* hairline borders                      */
  --line-strong: rgba(28, 37, 48, 0.24);

  /* --- On-dark neutrals (text/lines over navy) ------------ */
  --on-navy:      #EEF1F5;
  --on-navy-soft: rgba(238, 241, 245, 0.70);
  --on-navy-line: rgba(238, 241, 245, 0.16);

  /* --- Feedback ------------------------------------------- */
  --ok:    #2E7D57;
  --warn:  #C77A1A;
  --error: #C4432E;

  /* --- Typography ----------------------------------------- */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1:  clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.42rem, 1.32rem + 0.5vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
  --step-4:  clamp(2.3rem, 1.9rem + 2vw, 3.6rem);
  --step-5:  clamp(2.9rem, 2.15rem + 3.9vw, 5.4rem);

  /* --- Spacing scale (4pt 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 --------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(20, 27, 36, 0.06);
  --shadow:    0 6px 22px -12px rgba(20, 27, 36, 0.30);
  --shadow-lg: 0 24px 60px -28px rgba(20, 27, 36, 0.45);
  --shadow-amber: 0 10px 28px -12px var(--amber-glow);

  /* --- Layout --------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 72px;

  /* --- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  240ms;
  --dur-slow: 480ms;
}