/* ===== IRONITT Theme System ===== */

:root {
  /* Base Colors */
  --bg-primary: #0e0e10;
  --bg-secondary: #1a1a1e;
  --bg-tertiary: #22222a;
  --bg-elevated: #1f1f26;
  --bg-hover: #2a2a34;
  --bg-input: #121215;

  /* Text Colors */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0b8;
  --text-muted: #6b6b80;
  --text-inverse: #0e0e10;
  --text-on-accent: #ffffff;

  /* Accent (Default Green) */
  --accent-color: #12f49c;
  --accent-hover: #0ed88a;
  --accent-solid: #09875c;
  --accent-solid-hover: #077549;
  --accent-light: rgba(18, 244, 156, 0.15);
  --accent-subtle: rgba(18, 244, 156, 0.08);

  /* Status Colors */
  --color-success: #43b581;
  --color-warning: #f0a830;
  --color-danger: #e84057;
  --color-info: #12f49c;
  --color-online: #43b581;
  --color-idle: #f0a830;
  --color-dnd: #e84057;
  --color-offline: #6b6b80;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 5px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 29px rgba(0, 0, 0, 0.5);
  --shadow-island: 0 5px 24px rgba(0, 0, 0, 0.5);

  /* Spacing */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 19px;
  --space-lg: 29px;
  --space-xl: 38px;
  --space-2xl: 58px;

  /* Border Radius */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 17px;
  --radius-xl: 24px;
  --radius-pill: 60px;
  --radius-round: 50%;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 22px;
  --font-size-xl: 29px;
  --font-size-2xl: 38px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-Index */
  --z-base: 1;
  --z-nav: 100;
  --z-panel: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* Layout */
  --nav-height: 72px;
  --sidebar-width: 86px;
  --channel-width: 288px;
  --profile-panel-width: 408px;
}

/* ===== Light Mode ===== */

.light-mode {
  --bg-primary: #fafafa;
  --bg-secondary: #f0f0f4;
  --bg-tertiary: #e4e4ec;
  --bg-elevated: #f5f5f8;
  --bg-hover: #e0e0ea;
  --bg-input: #f2f2f6;

  --text-primary: #111122;
  --text-secondary: #3a3a55;
  --text-muted: #6e6e88;
  --text-inverse: #fafafa;

  --border-color: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 5px 14px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 10px 29px rgba(0, 0, 0, 0.16);
  --shadow-island: 0 5px 24px rgba(0, 0, 0, 0.14);
}

/* Light mode keeps accent colors from whichever theme is active */

/* ===== Theme Presets ===== */

/* Free themes — accent only, default grey UI */

.theme-blue {
  --accent-color: #4a7dff;
  --accent-hover: #3a6ae6;
  --accent-solid: #3560cc;
  --accent-solid-hover: #2a4faa;
  --accent-light: rgba(74, 125, 255, 0.15);
  --accent-subtle: rgba(74, 125, 255, 0.08);
}

.theme-crimson {
  --accent-color: #e84057;
  --accent-hover: #d63449;
  --accent-solid: #b83244;
  --accent-solid-hover: #9a2a39;
  --accent-light: rgba(232, 64, 87, 0.15);
  --accent-subtle: rgba(232, 64, 87, 0.08);
}

.theme-amber {
  --accent-color: #f0a830;
  --accent-hover: #d9962b;
  --accent-solid: #b07a20;
  --accent-solid-hover: #946618;
  --accent-light: rgba(240, 168, 48, 0.15);
  --accent-subtle: rgba(240, 168, 48, 0.08);
}

.theme-violet {
  --accent-color: #9b59b6;
  --accent-hover: #8e4fa6;
  --accent-solid: #7a4590;
  --accent-solid-hover: #653a78;
  --accent-light: rgba(155, 89, 182, 0.15);
  --accent-subtle: rgba(155, 89, 182, 0.08);
}

.theme-cyan {
  --accent-color: #00bcd4;
  --accent-hover: #00a5bb;
  --accent-solid: #008a9e;
  --accent-solid-hover: #007485;
  --accent-light: rgba(0, 188, 212, 0.15);
  --accent-subtle: rgba(0, 188, 212, 0.08);
}

/* Premium themes — accent + custom backgrounds (sold in Iron Center) */

.theme-rose {
  --accent-color: #e91e8c;
  --accent-hover: #d11a7e;
  --accent-solid: #b8186e;
  --accent-solid-hover: #9a145c;
  --accent-light: rgba(233, 30, 140, 0.15);
  --accent-subtle: rgba(233, 30, 140, 0.08);
  --bg-primary: #110c0f;
  --bg-secondary: #2e1a28;
  --bg-tertiary: #3e1632;
  --bg-elevated: #381f30;
  --bg-hover: #4a2a3e;
  --bg-input: #1e121a;
}

