/* Every colour, size and shadow in the product lives here. Nothing else in static/ or templates/ may contain a colour literal. */
:root {
  /* surfaces and text: dark is the default */
  --bg: #0B0A12;
  --surface: #14121F;
  --border: #26223A;          /* decorative separators */
  --control-border: #7A7399;  /* borders of inputs and buttons: >= 3:1 against the page (WCAG 1.4.11) */
  --text: #F2F0FA;
  --muted: #9A94B8;
  /* the one accent */
  --accent: #7C3AED;
  --accent-hover: #8B5CF6;
  --on-accent: #FFFFFF;
  --on-accent-hover: #0B0A12;  /* label on the lighter hover violet: white would be 4.2:1, this is 4.7:1 */
  --accent-text: #A78BFA;     /* accent used as TEXT or focus ring on dark backgrounds (7:1) */
  --accent-soft: color-mix(in srgb, var(--accent) 24%, transparent);
  /* status colours: used for results only */
  --ai: #F87171;
  --mixed: #FBBF24;
  --human: #34D399;
  --mark-ai: color-mix(in srgb, var(--ai) 26%, transparent);
  --mark-mixed: color-mix(in srgb, var(--mixed) 24%, transparent);
  --mark-add: color-mix(in srgb, var(--accent) 34%, transparent);
  /* shape, spacing, type */
  --radius: 12px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --shadow-color: rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px var(--shadow-color);
  --backdrop: rgb(0 0 0 / 0.6);
  /* liquid glass: clear panels, a bright rim, strong blur, and coloured light behind so the glass has something to show */
  --glass: linear-gradient(135deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0.08));
  --glass-strong: color-mix(in srgb, var(--bg) 46%, rgb(255 255 255 / 0.10));
  --glass-input: rgb(255 255 255 / 0.06);
  --glass-border: rgb(255 255 255 / 0.20);
  --glass-edge: rgb(255 255 255 / 0.55);        /* the bright highlight along the top and left edge */
  --glass-edge-dim: rgb(255 255 255 / 0.10);    /* the soft shade along the bottom and right edge */
  --glass-sheen: linear-gradient(115deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 38%);
  --glass-shadow: 0 24px 60px rgb(0 0 0 / 0.40), 0 2px 10px rgb(0 0 0 / 0.25);
  --glass-inner-shade: rgb(0 0 0 / 0.22);       /* inside shadow of inputs, toggles and bars */
  --glass-inner-light: rgb(255 255 255 / 0.03);
  --glass-blur: 34px;
  --glass-sat: 190%;
  /* ambient colour behind the glass (decorative only; controls still use the one accent) */
  --orb-a: color-mix(in srgb, var(--accent) 80%, transparent);
  --orb-b: rgb(56 118 255 / 0.55);
  --orb-c: rgb(236 72 153 / 0.42);
  --orb-d: rgb(34 211 238 / 0.30);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* light theme: follows the operating system unless the visitor picked a theme with the toggle */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F6FC; --surface: #FFFFFF; --border: #DDD9EE; --control-border: #7C7699;
    --text: #1A1530; --muted: #5B5578;
    --accent-hover: #6D28D9; --accent-text: #6D28D9; --on-accent-hover: #FFFFFF;
    --ai: #B91C1C; --mixed: #92400E; --human: #047857;
    --shadow-color: rgb(26 21 48 / 0.12); --backdrop: rgb(26 21 48 / 0.45);
    --glass: linear-gradient(135deg, rgb(255 255 255 / 0.50), rgb(255 255 255 / 0.18) 55%, rgb(255 255 255 / 0.36));
    --glass-strong: rgb(255 255 255 / 0.62); --glass-input: rgb(255 255 255 / 0.5);
    --glass-border: rgb(255 255 255 / 0.85); --glass-edge: rgb(255 255 255 / 1); --glass-edge-dim: rgb(120 100 190 / 0.14);
    --glass-inner-shade: rgb(60 40 130 / 0.14);
    --glass-inner-shade: rgb(60 40 130 / 0.14);
  --glass-sheen: linear-gradient(115deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 40%);
    --glass-shadow: 0 20px 50px rgb(80 55 170 / 0.18), 0 2px 8px rgb(80 55 170 / 0.10);
    --orb-a: color-mix(in srgb, var(--accent) 62%, transparent); --orb-b: rgb(56 118 255 / 0.42);
    --orb-c: rgb(236 72 153 / 0.36); --orb-d: rgb(34 211 238 / 0.36);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F7F6FC; --surface: #FFFFFF; --border: #DDD9EE; --control-border: #7C7699;
  --text: #1A1530; --muted: #5B5578;
  --accent-hover: #6D28D9; --accent-text: #6D28D9; --on-accent-hover: #FFFFFF;
  --ai: #B91C1C; --mixed: #92400E; --human: #047857;
  --shadow-color: rgb(26 21 48 / 0.12); --backdrop: rgb(26 21 48 / 0.45);
  --glass: linear-gradient(135deg, rgb(255 255 255 / 0.50), rgb(255 255 255 / 0.18) 55%, rgb(255 255 255 / 0.36));
  --glass-strong: rgb(255 255 255 / 0.62); --glass-input: rgb(255 255 255 / 0.5);
  --glass-border: rgb(255 255 255 / 0.85); --glass-edge: rgb(255 255 255 / 1); --glass-edge-dim: rgb(120 100 190 / 0.14);
  --glass-sheen: linear-gradient(115deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 40%);
  --glass-shadow: 0 20px 50px rgb(80 55 170 / 0.18), 0 2px 8px rgb(80 55 170 / 0.10);
  --orb-a: color-mix(in srgb, var(--accent) 62%, transparent); --orb-b: rgb(56 118 255 / 0.42);
  --orb-c: rgb(236 72 153 / 0.36); --orb-d: rgb(34 211 238 / 0.36);
  color-scheme: light;
}

/* printing a detector report always uses the light palette, whatever the screen theme */
@media print {
  :root, :root[data-theme] {
    --bg: #FFFFFF; --surface: #FFFFFF; --border: #CFCAE6; --control-border: #7C7699;
    --text: #1A1530; --muted: #4B4566; --accent-text: #6D28D9;
    --ai: #B91C1C; --mixed: #92400E; --human: #047857;
  }
}