/*
 * Xava design tokens.
 *
 * This is the single place colour, type, spacing and motion are decided. Two
 * things about the structure are deliberate:
 *
 * 1. The `--surux-*` names are defined HERE, not in app.css. They are used 538
 *    times across the console, so making them theme-aware at the source means
 *    the whole app follows a theme change without touching those call sites.
 *    app.css previously declared them as a fixed dark block.
 *
 * 2. Only the palette is redefined per theme. Everything downstream is written
 *    against the tokens, never inside a theme block, so a component cannot be
 *    correct in one theme and wrong in the other.
 *
 * Theme resolution: the OS preference applies by default, and an explicit
 * choice stamped on <html data-theme> overrides it in both directions.
 */

/* ---------------------------------------------------------------------------
   Palette - light
   --------------------------------------------------------------------------- */
:root {
    --surux-app-bg: #f4f6f9;
    --surux-surface: #ffffff;
    --surux-surface-2: #eef1f6;
    --surux-border: rgba(19, 27, 38, .14);
    --surux-text: #131a22;
    --surux-muted: #5a6572;
    --surux-primary: #2c62d6;
    --surux-primary-strong: #1d49ab;
    --surux-primary-rgb: 44, 98, 214;
    --surux-code: #2a3f75;
    --surux-info: #0e7490;
    --surux-success: #1f7a52;
    --surux-warning: #9a6410;
    --surux-danger: #b3323f;

    /*
     * Direction tokens, so a surface can be lifted or sunk without naming a
     * colour. app.css did this with rgba(255,255,255,a) for highlights and
     * near-black hex for wells - both of which pick a side and only work on one
     * ground. Raise lightens on dark and darkens on light; sink always darkens.
     *
     * Hue-lift is raise as solid ink rather than a fixed alpha. Use it wherever
     * the mix needs its own strength - a status hue pushed further from the
     * ground, or a hairline heavier than raise's .055 - because color-mix()
     * rejects percentages above 100% and drops the whole declaration if you try
     * to scale raise past it.
     */
    --surux-raise: rgba(19, 27, 38, .06);
    --surux-sink: #d3d9e2;
    --surux-hue-lift: #131a22;

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Palette - dark. These are the values the console shipped with.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --surux-app-bg: #0d0f13;
        --surux-surface: #15181d;
        --surux-surface-2: #20242c;
        --surux-border: rgba(231, 237, 246, .12);
        --surux-text: #f4f7fb;
        --surux-muted: #a5afbd;
        --surux-primary: #6ea2ff;
        --surux-primary-strong: #467cff;
        --surux-primary-rgb: 110, 162, 255;
        --surux-code: #b7c8ff;
        --surux-info: #22d3ee;
        --surux-success: #34d399;
        --surux-warning: #fbbf24;
        --surux-danger: #fb7185;

        --surux-raise: rgba(255, 255, 255, .055);
        --surux-sink: #090b0e;
        --surux-hue-lift: #ffffff;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --surux-app-bg: #0d0f13;
    --surux-surface: #15181d;
    --surux-surface-2: #20242c;
    --surux-border: rgba(231, 237, 246, .12);
    --surux-text: #f4f7fb;
    --surux-muted: #a5afbd;
    --surux-primary: #6ea2ff;
    --surux-primary-strong: #467cff;
    --surux-primary-rgb: 110, 162, 255;
    --surux-code: #b7c8ff;
    --surux-info: #22d3ee;
    --surux-success: #34d399;
    --surux-warning: #fbbf24;
    --surux-danger: #fb7185;

    --surux-raise: rgba(255, 255, 255, .055);
    --surux-sink: #090b0e;
    --surux-hue-lift: #ffffff;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --surux-app-bg: #f4f6f9;
    --surux-surface: #ffffff;
    --surux-surface-2: #eef1f6;
    --surux-border: rgba(19, 27, 38, .14);
    --surux-text: #131a22;
    --surux-muted: #5a6572;
    --surux-primary: #2c62d6;
    --surux-primary-strong: #1d49ab;
    --surux-primary-rgb: 44, 98, 214;
    --surux-code: #2a3f75;
    --surux-info: #0e7490;
    --surux-success: #1f7a52;
    --surux-warning: #9a6410;
    --surux-danger: #b3323f;

    --surux-raise: rgba(19, 27, 38, .06);
    --surux-sink: #d3d9e2;
    --surux-hue-lift: #131a22;

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Shell metrics. Not colour, so they do not vary by theme.
   --------------------------------------------------------------------------- */
:root {
    --surux-radius-sm: .5rem;
    --surux-radius-md: .75rem;
    --surux-radius-lg: 1rem;
    --surux-topbar-height: 64px;
    --surux-sidebar-width: 280px;
    --surux-sidebar-collapsed-width: 76px;
    --surux-mobile-nav-height: 66px;
    --surux-transition: 180ms ease;
}

/* ---------------------------------------------------------------------------
   The xava-ui layer. Semantic names over the palette above.
   --------------------------------------------------------------------------- */
:root {
    --xava-ui-bg: var(--surux-app-bg);
    --xava-ui-surface: var(--surux-surface);
    --xava-ui-surface-raised: var(--surux-surface-2);
    --xava-ui-surface-muted: color-mix(in srgb, var(--xava-ui-surface) 88%, var(--surux-sink) 12%);
    --xava-ui-border: var(--surux-border);
    --xava-ui-border-strong: color-mix(in srgb, var(--xava-ui-border) 68%, var(--xava-ui-text) 32%);
    --xava-ui-text: var(--surux-text);
    --xava-ui-muted: var(--surux-muted);
    --xava-ui-primary: var(--surux-primary);
    --xava-ui-primary-strong: var(--surux-primary-strong);
    --xava-ui-primary-rgb: var(--surux-primary-rgb);
    /* Was var(--surux-primary), which made Info a quieter Primary rather than a
       different thing - the two were the same colour and no treatment could
       separate them. */
    --xava-ui-info: var(--surux-info);
    --xava-ui-success: var(--surux-success);
    --xava-ui-warning: var(--surux-warning);
    --xava-ui-danger: var(--surux-danger);

    /*
     * Foreground for anything sitting on the primary fill. The dark theme's
     * primary is a light blue that white fails against; the light theme's is
     * dark enough that white is the only readable choice. Two values, not one.
     */
    --xava-ui-on-primary: #08111f;

    /* ----------------------------------------------------------------------
       Type scale.
       The console had 27 distinct font sizes and no type token at all, which is
       why no two pages agreed on what a heading was. Ratio is a restrained
       1.2 through the body range, opening up for display sizes only.
       ---------------------------------------------------------------------- */
    --xava-ui-text-2xs: .68rem;
    --xava-ui-text-xs: .74rem;
    --xava-ui-text-sm: .82rem;
    --xava-ui-text-md: .9rem;
    --xava-ui-text-base: 1rem;
    --xava-ui-text-lg: 1.15rem;
    --xava-ui-text-xl: 1.4rem;
    --xava-ui-text-2xl: 1.75rem;
    --xava-ui-text-3xl: 2.25rem;

    --xava-ui-weight-regular: 400;
    --xava-ui-weight-medium: 550;
    --xava-ui-weight-semibold: 650;
    --xava-ui-weight-bold: 750;

    --xava-ui-leading-tight: 1.2;
    --xava-ui-leading-snug: 1.4;
    --xava-ui-leading-normal: 1.6;

    --xava-ui-tracking-tight: -.015em;
    --xava-ui-tracking-normal: 0;
    --xava-ui-tracking-wide: .08em;
    --xava-ui-tracking-caps: .11em;

    --xava-ui-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

    --xava-ui-radius-sm: .5rem;
    --xava-ui-radius-md: .75rem;
    --xava-ui-radius-lg: 1rem;
    --xava-ui-radius-pill: 999px;

    /*
     * Buttons are not pills. 999px reads as a tag or a status chip, which is
     * what the rest of the console uses that radius for, so a full-round button
     * competed with the chips instead of looking like a control. Kept above the
     * hairline so it still reads as deliberate.
     *
     * Chips, dots, orbs, spinners and counts keep the pill - they are meant to
     * be round.
     */
    --xava-ui-radius-button: .375rem;

    --xava-ui-space-1: .25rem;
    --xava-ui-space-2: .5rem;
    --xava-ui-space-3: .75rem;
    --xava-ui-space-4: 1rem;
    --xava-ui-space-5: 1.25rem;
    --xava-ui-space-6: 1.5rem;
    --xava-ui-space-8: 2rem;

    --xava-ui-control-sm: 2rem;
    --xava-ui-control-md: 2.5rem;
    --xava-ui-control-lg: 3rem;
    --xava-ui-control-font: var(--xava-ui-text-md);

    /* Two-layer ring: a bg-coloured gap so the ring reads on any surface, then a
       solid primary band. The previous .26-alpha wash resolved to ~1.6:1 and was
       invisible in practice, which meant no primitive had a usable focus state. */
    --xava-ui-focus-ring: 0 0 0 2px var(--xava-ui-bg), 0 0 0 4px var(--xava-ui-primary);
    --xava-ui-focus-ring-inset: inset 0 0 0 2px var(--xava-ui-primary);
    --xava-ui-focus-outline: 2px solid var(--xava-ui-primary);
    --xava-ui-focus-outline-offset: 2px;

    --xava-ui-shadow-sm: 0 .35rem 1rem rgba(0, 0, 0, .16);
    --xava-ui-shadow-lg: 0 1.25rem 3rem rgba(0, 0, 0, .34);
    --xava-ui-transition: 160ms ease;
    --xava-ui-page-max-width: none;
}

/* White on the light theme's darker primary; the dark theme keeps the near-black. */
@media (prefers-color-scheme: light) {
    :root {
        --xava-ui-on-primary: #ffffff;
    }
}

:root[data-theme="light"] {
    --xava-ui-on-primary: #ffffff;
}

:root[data-theme="dark"] {
    --xava-ui-on-primary: #08111f;
}

/* Shadows read as depth on a light ground and as murk on a dark one, so the
   light theme carries a little more of them. */
@media (prefers-color-scheme: light) {
    :root {
        --xava-ui-shadow-sm: 0 .35rem 1rem rgba(19, 27, 38, .08);
        --xava-ui-shadow-lg: 0 1.25rem 3rem rgba(19, 27, 38, .14);
    }
}

:root[data-theme="light"] {
    --xava-ui-shadow-sm: 0 .35rem 1rem rgba(19, 27, 38, .08);
    --xava-ui-shadow-lg: 0 1.25rem 3rem rgba(19, 27, 38, .14);
}

:root[data-theme="dark"] {
    --xava-ui-shadow-sm: 0 .35rem 1rem rgba(0, 0, 0, .16);
    --xava-ui-shadow-lg: 0 1.25rem 3rem rgba(0, 0, 0, .34);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --xava-ui-transition: 0ms;
        --surux-transition: 0ms;
    }
}