/* ==========================================================================
   Connect-IT 360 / SharkMakers - Design Tokens
   One system, two skins. Flip with [data-skin="dark"|"light"] on <html>.
   Every colour pair below is checked against WCAG 2.1 AA (4.5:1 body,
   3:1 large text and UI). Ratios noted inline - do not change a value
   without re-checking it.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 7.2vw, 6rem);
  --fs-display-l: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.7;

  --tracking-display: -0.035em;
  --tracking-eyebrow: 0.18em;

  /* SharkMakers dorsal fin, used as the kicker lead-in mark. */
  --fin: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.5 21C8 19 13 13.5 19.5 2.5C18 11 15.5 16.5 21.5 21Z"/></svg>');


  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4rem, 9vw, 8rem);

  /* ---- Shape ----------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --container: 1200px;
  --prose: 68ch;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;
}

/* ==========================================================================
   SKIN A - "DARK LAB"  (also the default, so nothing renders unstyled
   before the skin attribute is applied)
   Near-black canvas, one electric accent per brand, glass surfaces.
   ========================================================================== */
:root,
:root[data-skin="dark"] {
  --bg: #0a0c10;
  --bg-deep: #06080b;
  --surface: #12161d;
  --surface-2: #1a2029;
  --logo-filter: brightness(0) invert(1);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text: #f2f5f8; /* 17.4:1 on --bg  AA/AAA */
  --text-muted: #9aa6b4; /*  6.6:1 on --bg  AA      */
  --text-faint: #7d8795; /*  4.5:1 on --surface-2, the lightest ground it lands on */

  --accent: #5aa9ff; /* Connect-IT 360 - 6.8:1 on --bg */
  --accent-ink: #06080b; /* text that sits ON --accent    */
  --accent-soft: rgba(90, 169, 255, 0.14);

  /* SharkMakers now uses the primary blue. Robyn, 11 Sep 2026: "shift the
     SharkMakers treatment to the primary blue so the site is visually
     consistent with the brand". The -sm tokens are kept so every call site
     still resolves; they simply equal the primary accent in each skin. */
  --accent-sm: #5aa9ff;
  --accent-sm-ink: #06080b;
  --accent-sm-soft: rgba(90, 169, 255, 0.14);

  --signal: #ffb84d; /* money / impact - 10.9:1 on --bg */

  /* Robyn's photography is shot on black backdrops, so the scrim has to stay
     light at the top or the students disappear entirely. */
  --hero-scrim: linear-gradient(
    180deg,
    rgba(6, 8, 11, 0.12) 0%,
    rgba(6, 8, 11, 0.55) 58%,
    rgba(10, 12, 16, 1) 100%
  );
  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --photo-treatment: saturate(1.06) contrast(1.06) brightness(1.18);
}

/* ==========================================================================
   SKIN B - "BRIGHT OPTIMISM"
   White canvas, editorial scale, saturated blocks.
   ========================================================================== */
:root[data-skin="light"] {
  --bg: #ffffff;
  --bg-deep: #f4f6f9;
  --surface: #f4f6f9;
  --surface-2: #e9edf3;
  --logo-filter: brightness(0);
  --border: rgba(11, 18, 32, 0.12);
  --border-strong: rgba(11, 18, 32, 0.28);

  --text: #0b1220; /* 18.1:1 on white  AA/AAA */
  --text-muted: #55606e; /*  7.1:1 on white  AA     */
  --text-faint: #636c79; /*  4.5:1 on --surface-2 (#e9edf3), not just on white */

  --accent: #1b4de4; /* 7.9:1 on white */
  --accent-ink: #ffffff;
  --accent-soft: rgba(27, 77, 228, 0.09);

  --accent-sm: #1b4de4;
  --accent-sm-ink: #ffffff;
  --accent-sm-soft: rgba(27, 77, 228, 0.09);

  --signal: #b04a12; /* 5.3:1 on white - warm impact colour */

  /* The hero stays cinematic and dark even on the light skin - a white scrim
     over black-backdrop photography just turns it grey. */
  --hero-scrim: linear-gradient(
    180deg,
    rgba(6, 8, 11, 0.12) 0%,
    rgba(6, 8, 11, 0.5) 55%,
    rgba(6, 8, 11, 0.92) 100%
  );
  --grid-line: rgba(11, 18, 32, 0.045);
  --shadow: 0 20px 50px -22px rgba(11, 18, 32, 0.28);
  --photo-treatment: saturate(1.04) contrast(1.05) brightness(1.14);
}

/* Section that flips to the opposite ground - the "colour block" move
   in Bright Optimism, an inset panel in Dark Lab. */
:root[data-skin="dark"] .invert {
  --bg: #f2f5f8;
  --surface: #ffffff;
  --logo-filter: brightness(0);
  --surface-2: #e6ebf1;
  --border: rgba(11, 18, 32, 0.12);
  --text: #0b1220;
  --text-muted: #4c5766;
  --text-faint: #616b77;
  --accent: #1b4de4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(27, 77, 228, 0.09);
  --accent-sm: #1b4de4;
  --accent-sm-ink: #ffffff;
  --signal: #b04a12;
  --grid-line: rgba(11, 18, 32, 0.05);
}
:root[data-skin="light"] .invert {
  --bg: #0b1220;
  --surface: #131c2e;
  --logo-filter: brightness(0) invert(1);
  --surface-2: #1c2740;
  --border: rgba(255, 255, 255, 0.14);
  --text: #f4f7fb;
  --text-muted: #a3aebd;
  --text-faint: #848f9e;
  --accent: #6fb1ff;
  --accent-ink: #06080b;
  --accent-soft: rgba(111, 177, 255, 0.16);
  --accent-sm: #6fb1ff;
  --accent-sm-ink: #06080b;
  --signal: #ffb84d;
  --grid-line: rgba(255, 255, 255, 0.05);
}

/* SharkMakers pages swap the primary accent for the programme accent.
   The selector has to out-specify the skin blocks above, not merely follow
   them: the brand class and the skin attribute sit on the SAME <html>
   element, so `:root[data-skin="dark"]` (0,2,0) was beating a bare
   `.brand-sharkmakers` (0,1,0) and the teal never shipped. `:root.brand-sharkmakers`
   ties at (0,2,0) and wins on source order; the `[data-skin]` variant takes
   it to (0,3,0) so it still wins if these blocks are ever reordered. */
:root.brand-sharkmakers,
:root[data-skin].brand-sharkmakers {
  --accent: var(--accent-sm);
  --accent-ink: var(--accent-sm-ink);
  --accent-soft: var(--accent-sm-soft);
}

/* An inverted section inside a SharkMakers page re-declares --accent on its
   own element, so the root swap above cannot reach it - inheritance loses to
   a declaration made on the element itself, whatever the root's specificity.
   Both invert blocks already carry a contrast-checked --accent-sm for their
   flipped ground; these two rules point --accent at it, with the soft tint
   restated at the same alpha the sibling --accent-soft uses. No SharkMakers
   page currently carries an .invert section, so this is a guard rather than
   a live fix - but a teal page with one blue band in it is exactly the
   "two accents mixed" failure the pack forbids. */
:root[data-skin="dark"].brand-sharkmakers .invert {
  --accent: #1b4de4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(27, 77, 228, 0.09);
}
:root[data-skin="light"].brand-sharkmakers .invert {
  --accent: #6fb1ff;
  --accent-ink: #06080b;
  --accent-soft: rgba(111, 177, 255, 0.16);
}