/* ============================================================================
   Theme: Midnight
   ============================================================================
   Dark-first. Deep charcoal surfaces, one luminous accent, subtle glow instead
   of drop shadow. Light mode exists but is the variant here, not the point.

   THIS FILE SETS TOKEN VALUES AND NOTHING ELSE.
   No selectors of its own, no component rules. That is what makes a theme data.

   Every block is scoped to BOTH the theme key and an explicit mode:

       :root[data-ac-theme="midnight"][data-bs-theme="dark"]   -> 0,3,0
       :root[data-ac-theme="midnight"][data-ac-variant="x"][data-bs-theme="dark"] -> 0,4,0

   Specificity, not load order, is what makes this win over theme-tokens.css
   (`:root` = 0,1,0 and `:root[data-bs-theme="dark"]` = 0,2,0). An unscoped
   `:root` block here would be a bug: it would override the global dark-mode
   values it never meant to touch.
   ============================================================================ */

/* ============================================================================
   DARK — the intended mode
   ============================================================================ */
:root[data-ac-theme="midnight"][data-bs-theme="dark"] {
    --ac-brand: #22d3ee;
    --ac-brand-rgb: 34, 211, 238;
    --ac-brand-hover: #67e8f9;
    --ac-brand-active: #a5f3fc;
    --ac-brand-light: #a5f3fc;
    --ac-brand-soft: #0b3b45;
    --ac-brand-contrast: #04212a;

    --ac-accent: #e879f9;
    --ac-accent-rgb: 232, 121, 249;
    --ac-accent-fill: #e879f9;
    --ac-accent-fill-hover: #f0abfc;
    --ac-accent-on-fill: #2a0a30;
    --ac-accent-ink: #f0abfc;
    --ac-accent-soft: #3b0d42;

    --ac-bg: #070b12;
    --ac-surface: #0f1623;
    --ac-surface-sunken: #0a1019;
    --ac-surface-raised: #17202f;
    --ac-surface-glass: rgba(15, 22, 35, 0.85);
    --ac-surface-inverse: #17202f;
    --ac-text-on-inverse: #e2e8f0;
    --ac-surface-overlay: rgba(0, 0, 0, 0.72);

    --ac-text: #e6edf6;
    --ac-text-muted: #96a5b8;
    --ac-text-subtle: #6b7d92;
    --ac-border: #1f2b3d;
    --ac-border-strong: #6a7f96;

    --ac-tooltip-bg: #1f2b3d;
    --ac-tooltip-text: #e6edf6;

    /* Depth on a near-black page comes from glow, not from drop shadow — a black
       shadow on a black surface is invisible. */
    --ac-shadow-sm: 0 0 0 1px rgba(34, 211, 238, 0.06);
    --ac-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(34, 211, 238, 0.08);
    --ac-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(34, 211, 238, 0.1);
    --ac-shadow-glow: 0 0 22px rgba(34, 211, 238, 0.28);

    --ac-gradient-accent: linear-gradient(135deg, #a21caf 0%, #e879f9 100%);
    --ac-gradient-brand-accent: linear-gradient(135deg, #22d3ee 0%, #e879f9 100%);
    --ac-gradient-inverse: linear-gradient(135deg, #17202f 0%, #0a1019 100%);

    /* Status hues stay put — only the tints move onto these darker surfaces.
       See the status block in theme-tokens.css: red means danger in every theme. */
    --ac-success-soft: #04352a;
    --ac-success-text: #5eead4;
    --ac-warning-soft: #3b2a05;
    --ac-warning-text: #fcd34d;
    --ac-danger-soft: #3f1418;
    --ac-danger-text: #fca5a5;
    --ac-info-soft: #06304a;
    --ac-info-text: #7dd3fc;
    --ac-neutral-soft: #17202f;
    --ac-neutral-text: #b6c4d4;

    --ac-radius-sm: 6px;
    --ac-radius-md: 10px;
    --ac-radius-lg: 14px;
}

/* ---- Dark variants: the accent hue only -------------------------------- */
:root[data-ac-theme="midnight"][data-ac-variant="magenta"][data-bs-theme="dark"] {
    --ac-brand: #e879f9;
    --ac-brand-rgb: 232, 121, 249;
    --ac-brand-hover: #f0abfc;
    --ac-brand-active: #f5d0fe;
    --ac-brand-light: #f5d0fe;
    --ac-brand-soft: #3b0d42;
    --ac-brand-contrast: #2a0a30;
    --ac-accent: #22d3ee;
    --ac-accent-fill: #22d3ee;
    --ac-accent-fill-hover: #67e8f9;
    --ac-accent-on-fill: #04212a;
    --ac-accent-ink: #67e8f9;
    --ac-accent-soft: #0b3b45;
    --ac-shadow-glow: 0 0 22px rgba(232, 121, 249, 0.28);
}

:root[data-ac-theme="midnight"][data-ac-variant="amber"][data-bs-theme="dark"] {
    --ac-brand: #fbbf24;
    --ac-brand-rgb: 251, 191, 36;
    --ac-brand-hover: #fcd34d;
    --ac-brand-active: #fde68a;
    --ac-brand-light: #fde68a;
    --ac-brand-soft: #3b2a05;
    /* Amber is a light hue and cannot carry white text — dark ink, per the
       "A light hue cannot carry white text" rule in CLAUDE.md. */
    --ac-brand-contrast: #241a02;
    --ac-shadow-glow: 0 0 22px rgba(251, 191, 36, 0.26);
}

:root[data-ac-theme="midnight"][data-ac-variant="lime"][data-bs-theme="dark"] {
    --ac-brand: #a3e635;
    --ac-brand-rgb: 163, 230, 53;
    --ac-brand-hover: #bef264;
    --ac-brand-active: #d9f99d;
    --ac-brand-light: #d9f99d;
    --ac-brand-soft: #1f2d06;
    --ac-brand-contrast: #14200a;
    --ac-shadow-glow: 0 0 22px rgba(163, 230, 53, 0.26);
}


/* ============================================================================
   LIGHT — supported, but this theme is happier dark
   ============================================================================
   The accent has to darken sharply: #22d3ee on white is 1.7:1 and unusable as
   text or as a fill behind white. Cyan reads as cyan down to about #0e7490.
   ============================================================================ */
:root[data-ac-theme="midnight"][data-bs-theme="light"] {
    --ac-brand: #0e7490;
    --ac-brand-rgb: 14, 116, 144;
    --ac-brand-hover: #0b5c73;
    --ac-brand-active: #083f4f;
    --ac-brand-light: #22d3ee;
    --ac-brand-soft: #ecfeff;
    --ac-brand-contrast: #ffffff;

    --ac-accent: #a21caf;
    --ac-accent-rgb: 162, 28, 175;
    --ac-accent-fill: #a21caf;
    --ac-accent-fill-hover: #86198f;
    --ac-accent-on-fill: #ffffff;
    --ac-accent-ink: #86198f;
    --ac-accent-soft: #fdf4ff;

    --ac-bg: #f6f8fb;
    --ac-surface: #ffffff;
    --ac-surface-sunken: #eef2f7;
    --ac-text: #0f1623;
    --ac-text-muted: #55657a;
    --ac-border: #dbe3ec;
    --ac-border-strong: #7b8ca1;

    --ac-gradient-brand-accent: linear-gradient(135deg, #0e7490 0%, #a21caf 100%);

    --ac-radius-sm: 6px;
    --ac-radius-md: 10px;
    --ac-radius-lg: 14px;
}

:root[data-ac-theme="midnight"][data-ac-variant="magenta"][data-bs-theme="light"] {
    --ac-brand: #a21caf;
    --ac-brand-rgb: 162, 28, 175;
    --ac-brand-hover: #86198f;
    --ac-brand-active: #701a75;
    --ac-brand-light: #e879f9;
    --ac-brand-soft: #fdf4ff;
    --ac-brand-contrast: #ffffff;
}

:root[data-ac-theme="midnight"][data-ac-variant="amber"][data-bs-theme="light"] {
    /* Amber on a light page: bright fill, dark ink. */
    --ac-brand: #9c5f07;
    --ac-brand-rgb: 156, 95, 7;
    --ac-brand-hover: #854d0e;
    --ac-brand-active: #713f12;
    --ac-brand-light: #fbbf24;
    --ac-brand-soft: #fefce8;
    --ac-brand-contrast: #ffffff;
}

:root[data-ac-theme="midnight"][data-ac-variant="lime"][data-bs-theme="light"] {
    --ac-brand: #4b7a0f;
    --ac-brand-rgb: 75, 122, 15;
    --ac-brand-hover: #3f6212;
    --ac-brand-active: #365314;
    --ac-brand-light: #a3e635;
    --ac-brand-soft: #f7fee7;
    --ac-brand-contrast: #ffffff;
}