/* Shared Cocan theme palettes. Source of truth for every subsite. */
/* Card shape defaults for every theme (specificity of `html` is below :root and
   [data-theme], so a theme block can override any of these). */
html {
  --app-font: var(--cocan-font-body);
  --card-radius: 20px;
  --card-radius-sm: 16px;
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --card-shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --card-shadow-sm-hover: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --focus: var(--accent);
  /* chart grid and the Year Comparison line palette (the pre-2026-10-17 colours) */
  --grid: rgba(15, 23, 42, 0.05);
  --series-1: #2563eb;
  --series-2: #64748b;
  --series-3: #10b981;
  --series-4: #f59e0b;
  --series-5: #8b5cf6;
  --series-6: #ec4899;
}


/* Steel — the tuvengland.co.uk palette. Default theme since 2026-10-17.
   Square cards with a hard, offset, steel-tinted shadow (no blur), as on that
   site's .hero-art (18px there; scaled down here to card size). */
:is([data-theme="steel"], [data-cocan-theme="steel"]) {
  --cocan-on-accent: #ffffff;
  --cocan-muted: #566872;
  --ink: var(--cocan-ink);
  --paper: var(--cocan-bg);
  --panel: var(--cocan-surface);
  --line: #c6d0d4;
  --line-strong: #8da0a9;
  --accent: var(--cocan-steel);
  --accent-hover: var(--cocan-steel-hover);
  --accent-soft: #dfe8eb;
  --pos: var(--cocan-positive);
  --neg: var(--cocan-negative);
  --muted: #566872;
  --hover-bg: #eaf0f1;
  --focus: var(--cocan-focus);
  --app-font: var(--cocan-font-body);
  --card-radius: 0px;
  --card-radius-sm: 0px;
  --card-shadow: 10px 10px 0 rgba(65,97,128,.12);
  --card-shadow-hover: 14px 14px 0 rgba(65,97,128,.16);
  --card-shadow-sm: 6px 6px 0 rgba(65,97,128,.12);
  --card-shadow-sm-hover: 8px 8px 0 rgba(65,97,128,.18);
  /* steel/ink family first, then amber and the toned green/red for distinctness */
  --grid: rgba(65, 97, 128, 0.14);
  --series-1: #416180;
  --series-2: #d49b42;
  --series-3: #182a34;
  --series-4: #2f7a5c;
  --series-5: #8da0a9;
  --series-6: #b5473a;
}

/* Steel Night — dark variant derived from the same ink/steel family. */
:is([data-theme="steel-night"], [data-cocan-theme="steel-night"]) {
  color-scheme: dark;
  --cocan-on-accent: #132029;
  --cocan-ink: var(--cocan-dark-ink);
  --ink: var(--cocan-ink);
  --paper: var(--cocan-dark-bg);
  --panel: var(--cocan-dark-surface);
  --line: #2c4352;
  --line-strong: #4d6a82;
  --cocan-steel: var(--cocan-dark-steel);
  --accent: var(--cocan-steel);
  --accent-hover: #a3bfd8;
  --accent-soft: #22394a;
  --pos: #5fb894;
  --neg: #e07a68;
  --cocan-muted: #9fb2bc;
  --muted: var(--cocan-muted);
  --hover-bg: #213847;
  --focus: var(--cocan-focus);
  --app-font: var(--cocan-font-body);
  --card-radius: 0px;
  --card-radius-sm: 0px;
  --card-shadow: 10px 10px 0 rgba(65,97,128,.30);
  --card-shadow-hover: 14px 14px 0 rgba(65,97,128,.40);
  --card-shadow-sm: 6px 6px 0 rgba(65,97,128,.30);
  --card-shadow-sm-hover: 8px 8px 0 rgba(65,97,128,.40);
  --grid: rgba(127, 163, 196, 0.12);
  --series-1: #7fa3c4;
  --series-2: #d49b42;
  --series-3: #e4eaed;
  --series-4: #5fb894;
  --series-5: #6f8794;
  --series-6: #e07a68;
}

