/*
 * ============================================================================
 *  GOREKTHRON DESIGN SYSTEM v1.0
 *  Single source of truth for tokens, typography, and primitive components.
 *  Spec ref: GoreKthron Platform Grandmaster Design Specification v3.0 §1
 *
 *  USAGE
 *    <link rel="stylesheet" href="gorekthron-design-system.css" />
 *  or, in any other CSS file:
 *    @import url('./gorekthron-design-system.css');
 *
 *  All design tokens live as CSS custom properties on :root. Any page can
 *  consume them with var(--gore-*). Themes flip via [data-theme="..."] on
 *  the document element. Backwards-compatibility aliases at the bottom keep
 *  the legacy style.css token names (--bg-void, --accent-violet, ...) alive.
 * ============================================================================
 */

/* -------------------------------------------------------------------------- */
/*  FONTS                                                                     */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------- */
/*  TOKENS  (spec §1.1 – §1.6)                                                */
/* -------------------------------------------------------------------------- */
:root {
    /* ── Brand surfaces ────────────────────────────────────────────────── */
    --gore-black:        #080810;
    --gore-surface:      #0D0D1A;
    --gore-surface-2:    #12121F;
    --gore-border:       #1E1E3A;
    --gore-border-glow:  #2D2D5E;

    /* ── Accent: Purple (primary CTA) ───────────────────────────────────── */
    --gore-purple:       #7B2FFF;
    --gore-purple-mid:   #9B5FFF;
    --gore-purple-light: #BF8FFF;
    --gore-purple-dim:   rgba(123, 47, 255, 0.15);

    /* ── Accent: Gold (premium / highlight) ────────────────────────────── */
    --gore-gold:         #FFB800;
    --gore-gold-dim:     rgba(255, 184, 0, 0.12);

    /* ── Status ─────────────────────────────────────────────────────────── */
    --gore-green:        #00E676;
    --gore-red:          #FF1744;
    --gore-yellow:       #FFD740;
    --gore-blue:         #40C4FF;

    /* ── Text scale ─────────────────────────────────────────────────────── */
    --text-primary:      #F0F0FF;
    --text-secondary:    #8888AA;
    --text-muted:        #4A4A6A;
    --text-disabled:     #2A2A4A;

    /* ── Font stack ─────────────────────────────────────────────────────── */
    --font-display:      'Press Start 2P', monospace;
    --font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Type scale ─────────────────────────────────────────────────────── */
    --text-2xs:  0.625rem;   /* 10 */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.25rem;    /* 20 */
    --text-2xl:  1.5rem;     /* 24 */
    --text-3xl:  1.875rem;   /* 30 */
    --text-4xl:  2.25rem;    /* 36 */
    --text-hero: 3.5rem;     /* 56 */

    /* ── Line height & letter spacing ──────────────────────────────────── */
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.75;
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-widest:  0.15em;

    /* ── Spacing (8px grid) ─────────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32:  128px;

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows & glows ────────────────────────────────────────────────── */
    --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated:    0 8px 48px rgba(0, 0, 0, 0.6);
    --glow-purple-sm:     0 0 12px rgba(123, 47, 255, 0.4);
    --glow-purple-md:     0 0 24px rgba(123, 47, 255, 0.5),
                          0 0 48px rgba(123, 47, 255, 0.2);
    --glow-purple-lg:     0 0 48px rgba(123, 47, 255, 0.6),
                          0 0 96px rgba(123, 47, 255, 0.3),
                          0 0 192px rgba(123, 47, 255, 0.1);
    --glow-gold:          0 0 20px rgba(255, 184, 0, 0.5),
                          0 0 40px rgba(255, 184, 0, 0.2);
    --glow-red:           0 0 16px rgba(255, 23, 68, 0.5);
    --glow-green:         0 0 12px rgba(0, 230, 118, 0.4);

    /* ── Animation tokens ───────────────────────────────────────────────── */
    --dur-instant:  80ms;
    --dur-fast:     150ms;
    --dur-normal:   250ms;
    --dur-slow:     400ms;
    --dur-slower:   600ms;
    --dur-page:     800ms;

    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-linear:  linear;

    /* ── Z-index scale ──────────────────────────────────────────────────── */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    900;
    --z-modal:     1000;
    --z-toast:     1100;
    --z-cursor:   99999;

    color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/*  THEMES  (spec §2.7) — apply via <html data-theme="…"> or any container   */
/* -------------------------------------------------------------------------- */
[data-theme="void-purple"] {
    --gore-purple:       #7B2FFF;
    --gore-purple-mid:   #9B5FFF;
    --gore-purple-light: #BF8FFF;
    --gore-purple-dim:   rgba(123, 47, 255, 0.15);
}
[data-theme="blood-red"] {
    --gore-purple:       #FF1744;
    --gore-purple-mid:   #FF4F6D;
    --gore-purple-light: #FF6D6D;
    --gore-purple-dim:   rgba(255, 23, 68, 0.15);
    --glow-purple-sm:    0 0 12px rgba(255, 23, 68, 0.4);
    --glow-purple-md:    0 0 24px rgba(255, 23, 68, 0.5), 0 0 48px rgba(255, 23, 68, 0.2);
}
[data-theme="ocean-blue"] {
    --gore-purple:       #0077FF;
    --gore-purple-mid:   #2A93FF;
    --gore-purple-light: #40C4FF;
    --gore-purple-dim:   rgba(0, 119, 255, 0.15);
    --glow-purple-sm:    0 0 12px rgba(0, 119, 255, 0.4);
    --glow-purple-md:    0 0 24px rgba(0, 119, 255, 0.5), 0 0 48px rgba(0, 119, 255, 0.2);
}
[data-theme="toxic-green"] {
    --gore-purple:       #00C853;
    --gore-purple-mid:   #2DDC78;
    --gore-purple-light: #69F0AE;
    --gore-purple-dim:   rgba(0, 200, 83, 0.15);
    --glow-purple-sm:    0 0 12px rgba(0, 200, 83, 0.4);
    --glow-purple-md:    0 0 24px rgba(0, 200, 83, 0.5), 0 0 48px rgba(0, 200, 83, 0.2);
}
[data-theme="solar-gold"] {
    --gore-purple:       #FFB800;
    --gore-purple-mid:   #FFCC44;
    --gore-purple-light: #FFE066;
    --gore-purple-dim:   rgba(255, 184, 0, 0.15);
    --glow-purple-sm:    0 0 12px rgba(255, 184, 0, 0.4);
    --glow-purple-md:    0 0 24px rgba(255, 184, 0, 0.5), 0 0 48px rgba(255, 184, 0, 0.2);
}
[data-theme="arctic-white"] {
    --gore-purple:       #E0E0FF;
    --gore-purple-mid:   #EFEFFF;
    --gore-purple-light: #FFFFFF;
    --gore-purple-dim:   rgba(224, 224, 255, 0.15);
    --glow-purple-sm:    0 0 12px rgba(224, 224, 255, 0.4);
    --glow-purple-md:    0 0 24px rgba(224, 224, 255, 0.5), 0 0 48px rgba(224, 224, 255, 0.2);
}
[data-theme="cherry-blossom"] {
    --gore-purple:       #FF4081;
    --gore-purple-mid:   #FF6098;
    --gore-purple-light: #FF80AB;
    --gore-purple-dim:   rgba(255, 64, 129, 0.15);
    --glow-purple-sm:    0 0 12px rgba(255, 64, 129, 0.4);
    --glow-purple-md:    0 0 24px rgba(255, 64, 129, 0.5), 0 0 48px rgba(255, 64, 129, 0.2);
}

/* -------------------------------------------------------------------------- */
/*  GLOBAL RESET (minimal — does not interfere with existing pages)           */
/* -------------------------------------------------------------------------- */
.gs-scope,
.gs-scope *,
.gs-scope *::before,
.gs-scope *::after {
    box-sizing: border-box;
}

.gs-scope {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--gore-black);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern', 'liga', 'cv11';
}

