/* ═══════════════════════════════════════════════════════════════
   VerseWorks — Shared theme CSS
   Base palette, manufacturer themes, theme picker, font picker.
   Sourced from index/mine/craft/steal/admin/privacy (superset).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE (Dracula-inspired dark default) ═══ */
:root {
  --bg: #282a36; --surface: #21222c; --surface2: #44475a;
  --border: rgba(98,114,164,0.25); --border-hover: rgba(98,114,164,0.55);
  --text: #f8f8f2; --text-muted: #6272a4; --text-dim: #44475a;
  --accent: #bd93f9; --accent-dim: rgba(189,147,249,0.12);
  --header-bg: rgba(40,42,54,0.92);
  --radius: 8px; --radius-lg: 12px;
  /* Status colours (craft.html) */
  --green: #50fa7b; --green-dim: rgba(80,250,123,0.12);
  --yellow: #f1fa8c; --yellow-dim: rgba(241,250,140,0.10);
  --orange: #ffb86c; --orange-dim: rgba(255,184,108,0.12);
  --red: #ff5555; --red-dim: rgba(255,85,85,0.12);
  /* Status bg variants (admin.html) */
  --green-bg: rgba(80,250,123,0.1);
  --yellow-bg: rgba(241,250,140,0.08);
  --red-bg: rgba(255,85,85,0.1);
  /* Steal extras */
  --gold: #f1fa8c;
  /* Quality grades (mine.html) */
  --legendary-color: #ffb86c; --legendary-bg: rgba(255,184,108,0.12);
  --epic-color: #ff79c6;      --epic-bg: rgba(255,121,198,0.12);
  --rare-color: #8be9fd;      --rare-bg: rgba(139,233,253,0.1);
  --uncommon-color: #f1fa8c;  --uncommon-bg: rgba(241,250,140,0.08);
  --common-color: #6272a4;    --common-bg: rgba(98,114,164,0.1);
  /* Fonts */
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Space Grotesk', sans-serif;
}

/* ═══ LIGHT MODE (mine / craft / admin) ═══ */
body.light {
  --bg: #f8f8f2; --surface: #ffffff; --surface2: #ededee;
  --border: rgba(98,114,164,0.2); --border-hover: rgba(98,114,164,0.45);
  --text: #282a36; --text-muted: #6272a4; --text-dim: #caccdb;
  --accent: #7c5cbf; --accent-dim: rgba(124,92,191,0.1);
  --header-bg: rgba(248,248,242,0.92);
  --green: #2ecc71; --green-dim: rgba(46,204,113,0.1);
  --yellow: #8c8c00; --yellow-dim: rgba(140,140,0,0.08);
  --orange: #c77c2a; --orange-dim: rgba(199,124,42,0.1);
  --red: #cc3333; --red-dim: rgba(204,51,51,0.1);
  --green-bg: rgba(31,168,84,0.1);
  --yellow-bg: rgba(140,140,0,0.08);
  --red-bg: rgba(204,34,34,0.1);
  --legendary-color: #c77c2a; --legendary-bg: rgba(199,124,42,0.1);
  --epic-color: #b5559d;      --epic-bg: rgba(181,85,157,0.1);
  --rare-color: #2999b5;      --rare-bg: rgba(41,153,181,0.1);
  --uncommon-color: #8c8c00;  --uncommon-bg: rgba(140,140,0,0.08);
  --common-color: #6272a4;    --common-bg: rgba(98,114,164,0.1);
}

