/*
 * UniSpace redesign — design tokens.
 *
 * This is the only source of visual constants for the redesigned interface.
 * The legacy aliases at the end keep old renderers visually coherent while
 * their markup is migrated component by component.
 */

:root {
    color-scheme: dark;

    /* Typography */
    --uni-font-body: "Onest", "Segoe UI", sans-serif;
    --uni-font-display: "Unbounded", "Onest", "Segoe UI", sans-serif;
    --uni-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --uni-text-xs: 0.6875rem;
    --uni-text-sm: 0.75rem;
    --uni-text-md: 0.875rem;
    --uni-text-lg: 1rem;
    --uni-text-xl: 1.25rem;
    --uni-text-2xl: clamp(1.45rem, 2vw, 1.8rem);
    --uni-leading-tight: 1.2;
    --uni-leading-normal: 1.5;
    --uni-leading-relaxed: 1.65;

    /* Canvas and surfaces */
    --uni-canvas: #050914;
    --uni-canvas-raised: #08101e;
    --uni-sidebar-bg: rgba(6, 12, 24, 0.94);
    --uni-surface-1: rgba(12, 21, 38, 0.86);
    --uni-surface-2: rgba(17, 28, 48, 0.88);
    --uni-surface-3: rgba(24, 37, 61, 0.84);
    --uni-surface-solid: #101a2c;
    --uni-surface-hover: rgba(125, 146, 184, 0.10);
    --uni-surface-active: rgba(132, 101, 255, 0.15);
    --uni-backdrop: rgba(2, 5, 12, 0.72);
    --uni-nebula-image: url("/static/assets/unispace-nebula-v2.png");

    /* Text */
    --uni-text-1: #f5f7fc;
    --uni-text-2: #c2ccdc;
    --uni-text-3: #8796ad;
    --uni-text-4: #637188;
    --uni-text-inverse: #07101e;

    /* Accent and semantic colors */
    --uni-accent: #8f75ff;
    --uni-accent-rgb: 143, 117, 255;
    --uni-accent-strong: #a18cff;
    --uni-accent-soft: rgba(var(--uni-accent-rgb), 0.14);
    --uni-accent-muted: rgba(var(--uni-accent-rgb), 0.08);
    --uni-cyan: #45d5df;
    --uni-cyan-rgb: 69, 213, 223;
    --uni-pink: #e66aaa;
    --uni-green: #55d6a5;
    --uni-amber: #f0b967;
    --uni-red: #ff7796;
    --uni-blue: #67a8ff;

    /* Borders */
    --uni-line-soft: rgba(157, 177, 214, 0.09);
    --uni-line: rgba(157, 177, 214, 0.15);
    --uni-line-strong: rgba(157, 177, 214, 0.24);
    --uni-line-accent: rgba(var(--uni-accent-rgb), 0.38);

    /* Spacing */
    --uni-space-1: 0.25rem;
    --uni-space-2: 0.5rem;
    --uni-space-3: 0.75rem;
    --uni-space-4: 1rem;
    --uni-space-5: 1.25rem;
    --uni-space-6: 1.5rem;
    --uni-space-8: 2rem;
    --uni-space-10: 2.5rem;
    --uni-space-12: 3rem;

    /* Geometry */
    --uni-sidebar-width: 220px;
    --uni-sidebar-compact: 80px;
    --uni-mobile-nav-height: 68px;
    --uni-content-max: 1440px;
    --uni-feed-max: 860px;
    --uni-control-height-sm: 34px;
    --uni-control-height: 40px;
    --uni-control-height-lg: 44px;
    --uni-radius-xs: 7px;
    --uni-radius-sm: 10px;
    --uni-radius-md: 13px;
    --uni-radius-lg: 17px;
    --uni-radius-xl: 22px;
    --uni-radius-pill: 999px;

    /* Elevation */
    --uni-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --uni-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.20);
    --uni-shadow-md: 0 18px 46px rgba(0, 0, 0, 0.28);
    --uni-shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.44);
    --uni-focus-ring: 0 0 0 3px rgba(var(--uni-accent-rgb), 0.20);

    /* Motion */
    --uni-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --uni-transition-fast: 130ms ease;
    --uni-transition: 190ms var(--uni-ease);

    /* Layering */
    --uni-z-base: 1;
    --uni-z-sticky: 30;
    --uni-z-nav: 60;
    --uni-z-popover: 120;
    --uni-z-drawer: 180;
    --uni-z-modal: 300;
    --uni-z-toast: 400;

    /* Legacy aliases. No component should introduce another token family. */
    --bg: var(--uni-canvas);
    --bg2: var(--uni-canvas-raised);
    --bg3: var(--uni-surface-solid);
    --surface: var(--uni-surface-1);
    --surface2: var(--uni-surface-2);
    --border: var(--uni-line);
    --accent: var(--uni-accent);
    --accent2: var(--uni-pink);
    --accent3: var(--uni-cyan);
    --text: var(--uni-text-1);
    --text2: var(--uni-text-2);
    --text3: var(--uni-text-3);
    --radius: var(--uni-radius-lg);
    --radius-sm: var(--uni-radius-sm);
    --sidebar-w: var(--uni-sidebar-width);
    --shadow: var(--uni-shadow-md);
    --font-head: var(--uni-font-display);
    --font-body: var(--uni-font-body);
    --glow-accent: rgba(var(--uni-accent-rgb), 0.22);
}