/* -------------------------------------------------------------------------- */
/*  TYPOGRAPHY UTILITIES                                                      */
/* -------------------------------------------------------------------------- */
.gore-display {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-tight);
    text-transform: uppercase;
}
.gore-h1 { font-family: var(--font-display); font-size: var(--text-hero); letter-spacing: var(--tracking-wide); line-height: var(--leading-tight); color: #fff; }
.gore-h2 { font-family: var(--font-body); font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-tight); color: var(--text-primary); }
.gore-h3 { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); color: var(--text-primary); }
.gore-h4 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-tight); color: var(--text-primary); }
.gore-body  { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); color: var(--text-secondary); }
.gore-small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.gore-meta  { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.gore-mono  { font-family: var(--font-mono); font-size: var(--text-sm); }

.gore-text-primary   { color: var(--text-primary); }
.gore-text-secondary { color: var(--text-secondary); }
.gore-text-muted     { color: var(--text-muted); }
.gore-text-purple    { color: var(--gore-purple-light); }
.gore-text-gold      { color: var(--gore-gold); }
.gore-text-green     { color: var(--gore-green); }
.gore-text-red       { color: var(--gore-red); }

/* -------------------------------------------------------------------------- */
/*  GLASSMORPHISM (spec §1.7)                                                 */
/* -------------------------------------------------------------------------- */
.gore-glass {
    background: rgba(13, 13, 26, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(123, 47, 255, 0.18);
    border-top-color: rgba(123, 47, 255, 0.35);
}
.gore-glass-elevated {
    background: rgba(18, 18, 31, 0.88);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid rgba(123, 47, 255, 0.22);
    box-shadow: var(--shadow-elevated), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------- */
/*  CARD                                                                      */
/* -------------------------------------------------------------------------- */
.gore-card {
    background: var(--gore-surface);
    border: 1px solid var(--gore-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: transform var(--dur-normal) var(--ease-out),
                border-color var(--dur-normal),
                box-shadow var(--dur-normal);
}
.gore-card:hover {
    border-color: var(--gore-border-glow);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.gore-card--accent {
    border-color: var(--gore-purple);
    box-shadow: var(--glow-purple-sm);
}
.gore-card--gold {
    border-color: var(--gore-gold);
    box-shadow: var(--glow-gold);
    background: linear-gradient(160deg, rgba(255, 184, 0, 0.08) 0%, var(--gore-surface) 60%);
}

/* -------------------------------------------------------------------------- */
/*  BUTTON                                                                    */
/* -------------------------------------------------------------------------- */
.gore-btn {
    --btn-bg:     transparent;
    --btn-color:  var(--text-primary);
    --btn-border: var(--gore-border);
    --btn-glow:   none;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-6);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast),
                border-color var(--dur-fast),
                box-shadow var(--dur-fast),
                color var(--dur-fast);
    box-shadow: var(--btn-glow);
}
.gore-btn:hover { transform: translateY(-1px); }
.gore-btn:active { transform: translateY(0); }
.gore-btn:disabled,
.gore-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Variants */
.gore-btn--primary {
    --btn-bg: var(--gore-purple);
    --btn-color: #fff;
    --btn-border: var(--gore-purple);
    --btn-glow: var(--glow-purple-sm);
}
.gore-btn--primary:hover {
    --btn-bg: var(--gore-purple-mid);
    --btn-glow: var(--glow-purple-md);
}
.gore-btn--gold {
    --btn-bg: var(--gore-gold);
    --btn-color: #1A1200;
    --btn-border: var(--gore-gold);
    --btn-glow: var(--glow-gold);
}
.gore-btn--gold:hover {
    --btn-bg: #FFCC44;
}
.gore-btn--outline {
    --btn-bg: transparent;
    --btn-color: var(--gore-purple-light);
    --btn-border: var(--gore-purple);
}
.gore-btn--outline:hover {
    --btn-bg: var(--gore-purple-dim);
    --btn-glow: var(--glow-purple-sm);
}
.gore-btn--ghost {
    --btn-border: transparent;
    --btn-color: var(--text-secondary);
}
.gore-btn--ghost:hover {
    --btn-bg: var(--gore-surface-2);
    --btn-color: var(--text-primary);
}
.gore-btn--danger {
    --btn-bg: var(--gore-red);
    --btn-color: #fff;
    --btn-border: var(--gore-red);
    --btn-glow: var(--glow-red);
}

/* Sizes */
.gore-btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.gore-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: var(--text-base); }
.gore-btn--block { width: 100%; }

/* Ripple (spec §6.4) */
.gore-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    animation: gore-ripple-expand 500ms var(--ease-out) forwards;
}
@keyframes gore-ripple-expand {
    from { transform: scale(0); opacity: 0.3; }
    to   { transform: scale(4); opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/*  INPUTS                                                                    */
/* -------------------------------------------------------------------------- */
.gore-input,
.gore-textarea,
.gore-select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gore-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.gore-input::placeholder,
.gore-textarea::placeholder {
    color: var(--text-muted);
}
.gore-input:focus,
.gore-textarea:focus,
.gore-select:focus {
    border-color: var(--gore-purple);
    box-shadow: var(--glow-purple-sm);
    outline: none;
    background: rgba(255, 255, 255, 0.06);
}
.gore-textarea { min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; }

/* Search input variant — left icon padding */
.gore-input--search { padding-left: var(--space-10); }

/* -------------------------------------------------------------------------- */
/*  TOGGLE SWITCH (spec §2.5)                                                 */
/* -------------------------------------------------------------------------- */
.gore-toggle {
    --toggle-w: 40px;
    --toggle-h: 22px;
    position: relative;
    display: inline-block;
    width: var(--toggle-w);
    height: var(--toggle-h);
    flex-shrink: 0;
}
.gore-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.gore-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--gore-border);
    border-radius: calc(var(--toggle-h) / 2);
    cursor: pointer;
    transition: background var(--dur-normal), box-shadow var(--dur-normal);
}
.gore-toggle__thumb {
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(var(--toggle-h) - 4px);
    height: calc(var(--toggle-h) - 4px);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: left var(--dur-normal) var(--ease-spring);
}
.gore-toggle input:checked ~ .gore-toggle__track {
    background: var(--gore-purple);
    box-shadow: var(--glow-purple-sm);
}
.gore-toggle input:checked ~ .gore-toggle__track .gore-toggle__thumb,
.gore-toggle input:checked + .gore-toggle__track .gore-toggle__thumb {
    left: calc(var(--toggle-w) - var(--toggle-h) + 2px);
}
.gore-toggle--lg { --toggle-w: 52px; --toggle-h: 28px; }

/* -------------------------------------------------------------------------- */
/*  SLIDER                                                                    */
/* -------------------------------------------------------------------------- */
.gore-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--gore-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background-image: linear-gradient(var(--gore-purple), var(--gore-purple));
    background-repeat: no-repeat;
}
.gore-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--glow-purple-sm);
    cursor: grab;
    transition: transform var(--dur-fast);
}
.gore-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.gore-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--glow-purple-sm);
    cursor: grab;
}