/* ═══ DRAKE INTERPLANETARY — industrial orange, gunmetal dark ═══ */
body.drake {
  --bg: #0c0c0b; --surface: #181715; --surface2: #211f1c; --surface3: #2a2724;
  --border: rgba(232,105,11,0.18); --border-hover: rgba(232,105,11,0.45); --border-hard: rgba(232,105,11,0.65);
  --text: #e8e0d4; --text-muted: #7a6f62; --text-dim: #3a342e;
  --accent: #e8690b; --accent-glow: rgba(232,105,11,0.15); --accent-dim: rgba(232,105,11,0.08); --accent2: #ff9a3c;
  --header-bg: rgba(12,12,11,0.95);
  --green: #50fa7b; --green-dim: rgba(80,250,123,0.12);
  --yellow: #e8c060; --yellow-dim: rgba(232,192,96,0.10);
  --orange: #e8690b; --orange-dim: rgba(232,105,11,0.12);
  --red: #ff5555; --red-dim: rgba(255,85,85,0.12);
  --green-bg: rgba(80,250,123,0.1);
  --yellow-bg: rgba(232,192,96,0.08);
  --red-bg: rgba(255,85,85,0.1);
  --legendary-color: #e8a80b; --legendary-bg: rgba(232,168,11,0.1);
  --epic-color: #c47dd4; --epic-bg: rgba(196,125,212,0.1);
  --rare-color: #3ab0d4; --rare-bg: rgba(58,176,212,0.1);
  --uncommon-color: #a8c060; --uncommon-bg: rgba(168,192,96,0.08);
  --common-color: #7a6f62; --common-bg: rgba(122,111,98,0.12);
  --radius: 3px; --radius-lg: 4px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  font-family: var(--font-body);
  background-image:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(232,105,11,0.04) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 17.3V34.6L30 52 0 34.6V17.3z' fill='none' stroke='rgba(232,105,11,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* ═══ AEGIS DYNAMICS — military steel, blue tactical ═══ */
body.aegis {
  --bg: #090c14; --surface: #111826; --surface2: #192030; --surface3: #212c3e;
  --border: rgba(58,123,213,0.2); --border-hover: rgba(58,123,213,0.5); --border-hard: rgba(58,123,213,0.7);
  --text: #d4dce8; --text-muted: #5a6a82; --text-dim: #2a3444;
  --accent: #3a7bd5; --accent-glow: rgba(58,123,213,0.15); --accent-dim: rgba(58,123,213,0.08); --accent2: #5a9bf5;
  --header-bg: rgba(9,12,20,0.96);
  --green: #50fa7b; --green-dim: rgba(80,250,123,0.12);
  --yellow: #7ab8f5; --yellow-dim: rgba(122,184,245,0.10);
  --orange: #5a9bf5; --orange-dim: rgba(90,155,245,0.12);
  --red: #ff5555; --red-dim: rgba(255,85,85,0.12);
  --green-bg: rgba(80,250,123,0.1);
  --yellow-bg: rgba(122,184,245,0.08);
  --red-bg: rgba(255,85,85,0.1);
  --legendary-color: #e8a80b; --legendary-bg: rgba(232,168,11,0.1);
  --epic-color: #c47dd4; --epic-bg: rgba(196,125,212,0.1);
  --rare-color: #3ab0d4; --rare-bg: rgba(58,176,212,0.1);
  --uncommon-color: #7ab8f5; --uncommon-bg: rgba(122,184,245,0.08);
  --common-color: #5a6a82; --common-bg: rgba(90,106,130,0.12);
  --radius: 2px; --radius-lg: 3px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  font-family: var(--font-body);
  background-image:
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(58,123,213,0.06) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(58,123,213,0.04) 39px, rgba(58,123,213,0.04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(58,123,213,0.04) 39px, rgba(58,123,213,0.04) 40px);
}

/* ═══ ANVIL AEROSPACE — mil-spec olive/amber, rugged ═══ */
body.anvil {
  --bg: #0a0d08; --surface: #161910; --surface2: #1e2218; --surface3: #262b1e;
  --border: rgba(138,171,60,0.2); --border-hover: rgba(138,171,60,0.45); --border-hard: rgba(138,171,60,0.65);
  --text: #d8e0c8; --text-muted: #62705a; --text-dim: #2c3422;
  --accent: #8aab3c; --accent-glow: rgba(138,171,60,0.15); --accent-dim: rgba(138,171,60,0.08); --accent2: #a8cc58;
  --header-bg: rgba(10,13,8,0.96);
  --green: #50fa7b; --green-dim: rgba(80,250,123,0.12);
  --yellow: #a8cc58; --yellow-dim: rgba(168,204,88,0.10);
  --orange: #8aab3c; --orange-dim: rgba(138,171,60,0.12);
  --red: #ff5555; --red-dim: rgba(255,85,85,0.12);
  --green-bg: rgba(80,250,123,0.1);
  --yellow-bg: rgba(168,204,88,0.08);
  --red-bg: rgba(255,85,85,0.1);
  --legendary-color: #e8a80b; --legendary-bg: rgba(232,168,11,0.1);
  --epic-color: #c47dd4; --epic-bg: rgba(196,125,212,0.1);
  --rare-color: #3ab0d4; --rare-bg: rgba(58,176,212,0.1);
  --uncommon-color: #a8cc58; --uncommon-bg: rgba(168,204,88,0.08);
  --common-color: #62705a; --common-bg: rgba(98,112,90,0.12);
  --radius: 2px; --radius-lg: 3px;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  font-family: var(--font-body);
  background-image:
    radial-gradient(ellipse 80% 40% at 20% 80%, rgba(138,171,60,0.04) 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(138,171,60,0.025) 8px, rgba(138,171,60,0.025) 9px);
}

/* ═══ THEME PICKER ═══ */
.theme-picker { display: flex; gap: 4px; align-items: center; }
.theme-chip { padding: 4px 9px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; transition: all 0.15s; line-height: 1; }
.theme-chip:hover { border-color: var(--border-hover); color: var(--text); }
body.drake .theme-chip[data-theme="drake"] { background: #e8690b; color: #000; border-color: #e8690b; }
body.aegis .theme-chip[data-theme="aegis"] { background: #3a7bd5; color: #fff; border-color: #3a7bd5; }
body.anvil .theme-chip[data-theme="anvil"] { background: #8aab3c; color: #000; border-color: #8aab3c; }

/* ═══ FONT SIZE PICKER ═══ */
.font-size-picker { display: flex; gap: 2px; align-items: center; }
.fs-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; padding: 2px 6px; line-height: 1; transition: all 0.15s; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }
.fs-btn[data-step="0"] { font-size: 9px;  padding: 4px 7px; }
.fs-btn[data-step="1"] { font-size: 11px; padding: 3px 7px; }
.fs-btn[data-step="2"] { font-size: 13px; padding: 3px 6px; }
.fs-btn[data-step="3"] { font-size: 15px; padding: 2px 6px; }
.fs-btn[data-step="4"] { font-size: 17px; padding: 1px 6px; }
.fs-btn:hover { border-color: var(--border-hover); color: var(--text); }
.fs-btn.active { border-color: var(--accent); color: var(--accent); }