/* ============================================================
   WR360 Design Tokens — 2026 Refresh
   Edit this file to change colours, fonts, spacing site-wide.
   ============================================================ */
:root {
  /* ── Colour palette ── */
  --ink:        #0D1117;   /* near-black — primary dark bg */
  --ink-mid:    #1C2333;   /* card bg in dark sections */
  --ink-muted:  #2E3A52;   /* borders / dividers on dark */
  --teal:       #46C0BC;   /* primary accent — matched to logo */
  --teal-light: #7FD8D5;   /* tints, glows */
  --teal-dark:  #2EA09C;   /* hover states */
  --amber:      #E8872A;   /* secondary accent */
  --amber-dim:  #C06E1A;   /* amber hover */
  --fog:        #F7F8FA;   /* light page background */
  --white:      #FFFFFF;
  --text-body:  #3A4259;   /* body text on light */
  --text-muted: #6B7590;   /* captions, meta */
  --text-on-dark-strong: rgba(255, 255, 255, 1);    /* headings on dark */
  --text-on-dark-body:   rgba(255, 255, 255, 0.75); /* body paragraphs on dark */
  --text-on-dark-muted:  rgba(255, 255, 255, 0.55); /* secondary metadata on dark */
  --prose-max: 65ch;                                /* max-width for long-form prose */

  /* ── Typography ── */
  --font-display: 'Mada', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Border radius ── */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;

  /* ── Shadows ── */
  --shadow-card: 0 2px 12px rgba(13,17,23,.08), 0 1px 3px rgba(13,17,23,.06);
  --shadow-lift: 0 12px 40px rgba(13,17,23,.14), 0 2px 8px rgba(13,17,23,.08);

  /* ── Transitions ── */
  --ease: cubic-bezier(.22,.68,0,1.2);

  /* ── Layout ── */
  --nav-height: 68px;
  --page-pad:   max(48px, calc((100vw - 1200px) / 2));
  --page-pad-sm: 24px;
}