/* -------------------------------------------------------------------------- */
/*  BADGES & PILLS                                                            */
/* -------------------------------------------------------------------------- */
.gore-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: normal;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    line-height: 1;
}
.gore-badge--admin    { background: var(--gore-red);     color: #fff;    box-shadow: var(--glow-red); }
.gore-badge--legend   { background: var(--gore-gold);    color: #1A1200; box-shadow: var(--glow-gold); }
.gore-badge--pro      { background: var(--gore-purple);  color: #fff;    box-shadow: var(--glow-purple-sm); }
.gore-badge--user     { background: var(--gore-border);  color: var(--text-secondary); }
.gore-badge--success  { background: var(--gore-green);   color: #003a1d; }
.gore-badge--warning  { background: var(--gore-yellow);  color: #3a2a00; }

.gore-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--gore-surface-2);
    border: 1px solid var(--gore-border);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.gore-pill:hover { border-color: var(--gore-purple); color: var(--text-primary); }

/* -------------------------------------------------------------------------- */
/*  ROLE CHIPS  (cabinet user card – spec §3.3)                               */
/* -------------------------------------------------------------------------- */
.gore-role {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
}
.gore-role--admin  { background: var(--gore-red);    color: #fff;    box-shadow: var(--glow-red); }
.gore-role--legend { background: var(--gore-gold);   color: #1A1200; box-shadow: var(--glow-gold); }
.gore-role--pro    { background: var(--gore-purple); color: #fff;    box-shadow: var(--glow-purple-sm); }
.gore-role--user   { background: var(--gore-border); color: var(--text-secondary); }

/* -------------------------------------------------------------------------- */
/*  STATUS DOT (online indicator – spec §3.7)                                 */
/* -------------------------------------------------------------------------- */
.gore-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gore-dot--online { background: var(--gore-green); box-shadow: var(--glow-green); animation: gore-pulse-dot 2s var(--ease-linear) infinite; }
.gore-dot--admin  { background: var(--gore-red);   box-shadow: var(--glow-red);   animation: gore-pulse-dot 2s var(--ease-linear) infinite; }
.gore-dot--idle   { background: var(--gore-yellow); }
.gore-dot--offline{ background: var(--gore-border); }
@keyframes gore-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
}

/* -------------------------------------------------------------------------- */
/*  TOAST  (spec §6.6)                                                        */
/* -------------------------------------------------------------------------- */
.gore-toast-stack {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast);
    max-width: 320px;
    pointer-events: none;
}
.gore-toast {
    background: var(--gore-surface-2);
    border: 1px solid var(--gore-border);
    border-left: 4px solid var(--gore-purple);
    border-radius: var(--radius-lg);
    padding: 14px var(--space-4);
    box-shadow: var(--shadow-elevated);
    color: var(--text-primary);
    font-size: var(--text-sm);
    pointer-events: auto;
    animation: gore-toast-in var(--dur-normal) var(--ease-out);
    position: relative;
}
.gore-toast--success { border-left-color: var(--gore-green); }
.gore-toast--error   { border-left-color: var(--gore-red); }
.gore-toast--info    { border-left-color: var(--gore-purple); }
.gore-toast--warning { border-left-color: var(--gore-yellow); }
.gore-toast__title  { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.gore-toast__body   { color: var(--text-secondary); font-size: var(--text-xs); }
.gore-toast__close  {
    position: absolute;
    top: 6px; right: 8px;
    width: 22px; height: 22px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; line-height: 1;
}
.gore-toast__close:hover { color: var(--text-primary); }
.gore-toast.is-leaving { animation: gore-toast-out var(--dur-fast) var(--ease-in) forwards; }
@keyframes gore-toast-in  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gore-toast-out { from { transform: translateX(0);    opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* -------------------------------------------------------------------------- */
/*  SKELETON  (spec §6.5)                                                     */
/* -------------------------------------------------------------------------- */
.gore-skeleton {
    background: linear-gradient(90deg,
        var(--gore-surface) 25%,
        var(--gore-surface-2) 50%,
        var(--gore-surface) 75%);
    background-size: 200% 100%;
    animation: gore-shimmer 1.5s var(--ease-linear) infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    pointer-events: none;
}
@keyframes gore-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200%  0; }
}
.gore-skeleton--text-sm  { height: 12px; width: 100%; }
.gore-skeleton--text-md  { height: 16px; width: 100%; }
.gore-skeleton--avatar   { width: 48px; height: 48px; border-radius: 50%; }
.gore-skeleton--card     { height: 120px; width: 100%; border-radius: var(--radius-xl); }

/* -------------------------------------------------------------------------- */
/*  DIVIDERS                                                                  */
/* -------------------------------------------------------------------------- */
.gore-divider          { height: 1px; background: var(--gore-border); border: 0; margin: var(--space-4) 0; }
.gore-divider--vertical{ width: 1px; height: 16px; background: var(--gore-border); display: inline-block; vertical-align: middle; margin: 0 var(--space-2); }

/* -------------------------------------------------------------------------- */
/*  NAVIGATION CHIP (used in cabinet nav – spec §3.2)                         */
/* -------------------------------------------------------------------------- */
.gore-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    background: var(--gore-surface-2);
    border: 1px solid var(--gore-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.gore-nav-chip__avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gore-purple), var(--gore-purple-mid));
    color: #fff;
    font-family: var(--font-display);
    font-size: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/*  AVATAR (cabinet)                                                          */
/* -------------------------------------------------------------------------- */
.gore-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gore-purple), var(--gore-purple-mid));
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--glow-purple-md);
    flex-shrink: 0;
}
.gore-avatar--sm { width: 32px; height: 32px; font-size: 10px; }
.gore-avatar--lg { width: 96px; height: 96px; font-size: 28px; }

/* -------------------------------------------------------------------------- */
/*  SCROLL-TRIGGERED ANIMATIONS  (spec §6.3)                                  */
/* -------------------------------------------------------------------------- */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slower) var(--ease-out),
                transform var(--dur-slower) var(--ease-out);
}
[data-animate].in-view { opacity: 1; transform: translateY(0); }