/* Smaller offset on phones, as tuvengland.co.uk does at 620px. */
@media (max-width: 640px) {
  :is([data-theme="steel"], [data-cocan-theme="steel"]), :is([data-theme="steel-night"], [data-cocan-theme="steel-night"]) {
    --card-shadow: 6px 6px 0 rgba(65,97,128,.12);
    --card-shadow-hover: 8px 8px 0 rgba(65,97,128,.16);
    --card-shadow-sm: 4px 4px 0 rgba(65,97,128,.12);
    --card-shadow-sm-hover: 5px 5px 0 rgba(65,97,128,.18);
  }
  :is([data-theme="steel-night"], [data-cocan-theme="steel-night"]) {
    --card-shadow: 6px 6px 0 rgba(65,97,128,.30);
    --card-shadow-hover: 8px 8px 0 rgba(65,97,128,.40);
    --card-shadow-sm: 4px 4px 0 rgba(65,97,128,.30);
    --card-shadow-sm-hover: 5px 5px 0 rgba(65,97,128,.40);
  }
}

:is([data-theme="ledger"], [data-cocan-theme="ledger"]) {
  --cocan-on-accent: #ffffff;
  --cocan-ink: #10231f;
  --ink: var(--cocan-ink);
  --paper: #f3efe6;
  --panel: #fbf9f3;
  --line: #d9d2c2;
  --line-strong: #bcb29c;
  --cocan-steel: #b8410f;
  --accent: var(--cocan-steel);
  --accent-soft: #e8c9b8;
  --pos: #1f6f63;
  --neg: #b8410f;
  --cocan-muted: #6f6a5d;
  --muted: var(--cocan-muted);
  --hover-bg: #fff;
}

:is([data-theme="dusk"], [data-cocan-theme="dusk"]) {
  color-scheme: dark;
  --cocan-on-accent: #161c22;
  --cocan-ink: #e2ddd4;
  --ink: var(--cocan-ink);
  --paper: #161c22;
  --panel: #1e262f;
  --line: #2a3540;
  --line-strong: #384858;
  --cocan-steel: #cf6c40;
  --accent: var(--cocan-steel);
  --accent-soft: #3a2520;
  --pos: #3a9e8c;
  --neg: #cf6c40;
  --cocan-muted: #8a9ba8;
  --muted: var(--cocan-muted);
  --hover-bg: #2a3540;
}

:is([data-theme="slate"], [data-cocan-theme="slate"]) {
  --cocan-on-accent: #ffffff;
  --cocan-ink: #1b2b3e;
  --ink: var(--cocan-ink);
  --paper: #f0f4f8;
  --panel: #f8fafc;
  --line: #d0dae6;
  --line-strong: #b0bfce;
  --cocan-steel: #2563eb;
  --accent: var(--cocan-steel);
  --accent-soft: #dbeafe;
  --pos: #059669;
  --neg: #2563eb;
  --cocan-muted: #64748b;
  --muted: var(--cocan-muted);
  --hover-bg: #e8edf4;
}

:is([data-theme="bento"], [data-cocan-theme="bento"]) {
  --cocan-on-accent: #111827;
  --cocan-ink: #111827;
  --ink: var(--cocan-ink);
  --paper: #FFF5E6;
  --panel: #FFFCF5;
  --line: #F0E5D0;
  --line-strong: #DDD0B8;
  --cocan-steel: #c07050;
  --accent: var(--cocan-steel);
  --accent-soft: #FAD4C0;
  --pos: #16A34A;
  --neg: #c07050;
  --cocan-muted: #6B7280;
  --muted: var(--cocan-muted);
  --hover-bg: #FAF0E0;
}

:is([data-theme="soft-paper"], [data-cocan-theme="soft-paper"]) {
  --cocan-on-accent: #1d1f20;
  --cocan-ink: #575279;
  --ink: var(--cocan-ink);
  --paper: #faf4ed;
  --panel: #fffaf3;
  --line: #f2e9e1;
  --line-strong: #dfdad9;
  --cocan-steel: #b4637a;
  --accent: var(--cocan-steel);
  --accent-soft: #f4e8ed;
  --pos: #286983;
  --neg: #b4637a;
  --cocan-muted: #9893a5;
  --muted: var(--cocan-muted);
  --hover-bg: #f2e9e1;
}

