/* ============================================
   UNIVERSAL ELEMENTS — Design System v8
   "Elemental Runes" — Final Palette
   ============================================ */
:root {
    /* Void — warm near-blacks with faint violet undertone */
    --void: #07070c;
    --stone: #0c0c14;
    --panel: #10101a;
    --panel-light: #15151f;
    --edge: #1c1c2c;
    --edge-light: #282840;

    /* Text hierarchy */
    --text-bright: #cdd0de;
    --text-mid: #7c7f94;
    --text-dim: #434659;
    --text-ghost: #2d3040;

    /* Elemental accents — vibrant, used with purpose */
    --water: #4090e0;
    --water-glow: rgba(64,144,224,0.35);
    --ice: #45c8e0;
    --ice-glow: rgba(69,200,224,0.30);
    --arcane: #8855dd;
    --arcane-glow: rgba(136,85,221,0.30);
    --fire: #dd7733;
    --fire-glow: rgba(221,119,51,0.30);
    --verdant: #44aa66;
    --verdant-glow: rgba(68,170,102,0.25);
    --chrono: #ccaa44;
    --chrono-glow: rgba(204,170,68,0.30);
    --ember: #cc4444;
    --ember-glow: rgba(204,68,68,0.25);

    /* ===== BACKWARD COMPAT ALIASES =====
       Maps old variable names to new palette
       so existing templates don't break during migration */
    --color-bg-page: var(--void);
    --color-surface-base: var(--stone);
    --color-surface-card: var(--panel);
    --color-surface-hover: var(--panel-light);
    --color-surface-hover-strong: var(--edge);
    --color-surface-secondary: var(--panel);
    --color-surface-tertiary: var(--panel-light);
    --color-surface-form-control: var(--stone);
    --color-surface-info-section: var(--panel);

    --color-text-primary: var(--text-bright);
    --color-text-secondary: var(--text-mid);
    --color-text-accent: var(--water);
    --color-text-highlight: var(--text-bright);
    --color-text-muted: var(--text-dim);
    --color-text-placeholder: var(--text-dim);
    --color-text-link: var(--water);
    --color-text-special: var(--arcane);
    --color-text-thread: var(--text-bright);

    --color-border-card: var(--edge);
    --color-border-card-strong: var(--edge-light);
    --color-border-card-highlight: var(--edge-light);
    --color-border-form: var(--edge);
    --color-border-form-focus: var(--water);
    --color-border-header: var(--edge);
    --color-border-row: rgba(28,28,44,0.5);
    --color-border-row-light: rgba(28,28,44,0.3);
    --color-border-gold: var(--water);

    --color-accent-red: var(--ember);
    --color-accent-red-bg: rgba(204,68,68,0.07);
    --color-accent-red-bg-strong: rgba(204,68,68,0.12);
    --color-accent-red-border: rgba(204,68,68,0.25);
    --color-accent-red-border-light: rgba(204,68,68,0.2);
    --color-accent-red-border-soft: rgba(204,68,68,0.3);
    --color-accent-green: var(--verdant);
    --color-accent-green-bg: rgba(68,170,102,0.07);
    --color-accent-green-bg-strong: rgba(68,170,102,0.12);
    --color-accent-green-border: rgba(68,170,102,0.25);
    --color-accent-green-border-light: rgba(68,170,102,0.2);
    --color-accent-green-border-soft: rgba(68,170,102,0.3);
    --color-accent-orange: var(--fire);
    --color-accent-warning: var(--chrono);
    --color-accent-warning-bg: rgba(204,170,68,0.07);
    --color-accent-warning-border: rgba(204,170,68,0.25);

    --color-accent-button-dark: var(--panel-light);
    --color-accent-button-border: var(--edge-light);
    --color-accent-button-secondary: var(--panel);
    --color-accent-button-secondary-border: var(--edge);

    --color-link-blue: var(--water);
    --color-podium-gold: var(--chrono);
    --color-podium-silver: #888;
    --color-podium-bronze: #8a5a30;

    --color-overlay-light: rgba(0,0,12,0.1);
    --color-overlay-soft: rgba(0,0,12,0.15);
    --color-overlay-medium: rgba(0,0,12,0.25);
    --color-overlay-strong: rgba(0,0,12,0.35);
    --color-overlay-dark: rgba(0,0,12,0.45);
    --color-overlay-modal: rgba(4,4,10,0.85);

    --color-modal-bg-start: var(--panel);
    --color-modal-bg-end: var(--stone);

    /* Button variants */
    --color-btn-success-start: rgba(68,170,102,0.08);
    --color-btn-success-end: rgba(68,170,102,0.12);
    --color-btn-success-border: rgba(68,170,102,0.25);
    --color-btn-danger-start: rgba(204,68,68,0.08);
    --color-btn-danger-end: rgba(204,68,68,0.12);
    --color-btn-danger-border: rgba(204,68,68,0.25);
    --color-btn-warning-start: rgba(204,170,68,0.08);
    --color-btn-warning-end: rgba(204,170,68,0.12);
    --color-btn-warning-border: rgba(204,170,68,0.25);
    --color-btn-info-start: rgba(64,144,224,0.08);
    --color-btn-info-end: rgba(64,144,224,0.12);
    --color-btn-info-border: rgba(64,144,224,0.25);

    --color-disabled-bg: var(--stone);
    --color-disabled-text: var(--text-dim);
    --color-disabled-border: var(--edge);

    --color-ucp-base: var(--panel);
    --color-ucp-gradient-end: var(--panel-light);
    --color-ucp-border: var(--edge);
    --color-ucp-checked-base: var(--panel-light);
    --color-ucp-checked-end: var(--edge);
    --color-ucp-checked-border: var(--edge-light);
    --color-accent-ucp-bg: linear-gradient(90deg, var(--panel) 0%, var(--panel-light) 100%);
    --color-ucp-transparent: var(--panel);
    --color-ucp-hover: var(--panel-light);

    --color-text-accent-subtle: rgba(64,144,224,0.05);
    --color-text-accent-bg: rgba(64,144,224,0.07);
    --color-text-accent-active: rgba(64,144,224,0.1);
    --color-text-accent-border: rgba(64,144,224,0.25);
    --color-text-special-glow: var(--arcane-glow);

    /* Chart colors */
    --chart-team-0-solid: var(--arcane);
    --chart-team-0-transparent: rgba(136,85,221,0.6);
    --chart-team-0-light: var(--fire);
    --chart-team-0-light-transparent: rgba(221,119,51,0.3);
    --chart-team-1-solid: var(--water);
    --chart-team-1-transparent: rgba(64,144,224,0.6);
    --chart-grid-color: var(--edge);
    --chart-text-color: var(--text-bright);

    /* Badge colors */
    --color-badge-gold-start: var(--panel);
    --color-badge-gold-end: var(--panel-light);
    --color-badge-gold-text: var(--text-bright);
    --color-badge-orange-text: var(--text-mid);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, var(--water) 0%, var(--arcane) 100%);
    --glow-gold: var(--water-glow);
    --glow-highlight: rgba(64,144,224,0.2);
    --glow-highlight-strong: rgba(64,144,224,0.35);
    --glow-korean-accent: var(--arcane-glow);
    --glow-discord: rgba(88,101,242,0.3);

    --shadow-form-inset: inset 0 0 12px rgba(0,0,12,0.4);
    --shadow-sm: 0 2px 8px rgba(0,0,12,0.2);
    --shadow-md: 0 4px 20px rgba(0,0,12,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,12,0.4);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Radius */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 4px;

    /* Font sizes */
    --font-size-xxs: 0.8rem;
    --font-size-xs: 0.9rem;
    --font-size-sm: 0.95rem;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 1.18rem;
    --font-size-xl: 22px;
    --font-size-xxl: 2.2rem;
    --font-size-special-small: 11px;
    --font-size-special-link: 12px;

    /* Legacy compat aliases */
    --color-brown-dark: var(--void);
    --color-brown-base: var(--stone);
    --color-brown-medium: var(--panel);
    --color-brown-light: var(--panel-light);
    --color-brown-very-light: var(--panel-light);
    --color-brown-accent: var(--panel);
    --color-light-brown-accent: var(--panel);
    --color-quick-link-background: rgba(64,144,224,0.05);

    --color-btn-register: var(--panel);
    --color-btn-register-hover: var(--panel-light);
}