.theme-sunset {
  --accent-color: #ff6b35;
  --accent-hover: #e55f2f;
  --accent-solid: #cc5529;
  --accent-solid-hover: #aa4722;
  --accent-light: rgba(255, 107, 53, 0.15);
  --accent-subtle: rgba(255, 107, 53, 0.08);
  --bg-primary: #110e0c;
  --bg-secondary: #2e201a;
  --bg-tertiary: #3e2416;
  --bg-elevated: #38261f;
  --bg-hover: #4a342a;
  --bg-input: #1e1612;
}

.theme-mint {
  --accent-color: #00e5a0;
  --accent-hover: #00cc8e;
  --accent-solid: #08855c;
  --accent-solid-hover: #06704c;
  --accent-light: rgba(0, 229, 160, 0.15);
  --accent-subtle: rgba(0, 229, 160, 0.08);
  --bg-primary: #0c110e;
  --bg-secondary: #1a2e22;
  --bg-tertiary: #163e28;
  --bg-elevated: #1f3826;
  --bg-hover: #2a4a34;
  --bg-input: #121e16;
}

.theme-midnight {
  --accent-color: #818cf8;
  --accent-hover: #6366f1;
  --accent-solid: #4f46e5;
  --accent-solid-hover: #4338ca;
  --accent-light: rgba(129, 140, 248, 0.15);
  --accent-subtle: rgba(129, 140, 248, 0.08);
  --bg-primary: #0c0c14;
  --bg-secondary: #161628;
  --bg-tertiary: #1e1e38;
  --bg-elevated: #1a1a30;
  --bg-hover: #282848;
  --bg-input: #0e0e18;
}

.theme-sakura {
  --accent-color: #f9a8d4;
  --accent-hover: #f472b6;
  --accent-solid: #ec4899;
  --accent-solid-hover: #db2777;
  --accent-light: rgba(249, 168, 212, 0.15);
  --accent-subtle: rgba(249, 168, 212, 0.08);
  --bg-primary: #110c10;
  --bg-secondary: #261a24;
  --bg-tertiary: #2e1e2c;
  --bg-elevated: #2a1c28;
  --bg-hover: #3a2838;
  --bg-input: #180f16;
}

.theme-ember {
  --accent-color: #f87171;
  --accent-hover: #ef4444;
  --accent-solid: #dc2626;
  --accent-solid-hover: #b91c1c;
  --accent-light: rgba(248, 113, 113, 0.15);
  --accent-subtle: rgba(248, 113, 113, 0.08);
  --bg-primary: #110c0c;
  --bg-secondary: #2a1616;
  --bg-tertiary: #381c1c;
  --bg-elevated: #301818;
  --bg-hover: #442222;
  --bg-input: #1c0e0e;
}

.theme-obsidian {
  --accent-color: #ffffff;
  --accent-hover: #d4d4d4;
  --accent-solid: #a0a0a0;
  --accent-solid-hover: #888888;
  --accent-light: rgba(255, 255, 255, 0.12);
  --accent-subtle: rgba(255, 255, 255, 0.06);
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --bg-elevated: #0d0d0d;
  --bg-hover: #1a1a1a;
  --bg-input: #050505;
}

.theme-amethyst {
  --accent-color: #a855f7;
  --accent-hover: #9333ea;
  --accent-solid: #7e22ce;
  --accent-solid-hover: #6b21a8;
  --accent-light: rgba(168, 85, 247, 0.15);
  --accent-subtle: rgba(168, 85, 247, 0.08);
  --bg-primary: #0c0a12;
  --bg-secondary: #1a1428;
  --bg-tertiary: #241c38;
  --bg-elevated: #201830;
  --bg-hover: #2e2248;
  --bg-input: #100c18;
}

.theme-depths {
  --accent-color: #22d3ee;
  --accent-hover: #06b6d4;
  --accent-solid: #0891b2;
  --accent-solid-hover: #0e7490;
  --accent-light: rgba(34, 211, 238, 0.12);
  --accent-subtle: rgba(34, 211, 238, 0.06);
  --bg-primary: #04050e;
  --bg-secondary: #0a0f24;
  --bg-tertiary: #101838;
  --bg-elevated: #0c132e;
  --bg-hover: #162048;
  --bg-input: #070a18;
  --border-color: rgba(34, 211, 238, 0.06);
  --border-strong: rgba(34, 211, 238, 0.12);
  --text-secondary: #8ea8c8;
  --text-muted: #5670a0;
  --shadow-sm: 0 1px 4px rgba(10, 5, 40, 0.5);
  --shadow-md: 0 5px 14px rgba(10, 5, 40, 0.6);
  --shadow-lg: 0 10px 29px rgba(10, 5, 40, 0.7);
  --shadow-island: 0 5px 24px rgba(8, 4, 50, 0.6), 0 0 40px rgba(34, 211, 238, 0.04);
}