/* themes.css - 5-Tier User Rank Theme Variables
 * OVERRIDES core UI tokens to create completely distinct themes. */

:root {
  /* Default Cadet Theme (6+ digit ID) - Wood & Iron */
  --bg-primary: #14100b;
  --bg-secondary: #241c14;
  --bg-card: rgba(36, 28, 20, 0.75);
  --bg-glass: rgba(36, 28, 20, 0.6);
  --bg-hover: rgba(139, 90, 43, 0.15);
  --bg-active: rgba(139, 90, 43, 0.25);
  --text-secondary: #d2b48c;
  --text-muted: #a08d75;
  --accent: #8b5a2b;
  --accent-hover: #a06932;
  --accent-glow: rgba(139, 90, 43, 0.4);
  --border: rgba(139, 90, 43, 0.3);
  --border-focus: rgba(139, 90, 43, 0.6);

  /* Specific rank vars */
  --rank-primary: var(--accent);
  --rank-secondary: #4a4a4a;
  --rank-glow: var(--accent-glow);
  --rank-card-bg: var(--bg-card);
  --rank-border: 1px solid var(--border);
  --rank-glow-anim: none;
}

/* Rank: Commodore (5-digit ID) - Teal & Bronze */
body[data-rank="commodore"] {
  --bg-primary: #011a1a;
  --bg-secondary: #022b2b;
  --bg-card: rgba(2, 43, 43, 0.75);
  --bg-glass: rgba(2, 43, 43, 0.6);
  --bg-hover: rgba(0, 128, 128, 0.15);
  --bg-active: rgba(0, 128, 128, 0.25);
  --text-secondary: #a8e6cf;
  --text-muted: #50b3a2;
  --accent: #008080;
  --accent-hover: #20b2aa;
  --accent-glow: rgba(0, 128, 128, 0.4);
  --border: rgba(0, 128, 128, 0.3);
  --border-focus: rgba(0, 128, 128, 0.6);

  /* Component Overrides */
  --theme-sidebar-bg: #011212;
  --theme-stripe-1: #021a1a;
  --theme-stripe-2: #011414;
  --theme-stripe-3: #032222;
  --theme-stripe-4: #010a0a;
  --theme-border: #008080;
  --theme-text: #20b2aa;
  --theme-left-bg: #000c0c;
  --theme-left-border: #008080;
  
  --harbor-bg: none;
  --harbor-card-bg: linear-gradient(180deg, rgba(2, 43, 43, 0.85) 0%, rgba(1, 26, 26, 0.95) 100%);
  --harbor-card-border: rgba(0, 128, 128, 0.35);
  --harbor-card-border-top: rgba(0, 128, 128, 0.6);
  --harbor-accent: #20b2aa;
  --harbor-accent-light: #a8e6cf;
  --harbor-accent-glow: rgba(0, 128, 128, 0.4);
}

/* Rank: Admiral (4-digit ID) - Deep Ocean Blue */
body[data-rank="admiral"] {
  --bg-primary: #020814;
  --bg-secondary: #05122b;
  --bg-card: rgba(5, 20, 40, 0.75);
  --bg-glass: rgba(5, 20, 40, 0.6);
  --bg-hover: rgba(0, 119, 190, 0.15);
  --bg-active: rgba(0, 119, 190, 0.25);
  --text-secondary: #90e0ef;
  --text-muted: #00b4d8;
  --accent: #0077be;
  --accent-hover: #0096c7;
  --accent-glow: rgba(0, 119, 190, 0.4);
  --border: rgba(0, 119, 190, 0.3);
  --border-focus: rgba(0, 119, 190, 0.6);

  /* Component Overrides */
  --theme-sidebar-bg: #01040a;
  --theme-stripe-1: #020814;
  --theme-stripe-2: #010610;
  --theme-stripe-3: #030c1e;
  --theme-stripe-4: #010308;
  --theme-border: #0077be;
  --theme-text: #90e0ef;
  --theme-left-bg: #000205;
  --theme-left-border: #0077be;
  
  --harbor-bg: none;
  --harbor-card-bg: linear-gradient(180deg, rgba(5, 20, 40, 0.85) 0%, rgba(2, 8, 20, 0.95) 100%);
  --harbor-card-border: rgba(0, 119, 190, 0.35);
  --harbor-card-border-top: rgba(0, 119, 190, 0.6);
  --harbor-accent: #90e0ef;
  --harbor-accent-light: #caf0f8;
  --harbor-accent-glow: rgba(0, 119, 190, 0.4);
}

