/* ==========================================================================
   Wrights Cleaning Design System — tokens.css  v1.0  (13 Sep 2026)
   The single source of truth for colour, type, space, shape, depth, motion.
   Components use the ROLE tokens (--wc-bg, --wc-text …), never raw palette.
   Light theme by default; dark theme follows the device, or [data-theme].
   ========================================================================== */

:root{
  /* ---------- Brand palette (raw values) ---------- */
  --wc-navy-950:#040C15;
  --wc-navy-900:#061A2E;
  --wc-navy-800:#082F57;   /* primary brand ground */
  --wc-navy-700:#0B3B6C;
  --wc-blue-600:#0C5CA3;   /* logo blue */
  --wc-blue-400:#3E8FDA;
  --wc-blue-300:#78B6EE;
  --wc-green-800:#3E6E00;
  --wc-green-700:#4E7A00;  /* green text on light grounds (5.1:1) */
  --wc-green-600:#4A8200;  /* action green: white labels pass AA (4.7:1) */
  --wc-green-500:#72A502;  /* logo green: icons, rules, accents only */
  --wc-green-300:#A6D93C;  /* green on navy (8.1:1) */
  --wc-grey-0:#FFFFFF;
  --wc-grey-50:#F4F7FA;
  --wc-grey-100:#E4EEF7;   /* "glass" tint */
  --wc-grey-200:#D6E1EB;
  --wc-grey-500:#4B5C6D;
  --wc-grey-900:#0E1B29;
  --wc-red-600:#B42318;
  --wc-amber-700:#9A4A00;

  /* ---------- Roles: light theme ---------- */
  --wc-bg:var(--wc-grey-50);
  --wc-surface:var(--wc-grey-0);
  --wc-surface-tint:var(--wc-grey-100);
  --wc-text:var(--wc-grey-900);
  --wc-text-muted:var(--wc-grey-500);
  --wc-border:var(--wc-grey-200);
  --wc-strong:var(--wc-navy-800);        /* nav links, outline buttons, strong UI ink */
  --wc-link:var(--wc-blue-600);
  --wc-accent:var(--wc-green-500);
  --wc-accent-text:var(--wc-green-700);
  --wc-action:var(--wc-green-600);
  --wc-action-hover:var(--wc-green-800);
  --wc-on-action:#FFFFFF;
  --wc-band:var(--wc-navy-800);
  --wc-band-raised:var(--wc-navy-700);
  --wc-on-band:#FFFFFF;
  --wc-on-band-muted:#B7CBE0;
  --wc-on-band-accent:var(--wc-green-300);
  --wc-band-line:rgba(255,255,255,.14);
  --wc-footer:var(--wc-navy-900);
  --wc-focus:var(--wc-green-500);
  --wc-error:var(--wc-red-600);
  --wc-error-bg:#FEF3F2;
  --wc-warning:var(--wc-amber-700);
  --wc-warning-bg:#FFF6E5;
  --wc-success:var(--wc-green-700);
  --wc-success-bg:#F1F8E6;
  --wc-shadow-1:0 1px 2px rgba(8,47,87,.06),0 8px 20px -10px rgba(8,47,87,.18);
  --wc-shadow-2:0 1px 2px rgba(8,47,87,.06),0 16px 36px -14px rgba(8,47,87,.26);
  --wc-shadow-3:0 2px 4px rgba(4,20,40,.08),0 30px 60px -18px rgba(4,20,40,.45);
  --wc-logo-on-light:block;              /* which logo file shows */
  --wc-logo-on-dark:none;

  /* ---------- Type ---------- */
  --wc-font-display:"Anybody","Arial Black","Helvetica Neue",Arial,sans-serif;
  --wc-font-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --wc-display-width:122%;               /* wide, like the WRIGHTS wordmark; 100% on phones */
  --wc-text-xs:.75rem;                   /* 12px  labels, meta */
  --wc-text-sm:.875rem;                  /* 14px  small print, nav */
  --wc-text-base:1.0625rem;              /* 17px  body */
  --wc-text-md:1.25rem;                  /* 20px  lede, item titles */
  --wc-text-lg:1.625rem;                 /* 26px  card titles */
  --wc-text-xl:clamp(1.6rem,1.1rem + 1.6vw,2.125rem);   /* 26–34px */
  --wc-text-2xl:clamp(1.85rem,1.15rem + 3vw,3rem);      /* 30–48px section titles */
  --wc-text-3xl:clamp(2.15rem,1.2rem + 4.4vw,4.25rem);  /* 34–68px page titles */
  --wc-leading-tight:1;
  --wc-leading-snug:1.3;
  --wc-leading-body:1.6;
  --wc-track-caps:.06em;
  --wc-track-label:.16em;

  /* ---------- Space (4px base) ---------- */
  --wc-space-1:.25rem;   /* 4  */
  --wc-space-2:.5rem;    /* 8  */
  --wc-space-3:.75rem;   /* 12 */
  --wc-space-4:1rem;     /* 16 */
  --wc-space-5:1.5rem;   /* 24 */
  --wc-space-6:2rem;     /* 32 */
  --wc-space-7:3rem;     /* 48 */
  --wc-space-8:4rem;     /* 64 */
  --wc-space-9:6rem;     /* 96 */
  --wc-section-y:clamp(4rem,2.8rem + 4vw,6rem);  /* vertical rhythm between sections */

  /* ---------- Layout ---------- */
  --wc-container:1200px;
  --wc-gutter:1.25rem;
  --wc-measure:68ch;                     /* comfortable reading width */
  --wc-overhang:3.75rem;                 /* contact bar drop below the hero */
  /* Breakpoints (media queries can't read variables — use these numbers):
     sm 640px phones · md 960px tablets · nav 1080px hamburger · lg 1200px container */

  /* ---------- Shape & motion ---------- */
  --wc-radius-sm:4px;
  --wc-radius:6px;
  --wc-radius-lg:12px;
  --wc-radius-pill:999px;
  --wc-ease:cubic-bezier(.2,.7,.2,1);
  --wc-dur-fast:150ms;
  --wc-dur:250ms;
  --wc-dur-slow:500ms;

  /* ---------- Layers ---------- */
  --wc-z-sticky:40;
  --wc-z-menu:49;
  --wc-z-header:50;
  --wc-z-dialog:80;
  --wc-z-toast:100;
}

