/* WorkHat Services Ltd — Design Tokens */

:root {
  /* ── Brand Colours ── */
  --white: #ffffff;
  --pale-concrete: #f3f6f7;
  --mist: #e8eef1;
  --workwear-navy: #071827;
  --deep-navy: #0b2236;
  --charcoal: #1d252b;
  --steel-blue: #5d7486;
  --steel-soft: rgba(93, 116, 134, 0.14);
  --teal: #0097b2;
  --teal-deep: #007f99;
  --teal-soft: rgba(0, 151, 178, 0.14);
  --teal-xsoft: rgba(0, 151, 178, 0.07);
  --safety-amber: #e6a928;
  --amber-soft: rgba(230, 169, 40, 0.14);
  --muted: #66737c;
  --line: rgba(7, 24, 39, 0.12);
  --line-light: rgba(255, 255, 255, 0.12);

  /* ── Typography ── */
  --font-head: 'Manrope', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;

  /* ── Type Scale ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* ── 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;
  --sp-40: 10rem;

  /* ── Layout ── */
  --max-w: 1200px;
  --max-w-prose: 72ch;
  --max-w-narrow: 56ch;

  /* ── Border Radius ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(7,24,39,0.08), 0 1px 2px rgba(7,24,39,0.04);
  --shadow-md: 0 4px 12px rgba(7,24,39,0.10), 0 2px 4px rgba(7,24,39,0.06);
  --shadow-lg: 0 12px 32px rgba(7,24,39,0.12), 0 4px 8px rgba(7,24,39,0.06);
  --shadow-xl: 0 24px 48px rgba(7,24,39,0.14), 0 8px 16px rgba(7,24,39,0.08);
  --shadow-teal: 0 8px 24px rgba(0,151,178,0.20);

  /* ── Transitions ── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* ── Z-index ── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-cookie: 400;
}