/*
 * Soutiva dark mode
 * Loaded after every theme. The palette is deliberately shared: the active
 * theme still controls type, radii and layout, while this file swaps the
 * surface/ink tokens and the few component colours that need a dark-specific
 * contrast decision.
 */
[data-mode="dark"] {
    color-scheme: dark;

    --color-paper: 12 19 16;
    --color-paper-raised: 21 31 27;
    --color-paper-sunken: 16 25 21;
    --color-line: 45 60 54;
    --color-line-strong: 72 92 84;
    --color-ink: 236 245 241;
    --color-ink-soft: 199 214 207;
    --color-ink-muted: 153 172 164;
    --color-ink-faint: 113 133 125;
    --color-graphite: 6 11 9;
    --color-graphite-raised: 14 24 20;
    --color-graphite-line: 38 58 51;
    --color-graphite-ink: 240 249 245;
    --color-graphite-muted: 164 188 179;
    --color-graphite-hover: 24 40 34;
    --color-amber: 45 212 174;
    --color-amber-strong: 25 194 160;
    --color-amber-wash: 16 48 40;
    --color-amber-deep: 6 40 34;
    --color-amber-border: 42 108 90;
    --color-teal: 98 224 200;
    --color-teal-wash: 15 45 38;
    --color-teal-border: 42 100 84;
    --color-coral: 255 138 110;
    --color-coral-strong: 255 122 89;
    --color-coral-wash: 55 28 22;
    --color-coral-border: 112 56 42;
    --color-moss: 90 220 180;
    --color-moss-wash: 17 45 37;
    --color-moss-border: 42 100 84;

    --shadow-overlay: 0 30px 90px -36px rgb(0 0 0 / 0.7);
    --shadow-menu: 0 18px 44px -24px rgb(0 0 0 / 0.65);
}

/* Mint and paper are bright by design; on a dark canvas their primary buttons
   need dark ink even though the default `ink` token is now light. */
[data-mode="dark"] .btn-primary,
[data-mode="dark"] .bg-amber.text-ink,
[data-mode="dark"] .tile-mark {
    color: #0a261f;
}

[data-mode="dark"] .btn-primary:hover {
    color: rgb(var(--color-paper));
}

[data-mode="dark"] ::selection {
    background: rgb(var(--color-amber) / 0.25);
    color: rgb(var(--color-ink));
}

[data-mode="dark"] .mint-quick-card {
    background:
        radial-gradient(circle at 90% 10%, rgb(var(--color-amber) / 0.13), transparent 45%),
        rgb(var(--color-paper-raised));
}

[data-mode="dark"] .mint-hero::before {
    background: rgb(var(--color-amber) / 0.07);
}

[data-mode="dark"] .mint-hero::after {
    background: rgb(var(--color-coral) / 0.05);
}

[data-mode="dark"] .mint-api-card {
    background: rgb(var(--color-graphite));
}

[data-mode="dark"] .audio-seek {
    background: linear-gradient(
        to right,
        rgb(var(--color-amber)) 0 var(--audio-progress, 0%),
        rgb(var(--color-line-strong)) var(--audio-progress, 0%),
        rgb(var(--color-line-strong)) 100%
    );
}