/**
 * RSite — Theme Definitions
 *
 * Single source of truth for ALL color/aesthetic variables.
 * Adding a new theme = adding one [data-theme="..."] block.
 *
 * Loaded before base.css so all variables are available everywhere.
 */

/* ═══════════════════════════════════════════════
   DARK (default — current look, zero-change)
   ═══════════════════════════════════════════════ */

:root {
    /* ── Palette ── */
    --bg-dark: #090909;
    --bg-surface: #0f0f0f;
    --bg-gradient: linear-gradient(145deg, #090909 0%, #111111 40%, #0b0b0b 100%);

    /* ── Accent opacity primitives ── */
    --accent-08: rgba(212, 175, 55, 0.08);
    --accent-10: rgba(212, 175, 55, 0.1);
    --accent-15: rgba(212, 175, 55, 0.15);
    --accent-18: rgba(212, 175, 55, 0.18);
    --accent-20: rgba(212, 175, 55, 0.2);
    --accent-25: rgba(212, 175, 55, 0.25);
    --accent-35: rgba(212, 175, 55, 0.35);
    --accent-50: rgba(212, 175, 55, 0.5);
    --accent-55: rgba(212, 175, 55, 0.55);
    --accent-70: rgba(212, 175, 55, 0.7);
    --accent-90: rgba(212, 175, 55, 0.9);

    /* ── Gold accent ── */
    --gold-accent: #d4af37;
    --gold-light: #f4d47c;
    --gold-dark: #a88a2a;
    --gold-glow: var(--accent-25);
    --gold-subtle: var(--accent-08);

    /* ── Accent semantic (all resolve via primitives) ── */
    --accent-bg:            var(--accent-08);
    --accent-bg-hover:      var(--accent-15);
    --accent-bg-active:     var(--accent-25);
    --accent-border:        var(--accent-20);
    --accent-border-hover:  var(--accent-35);
    --accent-border-active: var(--accent-50);
    --accent-glow-sm:       var(--accent-10);
    --accent-glow-md:       var(--accent-15);
    --accent-glow-lg:       var(--accent-25);
    --accent-label:         var(--accent-55);
    --accent-gradient:      linear-gradient(135deg, var(--accent-15), var(--accent-08));
    --accent-gradient-hover:linear-gradient(135deg, var(--accent-25), rgba(212, 175, 55, 0.12));
    --accent-dim:           var(--accent-15);
    --accent-line:          var(--accent-25);
    --accent-soft:          var(--accent-70);
    --accent-dialogue:      #c9b88a;

    /* ── Surfaces / overlays ── */
    --surface-overlay:       rgba(0, 0, 0, 0.6);
    --surface-overlay-strong:rgba(0, 0, 0, 0.8);
    --surface-overlay-mid:   rgba(0, 0, 0, 0.35);
    --surface-overlay-light: rgba(0, 0, 0, 0.2);
    --surface-overlay-faint: rgba(0, 0, 0, 0.25);

    /* ── Glass (= surface-overlay aliases) ── */
    --glass-bg: var(--surface-overlay);
    --glass-bg-strong: var(--surface-overlay-strong);
    --glass-border: var(--border-default);
    --glass-border-hover: var(--border-bright);
    --glass-blur: 10px;

    /* ── Borders (white-tinted for dark bg) ── */
    --border-subtle:         rgba(255, 255, 255, 0.03);
    --border-faint:          rgba(255, 255, 255, 0.04);
    --border-light:          rgba(255, 255, 255, 0.06);
    --border-default:        rgba(255, 255, 255, 0.08);
    --border-medium:         rgba(255, 255, 255, 0.1);
    --border-bright:         rgba(255, 255, 255, 0.15);
    --border-vivid:          rgba(255, 255, 255, 0.2);

    /* ── Hover backgrounds ── */
    --bg-hover-faint:        rgba(255, 255, 255, 0.02);
    --bg-hover-light:        rgba(255, 255, 255, 0.04);
    --bg-hover-medium:       rgba(255, 255, 255, 0.06);
    --bg-hover-strong:       rgba(255, 255, 255, 0.08);

    /* ── Inset glows ── */
    --inset-glow:            rgba(255, 255, 255, 0.03);
    --inset-glow-strong:     rgba(255, 255, 255, 0.05);

    /* ── Focus / selection ── */
    --focus-ring:            var(--accent-08);
    --selection-bg:          rgba(212, 175, 55, 0.3);

    /* ── Misc ── */
    --tooltip-border:        var(--accent-18);
    --marquee-border:        var(--accent-20);
    --progress-accent-bg:    rgba(255, 255, 255, 0.07);
    --accent-scrollbar:      var(--accent-25);

    /* ── Matte plastic ── */
    --plastic-bg:            rgba(0, 0, 0, 0.78);
    --plastic-border:        rgba(255, 255, 255, 0.1);
    --plastic-bg-hover:      rgba(5, 5, 5, 0.85);
    --plastic-border-hover:  rgba(212, 175, 55, 0.35);
    --plastic-blur:          7px;
    --plastic-brightness:    115%;
    --plastic-contrast:      85%;
    --plastic-saturate:      70%;

    /* ── Matte plastic light variant ── */
    --plastic-bg-light:      rgba(0, 0, 0, 0.35);
    --plastic-border-light:  rgba(212, 175, 55, 0.12);
    --plastic-blur-light:    4px;

    /* ── Text ── */
    --text-primary: #c1b798;
    --text-secondary: #8888a0;
    --text-muted: #5a5a72;

    /* ── Status ── */
    --success: #35d07a;
    --success-bg: rgba(53, 208, 122, 0.1);
    --success-border: rgba(53, 208, 122, 0.6);
    --success-progress: rgba(53, 208, 122, 0.3);
    --error: #e85454;
    --error-bg: rgba(232, 84, 84, 0.1);
    --error-border: rgba(232, 84, 84, 0.6);
    --error-progress: rgba(232, 84, 84, 0.3);
    --info: #6488dc;
    --info-border: rgba(100, 140, 220, 0.5);

    /* ── Reactions ── */
    --reaction-like: #ff5e5e;
    --reaction-like-bg: rgba(255, 94, 94, 0.1);
    --reaction-like-border: rgba(255, 94, 94, 0.2);
    --reaction-dislike: #d2b48c;
    --reaction-dislike-bg: rgba(139, 69, 19, 0.15);
    --reaction-dislike-border: rgba(139, 69, 19, 0.3);

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px var(--gold-glow);
    --shadow-glass: var(--shadow-md), inset 0 0 4px var(--inset-glow);
    --shadow-plastic: var(--shadow-md), inset 0 0 4px var(--inset-glow-strong);
    --shadow-plastic-lg: var(--shadow-lg), inset 0 0 4px var(--inset-glow-strong);
    --focus-ring-shadow: 0 0 0 3px var(--accent-glow-sm);

    /* ── Achievement cards ── */
    --ach-bg:              #1A0F05;
    --ach-locked-bg:       #120B03;
    --ach-locked-border:   #2A1F14;
    --ach-text:            #D4B896;
    --ach-text-locked:     #7A6A5A;
    --ach-hover-shadow:    rgba(0, 0, 0, 0.5);

    /* ── Achievement modal ── */
    --ach-modal-bg:        linear-gradient(160deg, #1C1208 0%, #2A1A0A 60%, #1C1208 100%);
    --ach-modal-border:    rgba(139, 115, 85, 0.3);
    --ach-modal-text:      #B8A88A;
    --ach-modal-text-dim:  #5A4A3A;
    --ach-modal-close:     #8A7A6A;
    --ach-modal-close-hover: #D4B896;
    --ach-modal-divider:   rgba(139, 115, 85, 0.2);

    /* ── Profile sidebar ── */
    --profile-header-bg:   rgba(0, 0, 0, 0.5);
    --profile-body-bg:     rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════
   LIGHT
   ═══════════════════════════════════════════════ */

[data-theme="light"] {
    --bg-dark: #f5f0e8;
    --bg-surface: #ebe5d9;
    --bg-gradient: linear-gradient(145deg, #f5f0e8 0%, #ece6d8 40%, #f0eadc 100%);

    --glass-blur: 10px;

    --surface-overlay:       rgba(255, 255, 255, 0.6);
    --surface-overlay-strong:rgba(255, 255, 255, 0.85);
    --surface-overlay-mid:   rgba(0, 0, 0, 0.05);
    --surface-overlay-light: rgba(0, 0, 0, 0.04);
    --surface-overlay-faint: rgba(0, 0, 0, 0.06);

    --border-subtle:         rgba(0, 0, 0, 0.04);
    --border-faint:          rgba(0, 0, 0, 0.06);
    --border-light:          rgba(0, 0, 0, 0.08);
    --border-default:        rgba(0, 0, 0, 0.1);
    --border-medium:         rgba(0, 0, 0, 0.12);
    --border-bright:         rgba(0, 0, 0, 0.18);
    --border-vivid:          rgba(0, 0, 0, 0.25);

    --bg-hover-faint:        rgba(0, 0, 0, 0.02);
    --bg-hover-light:        rgba(0, 0, 0, 0.04);
    --bg-hover-medium:       rgba(0, 0, 0, 0.06);
    --bg-hover-strong:       rgba(0, 0, 0, 0.08);

    --inset-glow:            rgba(255, 255, 255, 0.5);
    --inset-glow-strong:     rgba(255, 255, 255, 0.7);

    --progress-accent-bg:    rgba(0, 0, 0, 0.08);

    --plastic-bg:            rgba(255, 255, 255, 0.75);
    --plastic-border:        rgba(0, 0, 0, 0.1);
    --plastic-bg-hover:      rgba(255, 255, 255, 0.85);
    --plastic-blur:          7px;
    --plastic-brightness:    115%;
    --plastic-contrast:      85%;
    --plastic-saturate:      70%;

    --plastic-bg-light:      rgba(255, 255, 255, 0.4);
    --plastic-blur-light:    4px;

    --text-primary: #3d3520;
    --text-secondary: #6b6150;
    --text-muted: #9a9080;

    --success: #2a9d5c;
    --success-bg: rgba(42, 157, 92, 0.08);
    --success-border: rgba(42, 157, 92, 0.6);
    --success-progress: rgba(42, 157, 92, 0.3);
    --error: #c94444;
    --error-bg: rgba(201, 68, 68, 0.08);
    --error-border: rgba(201, 68, 68, 0.6);
    --error-progress: rgba(201, 68, 68, 0.3);
    --info: #6488dc;
    --info-border: rgba(100, 140, 220, 0.5);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px var(--gold-glow);

    /* ── Achievement cards — warm parchment ── */
    --ach-bg:              #F2ECE2;
    --ach-locked-bg:       #EAE3D8;
    --ach-locked-border:   #D5CCBE;
    --ach-text:            #3d3520;
    --ach-text-locked:     #9A8E80;
    --ach-hover-shadow:    rgba(44, 34, 26, 0.14);

    /* ── Achievement modal ── */
    --ach-modal-bg:        linear-gradient(160deg, #FAF7F2 0%, #F2ECE2 60%, #FAF7F2 100%);
    --ach-modal-border:    rgba(139, 115, 85, 0.3);
    --ach-modal-text:      #6B5D50;
    --ach-modal-text-dim:  #9A8E80;
    --ach-modal-close:     #9A8E80;
    --ach-modal-close-hover: #3d3520;
    --ach-modal-divider:   rgba(139, 115, 85, 0.15);

    /* ── Profile sidebar ── */
    --profile-header-bg:   rgba(0, 0, 0, 0.5);
    --profile-body-bg:     rgba(0, 0, 0, 0.03);
}

/* ═══════════════════════════════════════════════
   LATTE
   ═══════════════════════════════════════════════ */

[data-theme="latte"] {
    /* Dark-brown "coffee shop" — cream text on dark wood */
    --bg-dark: #2B1A0D;
    --bg-surface: #3A2415;
    --bg-gradient: linear-gradient(145deg, #2B1A0D 0%, #321A0E 40%, #2D1C10 100%);

    --glass-bg: rgba(30, 15, 5, 0.7);
    --glass-bg-strong: rgba(30, 15, 5, 0.9);
    --glass-blur: 8px;

    --surface-overlay:       rgba(0, 0, 0, 0.6);
    --surface-overlay-strong:rgba(0, 0, 0, 0.8);
    --surface-overlay-mid:   rgba(0, 0, 0, 0.35);
    --surface-overlay-light: rgba(0, 0, 0, 0.2);
    --surface-overlay-faint: rgba(0, 0, 0, 0.25);

    --border-subtle:         rgba(237, 224, 200, 0.04);
    --border-faint:          rgba(237, 224, 200, 0.06);
    --border-light:          rgba(237, 224, 200, 0.08);
    --border-default:        rgba(237, 224, 200, 0.1);
    --border-medium:         rgba(237, 224, 200, 0.13);
    --border-bright:         rgba(237, 224, 200, 0.18);
    --border-vivid:          rgba(237, 224, 200, 0.24);

    --bg-hover-faint:        rgba(237, 224, 200, 0.03);
    --bg-hover-light:        rgba(237, 224, 200, 0.05);
    --bg-hover-medium:       rgba(237, 224, 200, 0.07);
    --bg-hover-strong:       rgba(237, 224, 200, 0.1);

    --inset-glow:            rgba(237, 224, 200, 0.03);
    --inset-glow-strong:     rgba(237, 224, 200, 0.05);

    --focus-ring:            rgba(212, 175, 55, 0.08);
    --selection-bg:          rgba(212, 175, 55, 0.3);

    --tooltip-border:        rgba(212, 175, 55, 0.18);
    --marquee-border:        rgba(212, 175, 55, 0.2);
    --progress-accent-bg:    rgba(237, 224, 200, 0.07);
    --accent-scrollbar:      rgba(212, 175, 55, 0.3);

    --plastic-bg:            rgba(24, 12, 4, 0.85);
    --plastic-border:        rgba(237, 224, 200, 0.1);
    --plastic-bg-hover:      rgba(20, 10, 2, 0.9);
    --plastic-border-hover:  rgba(212, 175, 55, 0.35);
    --plastic-blur:          7px;
    --plastic-brightness:    115%;
    --plastic-contrast:      85%;
    --plastic-saturate:      70%;

    --plastic-bg-light:      rgba(36, 20, 8, 0.5);
    --plastic-border-light:  rgba(212, 175, 55, 0.12);
    --plastic-blur-light:    4px;

    --text-primary: #EDE0C8;
    --text-secondary: #C4A87A;
    --text-muted: #9A7850;

    --success: #35d07a;
    --success-bg: rgba(53, 208, 122, 0.1);
    --error: #e85454;
    --error-bg: rgba(232, 84, 84, 0.1);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--gold-glow);
}

/* ═══════════════════════════════════════════════
   ACCENT OVERRIDES — global, stack on any theme
   Set via data-accent="steel|latte" on <html>.
   ═══════════════════════════════════════════════ */

:root[data-accent="steel"] {
    --gold-accent: #7BA7BC;
    --gold-light: #a0c4d4;
    --gold-dark: #5a8a9c;

    /* ── Accent primitives ── */
    --accent-08: rgba(123, 167, 188, 0.08);
    --accent-10: rgba(123, 167, 188, 0.1);
    --accent-15: rgba(123, 167, 188, 0.15);
    --accent-18: rgba(123, 167, 188, 0.18);
    --accent-20: rgba(123, 167, 188, 0.2);
    --accent-25: rgba(123, 167, 188, 0.25);
    --accent-35: rgba(123, 167, 188, 0.35);
    --accent-50: rgba(123, 167, 188, 0.5);
    --accent-55: rgba(123, 167, 188, 0.55);
    --accent-70: rgba(123, 167, 188, 0.7);

    --accent-gradient:      linear-gradient(135deg, var(--accent-15), var(--accent-08));
    --accent-gradient-hover:linear-gradient(135deg, var(--accent-25), rgba(123, 167, 188, 0.12));
    --accent-dialogue:      #a0bfcf;

    --selection-bg:          rgba(123, 167, 188, 0.3);
    --plastic-border-hover:  rgba(123, 167, 188, 0.35);
    --plastic-border-light:  rgba(123, 167, 188, 0.12);

    --text-primary: #9cb5c2;
    --text-secondary: #7a8fa2;
    --text-muted: #506070;

    --shadow-glow: 0 0 30px var(--gold-glow);
}

:root[data-accent="latte"] {
    --gold-accent: #E8955A;
    --gold-light: #F0B87A;
    --gold-dark: #B87040;

    /* ── Accent primitives ── */
    --accent-08: rgba(232, 149, 90, 0.08);
    --accent-10: rgba(232, 149, 90, 0.1);
    --accent-15: rgba(232, 149, 90, 0.15);
    --accent-18: rgba(232, 149, 90, 0.18);
    --accent-20: rgba(232, 149, 90, 0.2);
    --accent-25: rgba(232, 149, 90, 0.25);
    --accent-35: rgba(232, 149, 90, 0.35);
    --accent-50: rgba(232, 149, 90, 0.5);
    --accent-55: rgba(232, 149, 90, 0.55);
    --accent-70: rgba(232, 149, 90, 0.7);

    --accent-gradient:      linear-gradient(135deg, var(--accent-15), var(--accent-08));
    --accent-gradient-hover:linear-gradient(135deg, var(--accent-25), rgba(232, 149, 90, 0.12));
    --accent-dialogue:      #d4a878;

    --selection-bg:          rgba(232, 149, 90, 0.3);
    --plastic-border-hover:  rgba(232, 149, 90, 0.35);
    --plastic-border-light:  rgba(232, 149, 90, 0.12);

    --text-primary: #d4b898;
    --text-secondary: #a08060;
    --text-muted: #705840;

    --shadow-glow: 0 0 30px var(--gold-glow);
}

/* ═══════════════════════════════════════════════
   TEXT TINT OVERRIDES — light/latte themes + accent
   Prevent light accent text on light backgrounds.
   ═══════════════════════════════════════════════ */

/* Light theme + accent: dark text on light bg */
[data-theme="light"][data-accent="gold"] {
    --username-color: #8B5A1A;
}

[data-theme="light"][data-accent="steel"] {
    --username-color: #3D5A6B;
    --text-primary: #2a3540;
    --text-secondary: #4a5565;
    --text-muted: #7a8590;
}

[data-theme="light"][data-accent="latte"] {
    --username-color: #8B5A2A;
    --text-primary: #3a2e1a;
    --text-secondary: #6b5d48;
    --text-muted: #9a8c72;
}

/* Latte theme + accent: light tinted text on dark-brown bg */
[data-theme="latte"][data-accent="steel"] {
    --text-primary: #b0c8d0;
    --text-secondary: #7a9aa5;
    --text-muted: #5a7a85;
}

[data-theme="latte"][data-accent="latte"] {
    --text-primary: #d4b898;
    --text-secondary: #a08060;
    --text-muted: #705840;
}