/*
 * IT DICTIONARY — theme signatures
 * Each theme owns a visual mark, typography mood, glow language and surface treatment.
 * This layer intentionally sits after theme.css and before app.css.
 */

:root {
  --signature-mark: "◈";
  --signature-font: inherit;
  --signature-glow: linear-gradient(125deg, transparent 0%, color-mix(in srgb, var(--accent) 6%, transparent) 48%, transparent 100%);
  --signature-panel: radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 42%);
  --signature-radius: 16px;
  --signature-border: color-mix(in srgb, var(--accent) 38%, var(--border-light));
  --signature-button: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 64%, var(--green)));
}

/* Dark / terminal atlas */
[data-theme="dark"] {
  --signature-mark: "⌘";
  --signature-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --signature-glow: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%), linear-gradient(135deg, transparent 55%, color-mix(in srgb, var(--green) 5%, transparent));
  --signature-panel: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 38%), linear-gradient(145deg, #101826, #0d1117 62%);
  --signature-radius: 10px;
}

/* Light / editorial index */
[data-theme="light"] {
  --signature-mark: "✦";
  --signature-font: "DM Sans", -apple-system, sans-serif;
  --signature-glow: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 35%), linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--green) 4%, transparent));
  --signature-panel: linear-gradient(145deg, #f8fbff, #eef5fc 55%, #ffffff);
  --signature-radius: 18px;
}

/* NotebookLM / annotated paper */
[data-theme="notebooklm"] {
  --signature-mark: "✎";
  --signature-font: "DM Sans", "Noto Sans TC", sans-serif;
  --signature-glow: linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px);
  --signature-panel: linear-gradient(145deg, #fffaf0, #f3e5c9 52%, #fdf6e3);
  --signature-radius: 14px;
}

/* Dragon Quest / royal adventure */
[data-theme="dragonquest"] {
  --signature-mark: "♜";
  --signature-font: "Cinzel", Georgia, serif;
  --signature-glow: radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 36%), linear-gradient(135deg, transparent 60%, color-mix(in srgb, #2a5cb0 8%, transparent));
  --signature-panel: linear-gradient(145deg, #eef5ff, #d9e7fa 58%, #f8fbff);
  --signature-radius: 15px;
}

/* Cyber / neon HUD */
[data-theme="cyber"] {
  --signature-mark: "▣";
  --signature-font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --signature-glow: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px), radial-gradient(circle at 80% 10%, color-mix(in srgb, #ff00ff 12%, transparent), transparent 30%);
  --signature-panel: linear-gradient(145deg, #101625, #0a0a10 60%, #160d1d);
  --signature-radius: 6px;
}

/* Final Fantasy / crystal archive */
[data-theme="finalfantasy"] {
  --signature-mark: "◇";
  --signature-font: "Cormorant Garamond", Georgia, serif;
  --signature-glow: radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%), radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--green) 11%, transparent), transparent 32%);
  --signature-panel: linear-gradient(145deg, #1c2d4c, #101828 60%, #142d35);
  --signature-radius: 20px;
}

/* Mario / bright arcade */
[data-theme="mario"] {
  --signature-mark: "★";
  --signature-font: "Nunito", "Trebuchet MS", sans-serif;
  --signature-glow: radial-gradient(ellipse at 14% 7%, color-mix(in srgb, #ffffff 26%, transparent), transparent 24%), linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--green) 9%, transparent));
  --signature-panel: linear-gradient(145deg, #71a8ff, #5c94fc 54%, #4e81df);
  --signature-radius: 12px;
}

/* Resident Evil / classified survival dossier */
[data-theme="residentevil"] {
  --signature-mark: "☣";
  --signature-font: "Roboto Condensed", "Arial Narrow", sans-serif;
  --signature-glow: radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%), repeating-linear-gradient(118deg, transparent 0 86px, color-mix(in srgb, var(--accent) 4%, transparent) 87px 88px);
  --signature-panel: linear-gradient(145deg, #202016, #10100d 62%, #291411);
  --signature-radius: 4px;
}

/* Deep Dark / low-glare command deck */
[data-theme="deepdark"] {
  --signature-mark: "◉";
  --signature-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --signature-glow: radial-gradient(circle at 14% 6%, color-mix(in srgb, #62d7ff 12%, transparent), transparent 34%), radial-gradient(circle at 86% 88%, color-mix(in srgb, #58d6a0 8%, transparent), transparent 30%);
  --signature-panel: linear-gradient(145deg, #0d1d2b, #071019 62%, #0a2027);
  --signature-radius: 8px;
}

/* Shared signature application */
html:not(.bg-hidden) body {
  background-image: var(--signature-glow), var(--bg-image);
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
  background-size: cover, auto;
}

.app-header h1 {
  font-family: var(--signature-font);
  letter-spacing: .08em;
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.app-header h1::before {
  content: var(--signature-mark);
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 20px;
  color: var(--accent);
  border: 1px solid var(--signature-border);
  border-radius: var(--signature-radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 24%, transparent);
}

.brand-panel {
  background-image: var(--signature-panel);
}
.brand-logo, .card-logo {
  font-size: 0 !important;
  border-color: var(--signature-border) !important;
  border-radius: calc(var(--signature-radius) + 4px) !important;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card)) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
.brand-logo::before, .card-logo::before {
  content: var(--signature-mark);
  font-family: var(--signature-font);
  font-size: 32px;
  color: var(--accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 48%, transparent);
}
.card-logo::before { font-size: 27px; }
.brand-name, .auth-card h1, .auth-card h2 {
  font-family: var(--signature-font);
}

.card, .auth-card, .feature-modal-card, .result-card {
  border-radius: var(--signature-radius);
}
.btn, .btn-primary {
  background: var(--signature-button);
  border-radius: var(--signature-radius);
}

[data-theme="cyber"] .app-header,
[data-theme="residentevil"] .app-header {
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-theme="cyber"] .app-header { border-bottom-color: color-mix(in srgb, var(--accent) 38%, var(--border-light)); }
[data-theme="residentevil"] .app-header { border-bottom: 2px solid var(--accent); }
[data-theme="mario"] .app-header { border-bottom: 4px solid var(--accent); }
[data-theme="dragonquest"] .app-header { border-bottom: 2px solid var(--accent); }
[data-theme="finalfantasy"] .app-header h1::before { transform: rotate(45deg); }
[data-theme="notebooklm"] .app-header h1::before { border-radius: 6px 12px 6px 12px; }