/* Quinine Cybersecurity: site-wide design tokens. Load this first, before any other stylesheet.
   Brand palette: the official Quinine colours from logo.svg and quininecybersecurity.co.uk:
   navy #0A2463, electric #2E6FF2, deep navy #061439, glow #4A8BFF, off-white #F7F8FA and slate
   #202834, with derived ramps (method and evidence: docs/quinine-brand-colour-audit.md).
   Light is the default whatever the OS prefers; dark applies only on :root[data-theme="dark"]
   (set by site-theme.js / home.js from the visitor's stored choice). Every text/background
   pairing is WCAG AA in both themes (tables in docs/quinine-brand-colour-audit.md section 5).
   Section 3 keeps every token name the existing site CSS uses, as aliases of the semantic tokens. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* 1. Palette primitives (theme independent) ------------------------------------------------ */
:root {
  /* Official (logo.svg + quininecybersecurity.co.uk) */
  --brand-electric: #2E6FF2;      /* logo gradient start: fills, strokes, focus, large text only */
  --brand-navy: #0A2463;          /* logo gradient end: ink, CTA */
  --brand-deepnavy: #061439;      /* dark bands */
  --brand-glow: #4A8BFF;          /* highlights, dark-theme signal */
  --brand-offwhite: #F7F8FA;
  --brand-cream: #FAFBFE;
  --brand-slate: #202834;         /* body text */
  /* Derived ramps (electric tints/shades, navy-tinted neutrals, deep-navy night surfaces) */
  --electric-50: #EEF3FE;
  --electric-100: #E0E9FD;
  --electric-200: #CBDBFC;
  --electric-300: #8CB0F8;
  --electric-600: #2861D6;        /* electric as text/button on light (5.57:1 on white) */
  --electric-700: #2254BA;
  --glow-200: #80AEFF;            /* signal on dark */
  --deepnavy-950: #040E28;
  --deepnavy-975: #030A1C;
  --navy-100: #EEF0F4;
  --navy-200: #E6E9EF;
  --navy-300: #DDE0E9;
  --navy-500: #6C7CA1;
  --navy-600: #546692;
  --navy-electric: #0F2F78;       /* navy + 15% electric */
  --night-surface: #122043;
  --night-surface-2: #1C294B;
  --night-line: #2E3A59;
  --night-line-strong: #798094;
  --night-muted: #AAAFBC;
  --night-text: #D7D9DF;
  --red: #DC2626;                 /* error (from the .co.uk contact form) */
  --red-ink: #B41F1F;
  --red-ink-light: #EE9292;

  /* Legacy primitive names, repointed to the brand palette (home.css, hero.css, cyber-bg.css
     and ask-ai.css still read --citron, --obsidian and --porcelain directly). */
  --obsidian-950: var(--deepnavy-950);
  --obsidian-900: var(--deepnavy-950);
  --obsidian: var(--brand-deepnavy);
  --obsidian-800: var(--night-surface);
  --obsidian-700: var(--night-surface-2);
  --obsidian-600: var(--night-line);
  --obsidian-500: var(--night-line-strong);
  --verdigris-900: var(--brand-navy);
  --verdigris: var(--electric-600);
  --verdigris-700: var(--electric-700);
  --verdigris-forest: var(--brand-navy);
  --verdigris-forest-2: var(--navy-electric);
  --verdigris-300: var(--electric-300);
  --verdigris-200: var(--electric-200);
  --verdigris-100: var(--electric-50);
  --porcelain-50: #FFFFFF;
  --porcelain-100: var(--brand-offwhite);
  --porcelain: var(--brand-offwhite);
  --porcelain-300: var(--navy-200);
  --porcelain-400: var(--navy-300);
  --ivory: var(--brand-offwhite);
  --brass: var(--brand-glow);
  --brass-300: var(--electric-300);
  --brass-ink: var(--electric-700);
  --brass-ink-light: var(--glow-200);
  --citron: var(--glow-200);      /* .btn-signal fill (deep-navy text 8.07:1), dark packets/pulses */
  --citron-ink: var(--electric-600);
  --coral: var(--red);
  --coral-ink: var(--red-ink);
  --coral-ink-light: var(--red-ink-light);

  /* Typography: self-hosted only (hosted/public/fonts). */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono-stack: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* Editorial type scale (fluid display/h1/h2, fixed below). Pair each size with its leading. */
  --text-display: clamp(2.75rem, 1.55rem + 4.4vw, 5.25rem);
  --leading-display: 1.02;
  --tracking-display: -0.035em;
  --text-h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
  --leading-h1: 1.06;
  --tracking-h1: -0.03em;
  --text-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
  --leading-h2: 1.12;
  --tracking-h2: -0.022em;
  --text-h3: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  --leading-h3: 1.25;
  --tracking-h3: -0.012em;
  --text-h4: 1.125rem;
  --leading-h4: 1.35;
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --leading-lead: 1.6;
  --text-body: 1rem;
  --leading-body: 1.65;
  --text-small: 0.875rem;
  --leading-small: 1.55;
  --text-label: 0.75rem;          /* mono labels / eyebrows: uppercase, tracked */
  --tracking-label: 0.14em;
  --weight-display: 720;
  --weight-heading: 680;
  --weight-body: 420;
  --weight-strong: 640;
  --weight-label: 560;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Radii: restrained, machined rather than pill-soft */
  --radius-xs: 3px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;

  /* Motion */
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-q-intro: 1600ms;
  --dur-q-loop: 2400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-trace: cubic-bezier(0.45, 0.05, 0.25, 1);

  /* Layout */
  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --max-text: 68ch;
}