/* Liquid Glass - frosted panels over a dark navy ground with royal blue
   and cyan light (blue #416eff and cyan #0bcffa since 2026-10-23, replacing magenta and violet), thin bright rims, rounded corners and neon edge glow. Drawn
   from the reference images in TUVEngland.co.uk/themes/. Added 2026-10-23. */
:is([data-theme="liquid-glass"], [data-cocan-theme="liquid-glass"]) {
  color-scheme: dark;
  --cocan-on-accent: #ffffff;
  --cocan-ink: #eef4ff;
  --ink: var(--cocan-ink);
  --paper: #060d22;
  --panel: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.34);
  --cocan-steel: #4d86ff;
  --accent: var(--cocan-steel);
  --accent-hover: #7aa6ff;
  --accent-soft: rgba(65, 110, 255, 0.18);
  --accent-cyan: #0bcffa;
  --accent-orange: #ff8a3d;
  --accent-blue: #416eff;
  --pos: #3fe6b5;
  --neg: #ff5d52;
  --cocan-muted: #b8c6e0;
  --muted: var(--cocan-muted);
  --hover-bg: rgba(255, 255, 255, 0.12);
  --focus: #0bcffa;
  --cocan-focus: #0bcffa;
  --card-radius: 22px;
  --card-radius-sm: 14px;
  --card-shadow: 0 24px 60px rgba(8, 0, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --card-shadow-hover: 0 30px 70px rgba(8, 0, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --card-shadow-sm: 0 12px 30px rgba(8, 0, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --card-shadow-sm-hover: 0 16px 36px rgba(8, 0, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --grid: rgba(255, 255, 255, 0.1);
  --series-1: #0bcffa;
  --series-2: #416eff;
  --series-3: #ff8a3d;
  --series-4: #8fa8c8;
  --series-5: #3fe6b5;
  --series-6: #ff5d52;
  /* Glass material, for pages that style their own panels with it */
  --glass-fill: linear-gradient(140deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%);
  --glass-fill-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.1) 100%);
  --glass-rim: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(22px) saturate(160%);
  --glass-pill-radius: 999px;
  --glow-neon: 0 0 0 1px rgba(11, 207, 250, 0.55), 0 0 18px rgba(11, 207, 250, 0.45), 0 0 34px rgba(65, 110, 255, 0.45);
  --glow-text: 0 0 18px rgba(65, 110, 255, 0.6);
  --page-bg:
    radial-gradient(38% 30% at 82% 12%, rgba(65, 110, 255, 0.6), transparent 70%),
    radial-gradient(34% 28% at 10% 40%, rgba(11, 207, 250, 0.4), transparent 70%),
    radial-gradient(40% 32% at 88% 62%, rgba(28, 70, 210, 0.6), transparent 70%),
    radial-gradient(30% 24% at 30% 88%, rgba(255, 138, 61, 0.35), transparent 70%),
    linear-gradient(180deg, #0a1a40 0%, #060d22 55%, #0a1738 100%);
}

/* Bluey — warm Queenslander cream ground (#fffdf5), Heeler sky-blue borders and
   accents (#87ceeb / #0284c7), Bingo terracotta (#e2793b), backyard grass
   (#10b981), Queensland sun (#f59e0b), rounded 24px cards and hard tactile
   toy-button shadows. Taken from Decision Adventure Studio (matrix.cocan.co.uk
   & Apps/Decision Matrix (gemini)/Claude.md.md). Added 2026-10-24. */
:is([data-theme="bluey"], [data-cocan-theme="bluey"]) {
  --cocan-on-accent: #ffffff;
  --cocan-ink: #2c3e50;
  --ink: var(--cocan-ink);
  --paper: #fffdf5;
  --panel: #ffffff;
  --line: #87ceeb;
  --line-strong: #0284c7;
  --cocan-steel: #0284c7;
  --accent: var(--cocan-steel);
  --accent-hover: #0369a1;
  --accent-soft: #e0f2fe;
  --pos: #10b981;
  --neg: #e2793b;
  --cocan-muted: #4a6075;
  --muted: var(--cocan-muted);
  --hover-bg: #f0f9ff;
  --focus: #f59e0b;
  --cocan-focus: #f59e0b;
  --card-radius: 24px;
  --card-radius-sm: 16px;
  --card-shadow: 0 5px 0 rgba(2, 132, 199, 0.22);
  --card-shadow-hover: 0 7px 0 rgba(2, 132, 199, 0.30);
  --card-shadow-sm: 0 3px 0 rgba(2, 132, 199, 0.20);
  --card-shadow-sm-hover: 0 5px 0 rgba(2, 132, 199, 0.28);
  --grid: rgba(2, 132, 199, 0.14);
  --series-1: #0284c7;
  --series-2: #e2793b;
  --series-3: #20b2aa;
  --series-4: #f59e0b;
  --series-5: #10b981;
  --series-6: #a6845e;
  --bluey-timber: #d2b48c;
  --bluey-dark-timber: #a6845e;
  --bluey-sky: #87ceeb;
  --bluey-sun: #ffd700;
}

/* Matrix — Slate-50 studio ground (#f8fafc), crisp white 16px rounded-2xl cards
   (#ffffff), Slate-900 ink (#0f172a), Indigo-600 primary actions (#4f46e5),
   Emerald-600 pass/export (#059669), Rose-500 deal-breaker/fail (#f43f5e),
   Amber-500 top-pick gold (#f59e0b), Inter/Barlow geometric sans typography,
   and 8px rounded-lg controls. Taken from Decision Matrix Studio v3.0
   (compass.cocan.co.uk). Added 2026-10-24. */
:is([data-theme="matrix"], [data-cocan-theme="matrix"]) {
  --cocan-on-accent: #ffffff;
  --cocan-ink: #0f172a;
  --ink: var(--cocan-ink);
  --paper: #f8fafc;
  --panel: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --cocan-steel: #4f46e5;
  --accent: var(--cocan-steel);
  --accent-hover: #4338ca;
  --accent-soft: #eef2ff;
  --pos: #059669;
  --neg: #f43f5e;
  --cocan-muted: #64748b;
  --muted: var(--cocan-muted);
  --hover-bg: #f1f5f9;
  --focus: #6366f1;
  --cocan-focus: #6366f1;
  --card-radius: 16px;
  --card-radius-sm: 12px;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --card-shadow-hover: 0 10px 25px -5px rgba(79, 70, 229, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
  --card-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --card-shadow-sm-hover: 0 4px 12px rgba(79, 70, 229, 0.12);
  --grid: rgba(99, 102, 241, 0.10);
  --series-1: #6366f1;
  --series-2: #f59e0b;
  --series-3: #10b981;
  --series-4: #ec4899;
  --series-5: #0ea5e9;
  --series-6: #a855f7;
  --matrix-gradient: linear-gradient(135deg, #4f46e5 0%, #2563eb 55%, #f59e0b 100%);
  --matrix-winner-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, rgba(99, 102, 241, 0.10) 50%, rgba(59, 130, 246, 0.10) 100%);
  --matrix-top-pick: linear-gradient(135deg, #fbbf24 0%, #eab308 100%);
}

/* Existing pages consume the brand token names. These aliases let every
   palette reach those pages without duplicating its colour values. */
:root[data-cocan-theme]:not([data-cocan-theme="steel"]) {
  --cocan-bg: var(--paper);
  --cocan-surface: var(--panel);
  --cocan-steel-light: var(--cocan-steel);
  --cocan-steel-soft: var(--accent-soft);
  --cocan-steel-hover: var(--accent-hover, var(--accent));
  --cocan-border: var(--line);
  --cocan-positive: var(--pos);
  --cocan-negative: var(--neg);
}

:root[data-cocan-theme] {
  --color-surface: var(--cocan-surface);
  --color-accent-100: var(--cocan-steel-soft);
  --color-accent-700: var(--cocan-steel);
  --color-neutral-100: var(--cocan-bg);
  --color-neutral-200: var(--cocan-surface);
  --color-neutral-300: var(--cocan-border);
  --color-neutral-400: var(--cocan-border);
  --color-neutral-500: var(--cocan-muted);
  --color-neutral-600: var(--cocan-muted);
  --color-neutral-700: var(--cocan-muted);
  --color-neutral-800: var(--cocan-ink);
  --color-neutral-900: var(--cocan-ink);
}

:root[data-cocan-theme] :is(.text-muted, .card-meta, figcaption, th) {
  color: var(--cocan-muted) !important;
}

.cocan-theme-selector {
  position: fixed;
  z-index: 9999;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--cocan-surface, #fff);
  color: var(--cocan-ink, #1d1f20);
  border: 1px solid var(--cocan-border, #d4d4d7);
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
  font: 600 12px var(--cocan-font-body, sans-serif);
}
.cocan-theme-selector select {
  max-width: 130px;
  padding: 3px 5px;
  background: var(--cocan-surface, #fff);
  color: var(--cocan-ink, #1d1f20);
  border: 1px solid var(--cocan-border, #d4d4d7);
  font: inherit;
}
.cocan-theme-selector select:focus-visible {
  outline: 2px solid var(--cocan-focus, #d49b42);
}
[data-cocan-theme-mount] .cocan-theme-selector,
.pf-nav .cocan-theme-selector {
  position: static;
  text-transform: none;
  letter-spacing: 0;
}
.mast > [data-cocan-theme-mount] { margin-left: auto; }
.cocan-theme-selector.cocan-theme-inline {
  position: relative;
  top: auto;
  right: auto;
  width: max-content;
  margin: 8px max(12px, 4vw) 0 auto;
}

/* Liquid Glass page ground and dropdown. */
:root[data-cocan-theme="liquid-glass"] body {
  background: var(--page-bg) fixed, var(--paper);
  color: var(--ink);
}
:root[data-cocan-theme="liquid-glass"] ::selection {
  background: rgba(65, 110, 255, 0.5);
  color: #fff;
}
:root[data-cocan-theme="liquid-glass"] .cocan-theme-selector,
:root[data-cocan-theme="liquid-glass"] .cocan-theme-selector select {
  background: rgba(8, 22, 60, 0.6);
  border-color: var(--glass-rim);
  border-radius: 12px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
:root[data-cocan-theme="liquid-glass"] .cocan-theme-selector option {
  background: #0d1d47;
  color: #eef4ff;
}

/* Bluey tactile toy-button styling for the theme selector and selection highlight. */
:root[data-cocan-theme="bluey"] ::selection {
  background: #87ceeb;
  color: #2c3e50;
}
:root[data-cocan-theme="bluey"] .cocan-theme-selector {
  border: 2px solid #87ceeb;
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(2, 132, 199, 0.24);
}
:root[data-cocan-theme="bluey"] .cocan-theme-selector select {
  border-radius: 9px;
  border-color: #87ceeb;
}

/* Matrix (compass.cocan.co.uk) geometric sans typography, rounded-lg controls,
   indigo focus ring, and studio card elevation. */
:root[data-cocan-theme="matrix"] {
  --cocan-font-body: "Inter", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cocan-font-heading: "Inter", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-cocan-theme="matrix"] ::selection {
  background: #e0e7ff;
  color: #312e81;
}
:root[data-cocan-theme="matrix"] .cocan-theme-selector {
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.10);
}
:root[data-cocan-theme="matrix"] .cocan-theme-selector select {
  border-radius: 8px;
  border-color: #cbd5e1;
  background: #f8fafc;
}
:root[data-cocan-theme="matrix"] :is(button, input, select, textarea) {
  border-radius: 8px;
}

/* Native dropdown lists draw on the browser's own surface, not the page's.
   Give every option the theme's solid ground and ink so the list stays
   readable, including under translucent themes such as Liquid Glass. */
:root[data-cocan-theme] :is(select option, select optgroup) {
  background-color: var(--paper);
  color: var(--ink);
}