/* Rank: Founding Admiral (3-digit ID) - Crimson & Platinum */
body[data-rank="founding-admiral"] {
  --bg-primary: #1a0508;
  --bg-secondary: #2d0b10;
  --bg-card: rgba(30, 10, 15, 0.75);
  --bg-glass: rgba(30, 10, 15, 0.6);
  --bg-hover: rgba(220, 20, 60, 0.15);
  --bg-active: rgba(220, 20, 60, 0.25);
  --text-secondary: #ffb3ba;
  --text-muted: #d47b85;
  --accent: #dc143c;
  --accent-hover: #ff4d6d;
  --accent-glow: rgba(220, 20, 60, 0.4);
  --border: rgba(220, 20, 60, 0.3);
  --border-focus: rgba(220, 20, 60, 0.6);

  /* Component Overrides */
  --theme-sidebar-bg: #0d0204;
  --theme-stripe-1: #1a0508;
  --theme-stripe-2: #140406;
  --theme-stripe-3: #24070b;
  --theme-stripe-4: #0a0103;
  --theme-border: #dc143c;
  --theme-text: #ffb3ba;
  --theme-left-bg: #070102;
  --theme-left-border: #dc143c;
  
  --harbor-bg: none;
  --harbor-card-bg: linear-gradient(180deg, rgba(30, 10, 15, 0.85) 0%, rgba(13, 2, 4, 0.95) 100%);
  --harbor-card-border: rgba(220, 20, 60, 0.35);
  --harbor-card-border-top: rgba(220, 20, 60, 0.6);
  --harbor-accent: #ffb3ba;
  --harbor-accent-light: #ffd9dc;
  --harbor-accent-glow: rgba(220, 20, 60, 0.4);
}

/* Rank: Sea Emperor (hot numbers) - Royal Black & Gold */
body[data-rank="sea-emperor"] {
  --bg-primary: #050505;
  --bg-secondary: #111111;
  --bg-card: rgba(15, 10, 0, 0.75);
  --bg-glass: rgba(15, 10, 0, 0.6);
  --bg-hover: rgba(255, 215, 0, 0.15);
  --bg-active: rgba(255, 215, 0, 0.25);
  --text-secondary: #ffe55c;
  --text-muted: #b39b30;
  --accent: #ffd700;
  --accent-hover: #ffeb73;
  --accent-glow: rgba(255, 215, 0, 0.4);
  --border: rgba(255, 215, 0, 0.3);
  --border-focus: rgba(255, 215, 0, 0.6);

  --rank-glow-anim: emperorGlow 3s infinite alternate;

  /* Component Overrides */
  --theme-sidebar-bg: #050505;
  --theme-stripe-1: #0a0a0a;
  --theme-stripe-2: #050505;
  --theme-stripe-3: #111111;
  --theme-stripe-4: #000000;
  --theme-border: #ffd700;
  --theme-text: #ffd700;
  --theme-left-bg: #000;
  --theme-left-border: #ffd700;
  
  --harbor-bg: none;
  --harbor-card-bg: linear-gradient(180deg, rgba(15, 10, 0, 0.85) 0%, rgba(5, 5, 0, 0.95) 100%);
  --harbor-card-border: rgba(255, 215, 0, 0.35);
  --harbor-card-border-top: rgba(255, 215, 0, 0.6);
  --harbor-accent: #ffd700;
  --harbor-accent-light: #fff2b2;
  --harbor-accent-glow: rgba(255, 215, 0, 0.4);

  --theme-nav-bg: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
  --theme-nav-border: #333;
  --theme-nav-rivet: #ffd700;
  --theme-nav-hover: linear-gradient(180deg, #2a2a2a 0%, #111 100%);
  --theme-nav-border-hover: #ffd700;
  --theme-nav-active: linear-gradient(180deg, #2a2200 0%, #110a00 100%);
  --theme-nav-icon: radial-gradient(circle at center, #ffd700 0%, #886600 100%);
  --theme-nav-icon-active: radial-gradient(circle at center, #ffffaa 0%, #ffd700 100%);
  --theme-glow: rgba(255, 215, 0, 0.4);
  --theme-glow-inner: rgba(255, 215, 0, 0.2);
}

@keyframes emperorGlow {
  0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.4), inset 0 0 5px rgba(255, 215, 0, 0.2); }
  100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.4); border-color: #ffe55c; }
}