/* 2. Semantic tokens: light (default) ------------------------------------------------------ */
:root {
  color-scheme: light;
  --color-bg: var(--brand-offwhite);
  --color-bg-alt: var(--navy-100);
  --color-surface: #FFFFFF;
  --color-surface-2: var(--navy-200);
  --color-ink: var(--brand-navy);            /* headings, the Q mark */
  --color-text: var(--brand-slate);          /* body */
  --color-text-muted: #565C66;
  --color-line: var(--navy-300);             /* decorative dividers */
  --color-line-strong: var(--navy-500);      /* UI boundaries (inputs, controls): >= 3:1 */
  --color-line-fine: var(--electric-200);    /* fine hairlines, decorative only */
  --color-accent: var(--electric-600);       /* structure: links, primary buttons, rules */
  --color-accent-2: var(--electric-700);
  --color-accent-hover: var(--brand-navy);
  --color-accent-soft: var(--electric-50);
  --color-on-accent: #FFFFFF;
  --color-link: var(--electric-600);
  --color-link-hover: var(--brand-navy);
  --color-detail: var(--brand-glow);
  --color-detail-ink: var(--electric-700);
  --color-signal: var(--brand-electric);     /* fill/stroke only on light */
  --color-signal-ink: var(--electric-600);
  --color-alert: var(--red);
  --color-alert-ink: var(--red-ink);
  --color-alert-soft: #FCE9E9;
  --color-success: #0F7234;
  --color-success-soft: #E3F4E9;
  --color-warn: #874A04;
  --color-warn-soft: #FAECDC;
  --color-neutral: var(--navy-600);
  --color-neutral-soft: var(--navy-200);
  --color-focus: var(--brand-electric);
  --color-focus-halo: color-mix(in srgb, var(--brand-glow) 40%, transparent);
  --color-band: var(--brand-deepnavy);       /* dark bands (footer, feature panels) */
  --color-band-2: var(--brand-navy);
  --color-band-deep: var(--deepnavy-950);
  --color-on-band: #FFFFFF;
  --color-on-band-muted: #B4B8C4;
  --color-on-band-signal: var(--glow-200);
  --color-header-bg: rgba(247, 248, 250, 0.9);
  --color-selection: color-mix(in srgb, var(--brand-electric) 22%, transparent);
  --shadow-1: 0 1px 2px rgba(10, 36, 99, 0.05), 0 10px 28px -22px rgba(10, 36, 99, 0.32);
  --shadow-2: 0 2px 4px rgba(10, 36, 99, 0.06), 0 22px 40px -26px rgba(10, 36, 99, 0.38);
  --shadow-pop: 0 24px 48px -24px rgba(10, 36, 99, 0.3), 0 2px 6px rgba(10, 36, 99, 0.06);

  /* The Quinine Q (q-anim.css reads these) */
  --q-ink: var(--color-ink);
  --q-trace: var(--brand-electric);
  --q-pulse: var(--brand-glow);
  --q-ambient: var(--electric-300);
}

