/* ==========================================================================
   Design tokens — The Clean Spot 2026
   Single source of truth for colour, type, spacing and radii.
   Navy and Wave are sampled directly from the 2026 logo artwork.
   ========================================================================== */

:root {
  /* --- brand: navy scale, generated from #182F58 (H218 S57%) --- */
  --tc-navy-50:  #EFF3FB;
  --tc-navy-100: #D7E1F4;
  --tc-navy-200: #AFC4E9;
  --tc-navy-300: #779ADA;
  --tc-navy-400: #376BC8;
  --tc-navy-500: #274D90;
  --tc-navy-600: #1F3C70;
  --tc-navy-700: #182F58; /* brand primary — 13.24:1 on white (AAA) */
  --tc-navy-800: #112240;
  --tc-navy-900: #0B1528;

  /* --- brand: wave blue from the logo --- */
  --tc-wave:     #CBDBE8;
  --tc-wave-soft:#E4EDF4;

  /* --- accents. Navy cannot carry a CTA on its own, so: --- */
  --tc-teal:      #0FB5A5; /* actions. 7.35:1 with #111 on top */
  --tc-teal-dark: #0E9384;
  --tc-teal-tint: #F0FBFA;
  /* Button-grade teal. The brand teal above is 2.57:1 with white — nowhere
     near AA — so buttons use a darker step that reads as the same colour but
     clears 5.08:1. Keep --tc-teal for icons and accents on light grounds. */
  --tc-teal-btn:  #0B7C70;
  --tc-teal-btn-h:#096A5E;
  --tc-amber:      #E8A317; /* loyalty / points only — never a generic CTA */
  --tc-amber-dark: #6B5410;
  --tc-amber-tint: #FFF8E7;

  /* --- semantic --- */
  --tc-ink:     #0B1528;
  --tc-muted:   #5A6B87;
  --tc-line:    #E3E9F3;
  --tc-bg:      #F7F9FC;
  --tc-white:   #FFFFFF;
  --tc-success: #0E9384;
  --tc-error:   #C4342B;
  /* Soft borders and tints for status boxes. Boxes are marked by a full
     tinted fill and a hairline in the same hue, never a coloured strip down
     one side. */
  --tc-error-tint: #FDF1F0;
  --tc-error-line: rgba(196, 52, 43, .28);
  --tc-teal-line:  rgba(15, 181, 165, .38);
  --tc-amber-line: rgba(232, 163, 23, .45);
  --tc-navy-line:  rgba(55, 107, 200, .22);
  --tc-warn:    #E8A317;

  /* --- type --- */
  --tc-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tc-fs-xs:   0.75rem;   /* 12px */
  --tc-fs-sm:   0.8438rem; /* 13.5px */
  --tc-fs-base: 1rem;      /* 16px */
  --tc-fs-md:   1.0625rem;
  --tc-fs-lg:   1.3125rem;
  --tc-fs-xl:   1.6875rem;
  --tc-fs-2xl:  2.0625rem;
  --tc-fs-3xl:  2.9375rem;
  --tc-lh-tight: 1.15;
  --tc-lh-body:  1.55;
  --tc-tracking-tight: -0.02em;
  --tc-tracking-display: -0.035em;

  /* --- space (4px base) --- */
  --tc-1: 0.25rem; --tc-2: 0.5rem;  --tc-3: 0.75rem; --tc-4: 1rem;
  --tc-5: 1.25rem; --tc-6: 1.5rem;  --tc-8: 2rem;    --tc-10: 2.5rem;
  --tc-12: 3rem;   --tc-16: 4rem;   --tc-20: 5rem;

  /* --- radii. One scale. The old site had four button radii. --- */
  --tc-r-sm: 8px;
  --tc-r:    11px;
  --tc-r-lg: 14px;
  --tc-r-xl: 18px;
  --tc-r-pill: 999px;

  /* --- elevation --- */
  --tc-shadow:    0 1px 2px rgba(11,21,40,.04), 0 8px 24px rgba(11,21,40,.06);
  --tc-shadow-lg: 0 2px 4px rgba(11,21,40,.04), 0 18px 48px rgba(11,21,40,.10);

  /* --- layout --- */
  --tc-container: 1180px;
  --tc-gutter: 1.5rem;
  --tc-header-h: 74px;
}

@media (max-width: 782px) {
  :root {
    --tc-fs-3xl: 2.125rem;
    --tc-fs-2xl: 1.625rem;
    --tc-fs-xl:  1.375rem;
    --tc-gutter: 1.25rem;
  }
}