[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}
[data-animate-stagger].in-view > * { opacity: 1; transform: translateY(0); }
[data-animate-stagger].in-view > *:nth-child(1) { transition-delay:   0ms; }
[data-animate-stagger].in-view > *:nth-child(2) { transition-delay:  80ms; }
[data-animate-stagger].in-view > *:nth-child(3) { transition-delay: 160ms; }
[data-animate-stagger].in-view > *:nth-child(4) { transition-delay: 240ms; }
[data-animate-stagger].in-view > *:nth-child(5) { transition-delay: 320ms; }
[data-animate-stagger].in-view > *:nth-child(6) { transition-delay: 400ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-animate] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------- */
/*  CUSTOM CURSOR  (spec §6.1) — opt-in via .gs-cursor on <html>             */
/* -------------------------------------------------------------------------- */
.gs-cursor *,
.gs-cursor *::before,
.gs-cursor *::after { cursor: none !important; }
.gs-cursor-dot {
    position: fixed;
    width: 6px; height: 6px;
    background: var(--gore-purple);
    border-radius: 50%;
    z-index: var(--z-cursor);
    transform: translate(-50%, -50%);
    transition: width var(--dur-fast), height var(--dur-fast), background var(--dur-fast);
    pointer-events: none;
    will-change: transform;
}
.gs-cursor-ring {
    position: fixed;
    width: 32px; height: 32px;
    border: 1.5px solid rgba(123, 47, 255, 0.5);
    border-radius: 50%;
    z-index: calc(var(--z-cursor) - 1);
    transform: translate(-50%, -50%);
    transition: width var(--dur-normal) var(--ease-out),
                height var(--dur-normal) var(--ease-out),
                border-color var(--dur-normal),
                transform 80ms;
    pointer-events: none;
    will-change: transform;
}
.gs-cursor-dot.is-clicking  { width: 10px; height: 10px; }
.gs-cursor-ring.is-clicking { width: 20px; height: 20px; }
.gs-cursor-ring.is-hovering { width: 48px; height: 48px; border-color: var(--gore-purple); }
@media (hover: none) {
    .gs-cursor-dot, .gs-cursor-ring { display: none; }
    .gs-cursor *, .gs-cursor *::before, .gs-cursor *::after { cursor: auto !important; }
}

