/* =========================================================
   Design tokens for the Horizons staff panel.

   Taken from the Beyond Horizons logo: a deep-space night with violet-to-sky
   nebula gradients. Dark is the home theme. Light ("dawn") follows the
   system unless a theme is picked in the panel, which sets data-theme on
   <html> (see js/theme-init.js).
   ========================================================= */

:root {
    --bg: #060716;
    --bg-2: #0b0d24;
    --surface: rgba(38, 40, 98, .34);
    --surface-solid: #151737;
    --card-bg: rgba(44, 46, 104, .5);
    --surface-2: rgba(255, 255, 255, .05);
    --surface-3: rgba(255, 255, 255, .09);
    --field: rgba(8, 9, 28, .45);
    --border: rgba(190, 195, 255, .13);
    --border-strong: rgba(190, 195, 255, .24);
    --hairline: linear-gradient(135deg, rgba(210, 195, 255, .55), rgba(140, 200, 255, .12) 35%, rgba(255, 255, 255, .03) 60%, rgba(180, 160, 255, .32));

    /* Glass: a frosted pane over the nebula. A sheen that fades down the pane,
       a lit top edge, and a blur that pulls colour through from behind. */
    --glass: linear-gradient(155deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .025) 38%, rgba(255, 255, 255, .012) 64%, rgba(255, 255, 255, .045) 100%);
    --glass-edge: rgba(255, 255, 255, .1);
    --glass-blur: blur(22px) saturate(1.7);
    --overlay: rgba(17, 19, 52, .78);
    --text: #eef0ff;
    --muted: #9aa0cc;
    --faint: #6b7099;

    --violet: #a78bfa;
    --sky: #7cc4fa;
    --pink: #f0a6e8;
    --gold: #f7c95c;
    --accent: #9d8cff;
    --accent-rgb: 157, 140, 255;
    --nebula: linear-gradient(120deg, #8b5cf6 0%, #6d8bff 50%, #59c3f5 100%);
    --nebula-soft: linear-gradient(120deg, rgba(139, 92, 246, .22), rgba(89, 195, 245, .12));
    --sidebar: rgba(14, 15, 44, .4);
    --topbar: rgba(8, 9, 26, .36);

    --ok: #5ee6a0;
    --warn: #f7c95c;
    --danger: #ff7a8a;

    --radius-lg: 20px;
    --radius: 16px;
    --radius-sm: 11px;
    --shadow-sm: 0 2px 8px rgba(3, 4, 18, .35);
    --shadow: 0 18px 50px rgba(3, 4, 18, .55);
    --shadow-lift: 0 18px 40px rgba(3, 4, 18, .5), 0 0 0 1px rgba(var(--accent-rgb), .18);
    --glow: 0 0 0 1px rgba(var(--accent-rgb), .4), 0 8px 30px rgba(120, 100, 255, .28);
    --ring: 0 0 0 3px rgba(var(--accent-rgb), .3);
    --stars: .9;
    --nebula-glow: 1;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Headings and the wordmark share the body face; change these two lines
       (and the font link in index.html) to swap them for the website's font. */
    --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --brand: var(--display);
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

    /* Motion: one set of curves so everything moves the same way. */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: .14s;
    --t: .24s;
    --t-slow: .45s;

    --sidebar-w: 264px;
    --sidebar-rail: 76px;

    color-scheme: dark;
}

/* The light palette, applied for a light system theme unless dark was picked,
   and always when light was picked. Kept in one place via a shared block. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f1f2fb; --bg-2: #e8eafa;
        --surface: rgba(255, 255, 255, .5); --surface-solid: #ffffff; --card-bg: rgba(255, 255, 255, .72);
    --glass: linear-gradient(155deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .55)); --glass-edge: rgba(255, 255, 255, .95);
    --glass-blur: blur(22px) saturate(1.5); --overlay: rgba(255, 255, 255, .82);
        --surface-2: rgba(70, 70, 160, .045); --surface-3: rgba(70, 70, 160, .09);
        --field: rgba(255, 255, 255, .7); --border: rgba(80, 80, 170, .13); --border-strong: rgba(80, 80, 170, .25);
        --hairline: linear-gradient(135deg, rgba(120, 100, 240, .3), rgba(80, 80, 170, .08) 45%, rgba(80, 160, 230, .18));
        --text: #1b1c38; --muted: #5b5f8c; --faint: #8a8db3;
        --accent: #6c55f0; --accent-rgb: 108, 85, 240; --violet: #7c5cf0; --sky: #2f8fd8; --pink: #c35cbc; --gold: #b7860f;
        --ok: #149a5c; --warn: #b7860f; --danger: #d93a55;
        --nebula-soft: linear-gradient(120deg, rgba(139, 92, 246, .13), rgba(89, 195, 245, .09));
        --sidebar: rgba(255, 255, 255, .45); --topbar: rgba(241, 242, 251, .45);
        --shadow-sm: 0 2px 8px rgba(40, 40, 110, .08); --shadow: 0 18px 50px rgba(40, 40, 110, .14);
        --shadow-lift: 0 16px 36px rgba(40, 40, 110, .14), 0 0 0 1px rgba(var(--accent-rgb), .16);
        --glow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 8px 26px rgba(108, 85, 240, .16);
        --stars: 0; --nebula-glow: .75;
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f1f2fb; --bg-2: #e8eafa;
    --surface: rgba(255, 255, 255, .5); --surface-solid: #ffffff; --card-bg: rgba(255, 255, 255, .72);
    --glass: linear-gradient(155deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .55)); --glass-edge: rgba(255, 255, 255, .95);
    --glass-blur: blur(22px) saturate(1.5); --overlay: rgba(255, 255, 255, .82);
    --surface-2: rgba(70, 70, 160, .045); --surface-3: rgba(70, 70, 160, .09);
    --field: rgba(255, 255, 255, .7); --border: rgba(80, 80, 170, .13); --border-strong: rgba(80, 80, 170, .25);
    --hairline: linear-gradient(135deg, rgba(120, 100, 240, .3), rgba(80, 80, 170, .08) 45%, rgba(80, 160, 230, .18));
    --text: #1b1c38; --muted: #5b5f8c; --faint: #8a8db3;
    --accent: #6c55f0; --accent-rgb: 108, 85, 240; --violet: #7c5cf0; --sky: #2f8fd8; --pink: #c35cbc; --gold: #b7860f;
    --ok: #149a5c; --warn: #b7860f; --danger: #d93a55;
    --nebula-soft: linear-gradient(120deg, rgba(139, 92, 246, .13), rgba(89, 195, 245, .09));
    --sidebar: rgba(255, 255, 255, .45); --topbar: rgba(241, 242, 251, .45);
    --shadow-sm: 0 2px 8px rgba(40, 40, 110, .08); --shadow: 0 18px 50px rgba(40, 40, 110, .14);
    --shadow-lift: 0 16px 36px rgba(40, 40, 110, .14), 0 0 0 1px rgba(var(--accent-rgb), .16);
    --glow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 8px 26px rgba(108, 85, 240, .16);
    --stars: 0; --nebula-glow: .75;
    color-scheme: light;
}

/* People who ask the system for less transparency get solid panes. */
@media (prefers-reduced-transparency: reduce) {
    :root { --surface: var(--surface-solid); --card-bg: var(--surface-solid); --overlay: var(--surface-solid); --sidebar: var(--bg-2); --topbar: var(--bg); --glass-blur: none; }
}