/* 2b. Semantic tokens: dark (only when the visitor chose it) ------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--deepnavy-950);
  --color-bg-alt: var(--brand-deepnavy);
  --color-surface: var(--night-surface);
  --color-surface-2: var(--night-surface-2);
  --color-ink: var(--brand-offwhite);
  --color-text: var(--night-text);
  --color-text-muted: var(--night-muted);
  --color-line: var(--night-line);
  --color-line-strong: var(--night-line-strong);
  --color-line-fine: #254A92;
  --color-accent: var(--electric-300);
  --color-accent-2: var(--electric-300);
  --color-accent-hover: var(--electric-200);
  --color-accent-soft: #0F2862;
  --color-on-accent: var(--brand-deepnavy);
  --color-link: var(--electric-300);
  --color-link-hover: var(--electric-200);
  --color-detail: var(--brand-glow);
  --color-detail-ink: var(--glow-200);
  --color-signal: var(--brand-glow);
  --color-signal-ink: var(--glow-200);
  --color-alert: var(--red);
  --color-alert-ink: var(--red-ink-light);
  --color-alert-soft: #271228;
  --color-success: #8AD1A4;
  --color-success-soft: #07262D;
  --color-warn: #EAB476;
  --color-warn-soft: #261F23;
  --color-neutral: var(--night-muted);
  --color-neutral-soft: var(--night-surface-2);
  --color-focus: var(--electric-300);
  --color-focus-halo: color-mix(in srgb, var(--brand-glow) 35%, transparent);
  --color-band: var(--brand-navy);
  --color-band-2: var(--navy-electric);
  --color-band-deep: var(--deepnavy-975);
  --color-on-band: var(--brand-offwhite);
  --color-on-band-muted: #B0B8CD;
  --color-on-band-signal: var(--glow-200);
  --color-header-bg: rgba(4, 14, 40, 0.88);
  --color-selection: color-mix(in srgb, var(--brand-glow) 35%, transparent);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -24px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 24px 44px -24px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 24px 48px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(74, 139, 255, 0.1);

  --q-ink: var(--color-ink);
  --q-trace: var(--brand-glow);
  --q-pulse: var(--glow-200);
  --q-ambient: var(--electric-300);
}

/* 3. Back-compat aliases: every token name the existing site CSS (site-nav.css, home.css,
      product-site.css, legal.css) reads, mapped onto the semantic tokens above. They resolve
      per theme automatically, so no page stylesheet needs colour edits. ----------------------- */
:root {
  --font: var(--font-body);
  --font-mono: var(--font-mono-stack);
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --soft: var(--color-surface-2);
  --ink: var(--color-ink);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-line);
  --line-strong: var(--color-line-strong);
  --electric: var(--color-accent-2);
  --electric-hover: var(--color-accent-hover);
  --electric-soft: var(--color-accent-soft);
  --electric-ink: var(--color-link);
  --blue: var(--color-link);
  --blue-hover: var(--color-link-hover);
  --cyan: var(--color-detail);
  --cyan-ink: var(--color-detail-ink);
  --accent: var(--color-on-band-signal);
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-ink: var(--color-on-accent);
  --button-bg: var(--btn-bg);
  --button-hover: var(--btn-bg-hover);
  --button-ink: var(--btn-ink);
  --button-shadow: rgba(10, 36, 99, 0.03);
  --navy: var(--color-band);
  --navy-2: var(--color-band-2);
  --navy-deep: var(--color-band-deep);
  --navy-muted: var(--color-on-band-muted);
  --on-navy: var(--color-on-band);
  --on-navy-muted: var(--color-on-band-muted);
  --on-navy-accent: var(--color-on-band-signal);
  --success: var(--color-success);
  --success-bg: var(--color-success-soft);
  --warn: var(--color-warn);
  --warn-bg: var(--color-warn-soft);
  --critical: var(--color-alert-ink);
  --critical-bg: var(--color-alert-soft);
  --neutral: var(--color-neutral);
  --neutral-bg: var(--color-neutral-soft);
  --gray-bg: var(--color-neutral-soft);
  --early: var(--color-link);
  --early-bg: var(--color-accent-soft);
  --focus: var(--color-focus);
  --header-bg: var(--color-header-bg);
  --panel-shadow: var(--shadow-pop);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);
  --shadow: var(--shadow-1);
  --radius-sm: var(--radius-s);
  --radius: var(--radius-m);
  --radius-lg: var(--radius-l);
  /* Diagram tokens (drawn on the dark band in both themes) */
  --visual-border: rgba(247, 248, 250, 0.11);
  --visual-shadow: rgba(4, 14, 40, 0.32);
  --visual-route: #20489A;
  --visual-node-border: #1A3E8A;
  --visual-due-ink: #D7D9DF;
  --visual-due-bg: #113380;
}
:root[data-theme="dark"] {
  --button-shadow: rgba(0, 0, 0, 0.2);
  --visual-shadow: rgba(0, 0, 0, 0.6);
}