body.app-accent-violet {
    --uni-accent: #8f75ff;
    --uni-accent-rgb: 143, 117, 255;
    --uni-accent-strong: #a18cff;
}

body.app-accent-blue {
    --uni-accent: #629dff;
    --uni-accent-rgb: 98, 157, 255;
    --uni-accent-strong: #83b2ff;
}

body.app-accent-cyan {
    --uni-accent: #45d5df;
    --uni-accent-rgb: 69, 213, 223;
    --uni-accent-strong: #6be4eb;
}

body.app-accent-rose {
    --uni-accent: #e66aaa;
    --uni-accent-rgb: 230, 106, 170;
    --uni-accent-strong: #f084bc;
}

body.app-accent-amber {
    --uni-accent: #e8ad56;
    --uni-accent-rgb: 232, 173, 86;
    --uni-accent-strong: #f1c276;
}

body.app-accent-emerald {
    --uni-accent: #55d6a5;
    --uni-accent-rgb: 85, 214, 165;
    --uni-accent-strong: #76e3ba;
}

body.compact-ui {
    --uni-control-height-sm: 32px;
    --uni-control-height: 36px;
    --uni-control-height-lg: 40px;
    --uni-space-5: 1rem;
    --uni-space-6: 1.25rem;
}

/*
 * Wide workstations are the primary UniSpace canvas.  The former desktop
 * values were tuned around a 1280px preview, which left Full HD and 2K
 * screens looking like a scaled-down mock-up in the middle of the window.
 * Keep laptop density intact and give larger displays their own readable
 * type, controls and working widths.
 */
@media (min-width: 1600px) {
    :root {
        --uni-text-xs: 0.75rem;
        --uni-text-sm: 0.8125rem;
        --uni-text-md: 0.9375rem;
        --uni-text-lg: 1.0625rem;
        --uni-text-xl: 1.375rem;
        --uni-text-2xl: clamp(1.65rem, 1.55vw, 2rem);
        --uni-sidebar-width: 244px;
        --uni-sidebar-compact: 88px;
        --uni-content-max: 2120px;
        --uni-feed-max: 1040px;
        --uni-control-height-sm: 36px;
        --uni-control-height: 42px;
        --uni-control-height-lg: 46px;
    }
}

@media (min-width: 2300px) {
    :root {
        --uni-sidebar-width: 260px;
        --uni-sidebar-compact: 92px;
        --uni-feed-max: 1160px;
        --uni-text-2xl: 2rem;
    }
}