/* ============================================================
   RAN UNIVERSE — theme.css
   CSS custom properties for dark/light modes.
   Fonts: Cinzel (display) + Nunito (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Nunito:wght@300;400;500;600;700;800&family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* ── Root (Dark mode default) ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:        #0e0c1a;
  --bg-surface:     #15132a;
  --bg-card:        #1c1930;
  --bg-card-hover:  #231f3a;
  --bg-elevated:    #2a2646;
  --bg-overlay:     rgba(14, 12, 26, 0.92);

  /* Gold palette */
  --gold-bright:    #FFD700;
  --gold-accent:    #E8C547;
  --gold-soft:      #c8963e;
  --gold-muted:     #8a6d2f;
  --gold-dim:       rgba(232, 197, 71, 0.15);
  --gold-glow:      rgba(232, 197, 71, 0.35);

  /* Text */
  --text-primary:   #f0ead8;
  --text-secondary: #b8a98a;
  --text-muted:     #7a6e5a;
  --text-faint:     #4a4235;
  --text-inverse:   #1a1410;

  /* Status */
  --success:        #6dd68a;
  --error:          #e57373;
  --danger:         #dc2626;
  --warning:        #ffb74d;
  --info:           #64b5f6;

  /* Borders */
  --border:         rgba(232, 197, 71, 0.18);
  --border-strong:  rgba(232, 197, 71, 0.45);
  --border-subtle:  rgba(255, 255, 255, 0.06);

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #FFD700 0%, #E8C547 50%, #c8963e 100%);
  --grad-gold-rev:  linear-gradient(135deg, #c8963e 0%, #E8C547 50%, #FFD700 100%);
  --grad-bg:        linear-gradient(160deg, #0e0c1a 0%, #15132a 40%, #0d0b18 100%);
  --grad-card:      linear-gradient(145deg, #1c1930 0%, #231f3a 100%);
  --grad-surface:   linear-gradient(180deg, rgba(232,197,71,0.08) 0%, transparent 100%);

  /* Shadows */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.6);
  --shadow-gold:    0 4px 24px rgba(232,197,71,0.3), 0 1px 4px rgba(232,197,71,0.2);
  --shadow-gold-lg: 0 8px 40px rgba(232,197,71,0.35), 0 2px 8px rgba(232,197,71,0.25);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Typography */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Nunito', sans-serif;
  --font-ui:      'Nunito Sans', sans-serif;

  /* Transition */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --trans-fast: 0.15s var(--ease-out);
  --trans-med:  0.25s var(--ease-out);
  --trans-slow: 0.4s var(--ease-out);

  /* Z-index layers */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   1000;
  --z-tour:    10000;
  --z-toast:   9000;
}

/* ── Light mode ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #fffbf5;
  --bg-surface:     #fdf6e8;
  --bg-card:        #fff8e7;
  --bg-card-hover:  #fff3d4;
  --bg-elevated:    #fffbf0;
  --bg-overlay:     rgba(255, 251, 245, 0.95);

  --gold-bright:    #d4920e;
  --gold-accent:    #c8830a;
  --gold-soft:      #a86c08;
  --gold-muted:     #8a5a06;
  --gold-dim:       rgba(200, 131, 10, 0.12);
  --gold-glow:      rgba(200, 131, 10, 0.25);

  --text-primary:   #3d2e14;
  --text-secondary: #7a5d2e;
  --text-muted:     #a88048;
  --text-faint:     #c8a060;
  --text-inverse:   #fffbf5;

  --border:         rgba(200, 131, 10, 0.2);
  --border-strong:  rgba(200, 131, 10, 0.5);
  --border-subtle:  rgba(61, 46, 20, 0.08);

  --grad-gold:      linear-gradient(135deg, #f0b429 0%, #d4920e 50%, #a86c08 100%);
  --grad-gold-rev:  linear-gradient(135deg, #a86c08 0%, #d4920e 50%, #f0b429 100%);
  --grad-bg:        linear-gradient(160deg, #fffbf5 0%, #fdf6e8 40%, #fffbf0 100%);
  --grad-card:      linear-gradient(145deg, #fff8e7 0%, #fff3d4 100%);
  --grad-surface:   linear-gradient(180deg, rgba(200,131,10,0.06) 0%, transparent 100%);

  --shadow-sm:      0 2px 8px rgba(100, 60, 0, 0.1);
  --shadow-md:      0 8px 24px rgba(100, 60, 0, 0.15);
  --shadow-lg:      0 16px 48px rgba(100, 60, 0, 0.2);
  --shadow-gold:    0 4px 24px rgba(200,131,10,0.2), 0 1px 4px rgba(200,131,10,0.15);
  --shadow-gold-lg: 0 8px 40px rgba(200,131,10,0.25), 0 2px 8px rgba(200,131,10,0.18);
}

/* ── Base Reset & Globals ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--trans-slow), color var(--trans-slow);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(232,197,71,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(120,80,200,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(200,131,10,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(200,160,50,0.04) 0%, transparent 60%);
}

a {
  color: var(--gold-accent);
  text-decoration: none;
  transition: color var(--trans-fast);
}
a:hover { color: var(--gold-bright); }

img { max-width: 100%; display: block; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-body);
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb {
  background: var(--gold-muted);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-accent); }

/* Selection */
::selection {
  background: var(--gold-dim);
  color: var(--gold-bright);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}