/* -------------------------------------------------------------------------- */
/*  RESPONSIVE BREAKPOINTS (spec §7.1) — utility hooks                        */
/* -------------------------------------------------------------------------- */
.gore-hide-mobile  { display: initial; }
.gore-only-mobile  { display: none;    }
@media (max-width: 767px) {
    .gore-hide-mobile { display: none !important; }
    .gore-only-mobile { display: initial !important; }
    .gore-h1 { font-size: var(--text-3xl); }
}

/* -------------------------------------------------------------------------- */
/*  BACKWARDS-COMPATIBILITY ALIASES                                           */
/*  Maps the legacy style.css token names to the new --gore-* tokens. Old     */
/*  pages keep working unchanged once they import this file.                  */
/* -------------------------------------------------------------------------- */
:root {
    /* legacy bg */
    --bg-void:       var(--gore-black);
    --bg-surface:    var(--gore-surface);
    --bg-elevated:   var(--gore-surface-2);
    --bg-glass:      rgba(255, 255, 255, 0.04);
    --bg-primary:    var(--gore-black);
    --bg-secondary:  var(--gore-surface);
    --bg-card:       rgba(15, 15, 25, 0.8);

    /* legacy violet/purple variants */
    --accent-violet:        var(--gore-purple);
    --accent-violet-dim:    var(--gore-purple-mid);
    --accent-violet-glow:   rgba(123, 47, 255, 0.25);
    --purple-deep:          #5B1A7A;
    --purple:               var(--gore-purple);
    --purple-bright:        var(--gore-purple-mid);
    --purple-neon:          var(--gore-purple-light);
    --purple-glow:          var(--gore-purple-light);

    /* legacy accents */
    --accent-gold:          var(--gore-gold);
    --accent-cyan:          var(--gore-blue);

    /* legacy text */
    --text-display:         var(--text-primary);
    --text-body:            var(--text-secondary);
    --text-mute:            var(--text-muted);

    /* legacy easings */
    --ease-out-expo:        var(--ease-out);
    --ease-in-out-quart:    cubic-bezier(0.76, 0, 0.24, 1);
    --spring:               var(--ease-spring);

    /* legacy gradients & glass */
    --gradient-main:        linear-gradient(135deg, var(--gore-purple), var(--gore-purple-mid), var(--gore-purple-light));
    --gradient-card:        linear-gradient(145deg, rgba(123, 47, 255, 0.3), rgba(191, 143, 255, 0.1));
    --glass-bg:             rgba(13, 13, 26, 0.72);
    --glass-border:         rgba(123, 47, 255, 0.18);

    /* legacy glows */
    --glow-sm:              var(--glow-purple-sm);
    --glow-md:              var(--glow-purple-md);
    --glow-lg:              var(--glow-purple-lg);
}

