/* Workforce NI design tokens — shared by the list (style.css) and the seeker pages
   (/me/). Change colours here, never in a page. The .g-outline class is the
   house gradient border: masked, 2px, uses --c for its colour. */
:root {
  --bg: #F6F8FB; --paper: #FFFFFF; --paper-warm: #FFF9EA;
  --ink: #14202B; --ink-mute: #5B6B7A; --border: #E1E6EF; --border-strong: #B5C0CE;
  --sky: #5FB1DD; --sky-deep: #2F7FB6; --deep: #1F5E8A; --sun: #FFCE3D; --sun-edge: #F0A815; --pink: #E0457B;
  --g-sky: linear-gradient(135deg, #5FB1DD 0%, #2F7FB6 100%);
  --g-sun: linear-gradient(135deg, #FFE57A 0%, #F0A815 100%);
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(31, 94, 138, .08); --shadow-md: 0 10px 30px rgba(31, 94, 138, .16);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Poppins, Inter, Roboto, Helvetica, Arial, sans-serif;
  /* one colour per category — the keys match CATEGORIES in scrape/lib/normalise.mjs */
  --cat-health: #E0457B;        /* Health & care */
  --cat-teaching: #F28C28;      /* Teaching & childcare */
  --cat-trades: #C97A0E;        /* Trades & construction */
  --cat-engineering: #6D4FC2;   /* Engineering & manufacturing */
  --cat-it: #2F7FB6;            /* IT & digital */
  --cat-office: #3F62B8;        /* Office & admin */
  --cat-finance: #1E9E7A;       /* Finance & legal */
  --cat-sales: #E3562E;         /* Sales & marketing */
  --cat-retail: #D9389B;        /* Shops & retail */
  --cat-hotels: #C24524;        /* Hotels, food & catering */
  --cat-driving: #5E7F3A;       /* Driving & warehouse */
  --cat-cleaning: #4A90A4;      /* Cleaning & security */
  --cat-public: #7A5C3A;        /* Public sector & charity */
  --cat-apprentice: #F0A815;    /* Apprenticeships & graduate */
  --cat-other: #7D8A99;         /* Other */
}
.g-outline { position: relative; }
.g-outline::before {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit;
  background: linear-gradient(135deg, var(--c, var(--sky)) 0%, color-mix(in srgb, var(--c, var(--sky)) 40%, #fff) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---------- dark mode: Days Out's "midnight sky" navy (soft, never true black) ----------
   Set before paint by the <head> script (localStorage wfni.theme, else the phone's setting).
   Surfaces use var(--paper); keep color:#fff only for text on an accent. The map basemap stays light. */
:root { --band-top: #5AB2E6; --band-bot: #2A74AE; --pay-bg: linear-gradient(135deg, #FFF6D6 0%, #FFE9A8 100%); --pay-ink: #9A6A00; --soon-bg: #FFF1DC; --soon-ink: #B36A00; --tint: #fff; }
[data-theme="dark"] {
  --bg: #0F1E2A; --paper: #182C3B; --paper-warm: #22301F;
  --ink: #E6EDF3; --ink-mute: #AEBECE; --border: #294256; --border-strong: #3B5A73;
  --deep: #3F8FC7; --sky-deep: #3F8FC7;
  --shadow: 0 2px 10px rgba(0, 0, 0, .28); --shadow-md: 0 10px 30px rgba(0, 0, 0, .4);
  --band-top: #14283A; --band-bot: #0F1E2A;
  --pay-bg: linear-gradient(135deg, #3A2F14 0%, #4A3A12 100%); --pay-ink: #F0C978; --soon-bg: #3A2A14; --soon-ink: #F0B060; --tint: #182C3B;
  color-scheme: dark;
}