:root {

    --body-font: "Satoshi", sans-serif;
    --heading-font: "Satoshi", sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-sans: 'Space Grotesk', sans-serif;
    --ease: cubic-bezier(.4,0,.2,1);

    /* Space / dark theme system */
    --space-bg: #04060d;
    --space-s1: #07090f;
    --space-s2: #0c1020;
    --space-s3: #121830;
    --space-border: rgba(255,255,255,0.07);
    --space-border2: rgba(255,255,255,0.14);
    --space-text: #e8ecf8;
    --space-dim: #a0abc7;
     --space-dim-placeholder: #677088;
    --space-faint: #1e2540;

    --primary: #F45F10;
    --primary-light: color-mix(in srgb, var(--primary) 50%, white);
    --primary-extralight: color-mix(in srgb, var(--primary) 20%, white);
    --primary-dark: color-mix(in srgb, var(--primary) 80%, black);

    --red: #E53D28;
    --red-light: color-mix(in srgb, var(--red) 50%, white);
    --red-extralight: color-mix(in srgb, var(--red) 20%, white);
    --red-dark: color-mix(in srgb, var(--red) 80%, black);

    --orange-2: #F45F10;
    --orange-2-light: color-mix(in srgb, var(--orange-2) 50%, white);
    --orange-2-extralight: color-mix(in srgb, var(--orange-2) 20%, white);
    --orange-2-dark: color-mix(in srgb, var(--orange-2) 80%, black);

    --orange: #FE7900;
    --orange-light: color-mix(in srgb, var(--orange) 50%, white);
    --orange-extralight: color-mix(in srgb, var(--orange) 20%, white);
    --orange-dark: color-mix(in srgb, var(--orange) 80%, black);

    --blue: #758BFD;
    --blue-light: color-mix(in srgb, var(--blue) 50%, white);
    --blue-extralight: color-mix(in srgb, var(--blue) 20%, white);
    --blue-dark: color-mix(in srgb, var(--blue) 80%, black);

    --green: #50CEAE;
    --green-light: color-mix(in srgb, var(--green) 50%, white);
    --green-extralight: color-mix(in srgb, var(--green) 20%, white);
    --green-dark: color-mix(in srgb, var(--green) 80%, black);

    --purple: #b383e2;
    --purple-light: color-mix(in srgb, var(--purple) 50%, white);
    --purple-extralight: color-mix(in srgb, var(--purple) 20%, white);
    --purple-dark: color-mix(in srgb, var(--purple) 80%, black);

    --yellow: #ffe730;
    --yellow-light: color-mix(in srgb, var(--yellow) 50%, white);
    --yellow-extralight: color-mix(in srgb, var(--yellow) 20%, white);
    --yellow-dark: color-mix(in srgb, var(--yellow) 80%, black);

    --danger: #f87171;
    --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
    --danger-border: color-mix(in srgb, var(--danger) 25%, transparent);

    --grey-darker: #1f1f1f;
    --grey-dark: #5d5d5d;
    --grey: #929496;
    --grey-light: #f2f2f2;

    --background-1: #000;
    --background-2: #fff;
    --bg-main: color-mix(in srgb, var(--blue) 10%, white);
    --bg-sub: color-mix(in srgb, var(--yellow) 10%, white);

    --white: #fff;
    --black: #000;
}


/* Light mode overrides */
html[data-theme="light"] {
    --space-bg:      #f5f7fc;
    --space-s1:      #edf0f8;
    --space-s2:      #e2e6f2;
    --space-s3:      #d4d9ec;
    --space-border:  rgba(0,0,0,0.07);
    --space-border2: rgba(0,0,0,0.14);
    --space-text:    #1a1f2e;
    --space-dim:     #5a6480;
    --space-faint:   #9aa3be;
    --background-1:  #fff;
    --background-2:  #000;
    color-scheme: light;
    /* Darken accent colours for light backgrounds (contrast audit fixes) */
    --blue:   #3a52e8;
    --accent: #3a52e8;
    --purple: #7c3fbf;
    --green:  #1a8a6e;
    --orange: #c45c00;
    --danger: #c0392b;
}

html[data-theme="light"] .topbar {
    background-color: rgba(237, 240, 248, 0.96);
    border-bottom-color: rgba(0,0,0,0.07);
}

/* ── SPLASH PAGE LIGHT MODE ────────────────────────── */
/* Nav subtitle & status badge: white-alpha → readable dark token */
html[data-theme="light"] .nav-sub,
html[data-theme="light"] .nav-status { color: var(--space-dim); }

/* Footer: white-alpha → readable dark token */
html[data-theme="light"] .footer,
html[data-theme="light"] .footer-sep { color: var(--space-dim); }

/* Card title: var(--space-text) becomes dark in light mode but cards stay dark → force white */
html[data-theme="light"] .card-title { color: #ffffff; }

/* Hero tagline & programme strip labels: white-alpha on light body */
html[data-theme="light"] .hero-tagline { color: var(--space-dim); }
html[data-theme="light"] .stat-label   { color: var(--space-dim); }

/* Programme strip cells: near-invisible on light body */
html[data-theme="light"] .programme-strip { background: var(--space-border); }
html[data-theme="light"] .stat-cell       { background: var(--space-s1); }
html[data-theme="light"] .stat-cell:hover { background: var(--space-s2); }

/* ── LOGIN MODAL LIGHT MODE ────────────────────────── */
html[data-theme="light"] .lm-input {
    color: #1a1f2e;
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .lm-input::placeholder { color: #8a93ae; }
html[data-theme="light"] .lm-close { color: #5a6480; }
html[data-theme="light"] .lm-close:hover { color: #1a1f2e; }

/* ── LOGIN MODAL DARK MODE ─────────────────────────── */
/* Button text: blue/purple bg + white fails AA → use near-black text */
html[data-theme="dark"] .lm-btn { color: #0d0d1a; }
/* Labels & close button: #5a6480 on dark modal → lift to passing shade */
html[data-theme="dark"] .lm-label,
html[data-theme="dark"] .lm-close { color: #a0abc7; }
button.tb-btn img { filter: brightness(0) invert(1); }
html[data-theme="light"] button.tb-btn img { filter: brightness(0); }
html[data-theme="light"] .tb-nav-links a { color: var(--space-text); }
html[data-theme="light"] .tb-nav-links a:hover,
html[data-theme="light"] .tb-nav-links a.active { background: var(--space-s2); }

html[data-theme="light"] .card a { color: var(--yellow-dark);}
/* Tool pages: override common inline-style vars in light mode */
html[data-theme="light"] body {
    --bg:          #f5f7fc;
    --card:        #edf0f8;
    --card-border: #d4d9ec;
    --text:        #1a1f2e;
    --muted:       #5a6480;
    --surface:     #e2e6f2;
}


/* Color variants */
.yellow  { background-color: var(--yellow); }
.purple  { background-color: var(--purple); }
.green   { background-color: var(--green); }
.red     { background-color: var(--red); }
.orange  { background-color: var(--orange); }
.blue    { background-color: var(--blue); }