@media (max-width:960px){ :root{ --wc-overhang:3rem; } }
@media (max-width:640px){ :root{ --wc-display-width:100%; --wc-overhang:2.5rem; } }

/* ---------- Roles: dark theme ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wc-bg:#07111C; --wc-surface:#0C1A28; --wc-surface-tint:#10263B;
    --wc-text:#E6EEF5; --wc-text-muted:#9CB0C3; --wc-border:#1E3347;
    --wc-strong:#E6EEF5; --wc-link:var(--wc-blue-300);
    --wc-accent:#7FB512; --wc-accent-text:#9DD13B;
    --wc-band:#0A2139; --wc-band-raised:#0E2C4B; --wc-footer:var(--wc-navy-950);
    --wc-error:#F97066; --wc-error-bg:#2A1215; --wc-warning:#FDB022; --wc-warning-bg:#2A1F0A;
    --wc-success:#9DD13B; --wc-success-bg:#132410;
    --wc-shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.6);
    --wc-shadow-2:0 1px 2px rgba(0,0,0,.3),0 16px 36px -14px rgba(0,0,0,.7);
    --wc-shadow-3:0 2px 4px rgba(0,0,0,.3),0 30px 60px -18px rgba(0,0,0,.8);
    --wc-logo-on-light:none; --wc-logo-on-dark:block;
  }
}
:root[data-theme="dark"]{
  --wc-bg:#07111C; --wc-surface:#0C1A28; --wc-surface-tint:#10263B;
  --wc-text:#E6EEF5; --wc-text-muted:#9CB0C3; --wc-border:#1E3347;
  --wc-strong:#E6EEF5; --wc-link:var(--wc-blue-300);
  --wc-accent:#7FB512; --wc-accent-text:#9DD13B;
  --wc-band:#0A2139; --wc-band-raised:#0E2C4B; --wc-footer:var(--wc-navy-950);
  --wc-error:#F97066; --wc-error-bg:#2A1215; --wc-warning:#FDB022; --wc-warning-bg:#2A1F0A;
  --wc-success:#9DD13B; --wc-success-bg:#132410;
  --wc-shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.6);
  --wc-shadow-2:0 1px 2px rgba(0,0,0,.3),0 16px 36px -14px rgba(0,0,0,.7);
  --wc-shadow-3:0 2px 4px rgba(0,0,0,.3),0 30px 60px -18px rgba(0,0,0,.8);
  --wc-logo-on-light:none; --wc-logo-on-dark:block;
}