/* -------------------------------------------------------------------------- */
/*  v2.0 PHASE-2 TOKENS  (spec: master overhaul Phase 2)                      */
/*  Refined dark-luxury palette. Use these (--c-*) for all new pages.         */
/*  Old pages continue working via --gore-* tokens above.                     */
/* -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --c-bg:          #0A0A0F;
    --c-surface-1:   #12121A;
    --c-surface-2:   #1C1C28;
    --c-border:      rgba(255, 255, 255, 0.07);
    --c-border-glow: rgba(139, 92, 246, 0.35);

    /* Accent — single violet */
    --c-accent:      #8B5CF6;
    --c-accent-dim:  rgba(139, 92, 246, 0.12);
    --c-accent-glow: rgba(139, 92, 246, 0.6);

    /* Semantic */
    --c-green:       #22C55E;
    --c-red:         #EF4444;
    --c-amber:       #F59E0B;
    --c-blue:        #0EA5E9;

    /* Text */
    --c-text-1:      #F8F8FF;
    --c-text-2:      #A0A0B8;
    --c-text-3:      #5A5A78;

    /* Radii (v2 sizing) */
    --c-radius-sm:   6px;
    --c-radius-md:   12px;
    --c-radius-lg:   20px;
    --c-radius-xl:   28px;

    /* Shadows */
    --c-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    --c-shadow-glow: 0 0 24px rgba(139, 92, 246, 0.25);

    /* Motion */
    --c-dur-fast:    150ms;
    --c-dur-normal:  300ms;
    --c-dur-slow:    600ms;
    --c-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --c-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -------------------------------------------------------------------------- */
/*  v2.0 ACCESSIBILITY                                                        */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}