/* Design tokens for the soft-glass system (docs/ui-redesign.md).
   Dark only: the backdrop is black in the top-left fading into the
   signed-in user's chat color at the bottom right, and the accent
   tokens follow the same hue (themes.css). */

/* --bg-tint, --bg-deep and --accent are registered as animatable
   <color> properties so switching data-hue fades the gradient over
   0.5s. Initial values are hue 5 (Obsidian Violet, the default). */
@property --bg-tint {
    syntax: "<color>";
    inherits: true;
    initial-value: #4b2bbf;
}

@property --bg-deep {
    syntax: "<color>";
    inherits: true;
    initial-value: #120a33;
}

@property --accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #b9a6ff;
}

:root {
    color-scheme: dark;
    /* backdrop */
    --bg-black: #000000;
    --bg-deep: #120a33;      /* far corner of the linear gradient */
    --bg-tint: #4b2bbf;      /* radial glow, bottom right */
    /* text */
    --text: #f1f1f5;
    --text-muted: #a3a4b2;
    --text-faint: #8d8e9c;
    /* glass */
    --glass: rgba(255,255,255,.055);
    /* Menus, roster and dialogs: the hue's deep color at 90%, so the
       panels follow the user's site color (hue 5 ≈ the old violet). */
    --glass-strong: color-mix(in srgb, var(--bg-deep) 90%, transparent);
    --glass-edge: rgba(255,255,255,.09);
    --glass-blur: blur(18px) saturate(140%);
    --input-bg: rgba(0,0,0,.35);
    /* accent */
    --accent: #b9a6ff;
    --on-accent: #160d3d;
    --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
    /* semantic */
    --danger: #ff6b7f;  /* also the Live badge */
    --ok: #6fe3a5;
    --warn: #ffc46b;
    /* chat name colors (index stored per user); used for other people's names */
    --c1: #7fd1ff; --c2: #ff9ec7; --c3: #ffd27a; --c4: #8ef0b8;
    --c5: #b9a6ff; --c6: #ffad85; --c7: #72e8da; --c8: #f3a0ff;
    /* shape */
    --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
    /* type */
    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    /* Hue switch fades the gradient and the accent (see themes.css). */
    transition: --bg-tint .5s, --bg-deep .5s, --accent .5s;
}

body {
    background:
        radial-gradient(70% 80% at 100% 100%, var(--bg-tint) 0%, transparent 70%),
        linear-gradient(150deg, var(--bg-black) 0%, #030304 45%, var(--bg-deep) 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        transition: none;
    }
}