/* ============================================================================
   GlideInventory — Design Tokens
   ----------------------------------------------------------------------------
   THE single source of truth for colour, type, spacing, radius and elevation.

   Structure (do not reorder — the cascade depends on it):
     1. :root ............................ complete LIGHT palette
     2. legacy alias layer ............... old --admin-* / --public-* names
                                           re-pointed at the new --g-* tokens
     3. @media (prefers-color-scheme:dark) guarded so an explicit light choice
        :root:not([data-theme="light"])    still beats a dark OS
     4. :root[data-theme="dark"] ......... so the toggle wins in both directions

   RULES
   - Never declare a colour anywhere but here.
   - Sections 3 and 4 redefine TOKENS ONLY. No component rules, ever.
     (A component rule that lives only under a [data-theme] block does not
     apply in the un-stamped "system" state — that is the classic
     half-themed-page bug this file exists to prevent.)
   - Section 2 is temporary. It shrinks as components move onto --g-* and is
     deleted in Phase 05.
   ============================================================================ */

:root {
    color-scheme: light;

    /* ---- type roles -------------------------------------------------------
       No webfont. The UI face is the system stack; character comes from
       setting every numeral, SKU, licence key and label in mono. */
    --g-font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --g-font-data: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
                   Menlo, Consolas, monospace;

    --g-text-xs: 11px;
    --g-text-sm: 12.5px;
    --g-text-base: 14px;
    --g-text-md: 15px;
    --g-text-lg: 19px;
    --g-text-xl: 24px;
    --g-text-2xl: 30px;
    --g-text-3xl: 46px;

    /* ---- grounds & surfaces (cool, blue-biased neutrals) ------------------ */
    --g-bg: #F6F8FA;
    --g-surface: #FFFFFF;
    --g-surface-2: #EFF3F7;
    --g-surface-3: #E4EAF1;
    --g-border: #D8E0E9;
    --g-border-strong: #BCC8D6;

    /* ---- text ------------------------------------------------------------ */
    --g-text: #0B0F14;
    --g-text-muted: #4C5A6B;
    --g-text-subtle: #74838F;

    /* ---- accent — interaction ONLY, never state -------------------------- */
    --g-accent: #2F6BFF;
    --g-accent-hover: #1D53DC;
    --g-accent-ink: #FFFFFF;
    --g-accent-wash: #E8EFFF;
    --g-focus-ring: rgba(47, 107, 255, 0.32);

    /* ---- semantic sync state — deliberately NOT the accent hue ------------ */
    --g-live: #147F5B;
    --g-live-wash: #DFF3EB;
    --g-hold: #9A6410;
    --g-hold-wash: #FBEFD9;
    --g-alert: #B93A3A;
    --g-alert-wash: #FBE6E6;
    --g-info: #1D53DC;
    --g-info-wash: #E8EFFF;

    /* ---- spacing ---------------------------------------------------------- */
    --g-space-1: 4px;
    --g-space-2: 8px;
    --g-space-3: 12px;
    --g-space-4: 16px;
    --g-space-5: 24px;
    --g-space-6: 32px;
    --g-space-7: 48px;
    --g-space-8: 64px;

    /* ---- radius — tightened from 10/16/22 to 6/8/12 ---------------------- */
    --g-radius-sm: 6px;
    --g-radius-md: 8px;
    --g-radius-lg: 12px;
    --g-radius-pill: 999px;

    /* ---- elevation — hairlines carry structure; shadow is a whisper ------- */
    --g-shadow-1: 0 1px 2px rgba(11, 15, 20, 0.05);
    --g-shadow-2: 0 4px 16px rgba(11, 15, 20, 0.09);
    --g-shadow-color: rgba(11, 15, 20, 0.08);

    /* Lighter accent, for the second series in a chart or a soft fill. */
    --g-accent-soft: #7FA6FF;
}

/* ============================================================================
   DARK — system preference.
   Guarded with :not([data-theme="light"]) so an explicit light choice wins
   over a dark OS. TOKEN REDEFINITIONS ONLY.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --g-bg: #0B0F14;
        --g-surface: #11171F;
        --g-surface-2: #161E28;
        --g-surface-3: #1D2733;
        --g-border: #232E3B;
        --g-border-strong: #354453;

        --g-text: #E9EEF4;
        --g-text-muted: #A2B0C0;
        --g-text-subtle: #7C8B9B;

        --g-accent: #5B8CFF;
        --g-accent-hover: #7CA4FF;
        --g-accent-ink: #06101F;
        --g-accent-wash: #16233D;
        --g-focus-ring: rgba(91, 140, 255, 0.45);

        --g-live: #3FCC9A;
        --g-live-wash: #102A22;
        --g-hold: #E5AC4E;
        --g-hold-wash: #2E2313;
        --g-alert: #FF6B6B;
        --g-alert-wash: #2E1618;
        --g-info: #7CA4FF;
        --g-info-wash: #16233D;

        --g-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --g-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);

        --g-accent-soft: #9AC0FF;
        --g-shadow-color: rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================================
   DARK — explicit toggle. Same token set, so the toggle also wins on a
   light OS. TOKEN REDEFINITIONS ONLY.
   ============================================================================ */
:root[data-theme="dark"] {
    color-scheme: dark;

    --g-bg: #0B0F14;
    --g-surface: #11171F;
    --g-surface-2: #161E28;
    --g-surface-3: #1D2733;
    --g-border: #232E3B;
    --g-border-strong: #354453;

    --g-text: #E9EEF4;
    --g-text-muted: #A2B0C0;
    --g-text-subtle: #7C8B9B;

    --g-accent: #5B8CFF;
    --g-accent-hover: #7CA4FF;
    --g-accent-ink: #06101F;
    --g-accent-wash: #16233D;
    --g-focus-ring: rgba(91, 140, 255, 0.45);

    --g-live: #3FCC9A;
    --g-live-wash: #102A22;
    --g-hold: #E5AC4E;
    --g-hold-wash: #2E2313;
    --g-alert: #FF6B6B;
    --g-alert-wash: #2E1618;
    --g-info: #7CA4FF;
    --g-info-wash: #16233D;

    --g-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --g-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);

    --g-accent-soft: #9AC0FF;
    --g-shadow-color: rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   HIGH CONTRAST — applies in BOTH dark states, not just the system one.

   Each dark state needs its own guard. `:root:not([data-theme="light"])`
   alone would also match the un-stamped LIGHT state and paint white text on
   a white ground, so it stays inside the prefers-color-scheme query.

   (The block this replaces used `prefers-contrast: high`, which is not a
   valid value — the value is `more` — so it never applied at all.)
   ============================================================================ */
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root:not([data-theme="light"]) {
        --g-text: #FFFFFF;
        --g-border: #6B7280;
        --g-border-strong: #8B95A3;
    }
}

@media (prefers-contrast: more) {
    :root[data-theme="dark"] {
        --g-text: #FFFFFF;
        --g-border: #6B7280;
        --g-border-strong: #8B95A3;
    }
}