/* ============================================================
 * NoidNoggin — Design Tokens (canonical)
 *
 * The single source of truth for color, surface, and feedback
 * tokens consumed by NoidNoggin (customer surface) and NNBRAIN
 * (operational dashboard). Mirror this file into the NNBRAIN
 * frontend so both surfaces resolve to the same values.
 *
 * Mode resolution (highest specificity wins):
 *   1. [data-theme="dark"] / [data-theme="light"]   (explicit)
 *   2. @media (prefers-color-scheme: dark)          (implicit, no attribute)
 *   3. :root                                        (light default)
 *
 * NoidNoggin theme.js sets data-theme explicitly on first paint,
 * so the default-mode behavior is governed by the user's stored
 * preference, falling back to OS preference, falling back to
 * NoidNoggin's brand-default dark.
 * NNBRAIN embedded-theme.js does the same in its head loader.
 * ============================================================ */

:root {
    color-scheme: light;

    /* Surfaces */
    --ds-bg: #f8fafc;
    --ds-surface: #ffffff;
    --ds-surface-raised: #f1f5f9;

    /* Text */
    --ds-text: #0f172a;
    --ds-text-muted: #64748b;

    /* Strokes */
    --ds-border: #e2e8f0;

    /* Brand + feedback */
    --ds-accent: #6c5ce7;
    --ds-accent-strong: #5040c0;
    --ds-success: #00b85e;
    --ds-warning: #e6c200;
    --ds-error: #e04040;

    /* Elevation */
    --ds-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
    --ds-focus-ring: 0 0 0 0.1875rem rgba(108, 92, 231, 0.35);
}

[data-theme="dark"] {
    color-scheme: dark;

    --ds-bg: #0f0f1a;
    --ds-surface: #1a1a2e;
    --ds-surface-raised: #222240;

    --ds-text: #ffffff;
    --ds-text-muted: #a0a0c0;

    --ds-border: #2a2a45;

    --ds-accent: #6c5ce7;
    --ds-accent-strong: #a29bfe;
    --ds-success: #00e676;
    --ds-warning: #ffd600;
    --ds-error: #ff5252;

    --ds-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
    --ds-focus-ring: 0 0 0 0.1875rem rgba(162, 155, 254, 0.45);
}

[data-theme="light"] {
    color-scheme: light;

    --ds-bg: #f8fafc;
    --ds-surface: #ffffff;
    --ds-surface-raised: #f1f5f9;

    --ds-text: #0f172a;
    --ds-text-muted: #64748b;

    --ds-border: #e2e8f0;

    --ds-accent: #6c5ce7;
    --ds-accent-strong: #5040c0;
    --ds-success: #00b85e;
    --ds-warning: #e6c200;
    --ds-error: #e04040;

    --ds-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
    --ds-focus-ring: 0 0 0 0.1875rem rgba(108, 92, 231, 0.35);
}

/* OS-level dark preference applies only when no explicit theme is set,
 * so explicit data-theme="light" is never overridden. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;

        --ds-bg: #0f0f1a;
        --ds-surface: #1a1a2e;
        --ds-surface-raised: #222240;

        --ds-text: #ffffff;
        --ds-text-muted: #a0a0c0;

        --ds-border: #2a2a45;

        --ds-accent: #6c5ce7;
        --ds-accent-strong: #a29bfe;
        --ds-success: #00e676;
        --ds-warning: #ffd600;
        --ds-error: #ff5252;

        --ds-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
        --ds-focus-ring: 0 0 0 0.1875rem rgba(162, 155, 254, 0.45);
    }
}