/*
 * Update 6.1 (docs/UPDATE_6_1_THEME_RPG_CLASSIC.md): theme "RPG Classic", values from realpromptgenerator.com tokens.css.
 * Loaded by rpg_head only while the switch theme_rpg_classic is on, so switching it off brings back the Cosmos look
 * exactly (the Cosmos values stay in tokens.css and each page file). Token NAMES stay as they are; only values change.
 * ":root:root:root" outranks every per-page token block (body.kvh, .s6, .sb2 ...) and the old light-mode blocks
 * (dark only, decision D2), whatever order the stylesheets load in.
 * Note: --violet keeps its name but now holds the selection cyan. A rename is a later cleanup.
 */
:root:root:root {
  /* Kritiverse names (spec section 2) */
  --void: #07080d; --deep: #0c0e16; --panel: #12141e; --panel-2: #1d1f28; --sunken: #0b0c13;
  --glass: rgba(20, 23, 34, 0.62); --hover: rgba(255, 255, 255, 0.045); --active: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #eef0f7; --ink-muted: #b7bbcc;
  --saffron: #f97316; --saffron-fill: #ea580c; --saffron-text: #fb923c; --on-saffron: #ffffff; --saffron-soft: rgba(249, 115, 22, 0.12);
  --violet: #22d3ee; --violet-2: #67e8f9; --violet-tint: rgba(34, 211, 238, 0.12);
  --accent-3: #a78bfa;
  --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --tip: #7dd3fc;
  --scrim: rgba(3, 4, 8, 0.7);
  --wave: #4b5066; --wave-on: #22d3ee;
  --f-disp: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;

  /* shared site names (tokens.css) */
  --bg: #07080d; --bg-2: #0c0e16; --surface: rgba(20, 23, 34, 0.62); --surface-solid: #12141e;
  --surface-2: rgba(255, 255, 255, 0.045); --surface-3: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef0f7; --muted: #8b90a5;
  --accent: #f97316; --brand: #f97316; --accent-soft: rgba(249, 115, 22, 0.12); --accent-2: #22d3ee;
  --sel: #22d3ee; --sel-soft: rgba(34, 211, 238, 0.14);
  --err: #f87171;
  --font: var(--f-body); --display: var(--f-disp); --mono: var(--f-mono);

  /* the app sidebar (shell6.css) */
  --s6-void: #07080d; --s6-deep: #0c0e16; --s6-panel: #12141e; --s6-line: rgba(255, 255, 255, 0.08); --s6-ink: #eef0f7; --s6-muted: #b7bbcc;
  --s6-label: #8b90a5; --s6-saffron: #f97316; --s6-saffron-text: #fb923c; --s6-on-saffron: #ffffff; --s6-violet: #22d3ee; --s6-violet-ico: #67e8f9;
  --s6-sel: rgba(255, 255, 255, 0.08); --s6-ui: var(--f-body);

  /* admin (admin-v2.css) */
  --nv-deep: #0c0e16; --nv-line: rgba(255, 255, 255, 0.08); --nv-saffron: #f97316; --nv-saffron-text: #fb923c; --nv-ink-muted: #b7bbcc;

  /* the Cosmos colours pages used as raw hex (tokens.css --k-*), now in RPG values */
  --k-saffron: #f97316; --k-saffron-text: #fb923c; --k-saffron-text-2: #fb923c; --k-on-saffron: #ffffff;
  --k-violet: #22d3ee; --k-violet-2: #67e8f9; --k-violet-3: #67e8f9; --k-violet-4: #a78bfa; --k-rose: #a78bfa;
  --k-void: #07080d; --k-deep: #0c0e16; --k-deep-2: #0c0e16; --k-sunken: #0b0c13;
  --k-panel: #12141e; --k-panel-2: #1d1f28; --k-panel-3: #12141e; --k-panel-4: #1d1f28;
  --k-line: rgba(255, 255, 255, 0.08); --k-line-2: rgba(255, 255, 255, 0.16); --k-line-3: rgba(255, 255, 255, 0.16);
  --k-ink: #eef0f7; --k-ink-muted: #b7bbcc; --k-ink-muted-2: #b7bbcc; --k-label: #8b90a5; --k-dim: #8b90a5; --k-dim-2: #8b90a5;

  color-scheme: dark;
}

/* Per-page token blocks: same values under the names each page uses */
:root:root:root body.kvh {
  --void: #07080d; --deep: #0c0e16; --panel: #12141e; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #eef0f7; --ink-muted: #b7bbcc; --sunken: #0b0c13; --saffron: #f97316; --saffron-text: #fb923c; --on-saffron: #ffffff;
  --violet: #22d3ee; --violet-text: #67e8f9; --violet-tint: rgba(34, 211, 238, 0.12); --saffron-tint: rgba(249, 115, 22, 0.14); --rose: #a78bfa;
  --glass: rgba(20, 23, 34, 0.62); --shadow: rgba(0, 0, 0, 0.8);
  --grad: linear-gradient(90deg, #f97316, #a78bfa, #22d3ee, #a78bfa, #f97316);
  --f-body: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, sans-serif; --f-disp: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, sans-serif;
}
:root:root:root body.kve, :root:root:root .kve-in-shell {
  --bg: #07080d; --deep: #0c0e16; --panel: #12141e; --panel-2: #1d1f28; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --ink: #eef0f7; --muted: #b7bbcc; --dim: #8b90a5;
  --violet: #22d3ee; --violet-2: #67e8f9; --violet-a: rgba(34, 211, 238, 0.18);
  --saffron: #f97316; --on-saffron: #ffffff; --danger: #f87171; --ok: #34d399;
  --clip-video: #1d2a3a; --clip-audio: #123d36; --clip-text: #3b2f63;
  --f-display: "Inter", "Inter Fallback", system-ui, sans-serif; --f-body: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, sans-serif;
}
:root:root:root .ac-page {
  --ac-bg: #07080d; --ac-panel: #0c0e16; --ac-card: #12141e; --ac-line: rgba(255, 255, 255, 0.08); --ac-text: #eef0f7; --ac-muted: #b7bbcc;
  --ac-saffron: #f97316; --ac-saffron-t: #fb923c; --ac-violet: #22d3ee;
}
:root:root:root .bl-page {
  --bl-void: #07080d; --bl-deep: #0c0e16; --bl-panel: #12141e; --bl-line: rgba(255, 255, 255, 0.08); --bl-ink: #eef0f7; --bl-muted: #b7bbcc;
  --bl-saffron: #f97316; --bl-saffron-t: #fb923c; --bl-rose: #a78bfa; --bl-violet: #22d3ee;
  --bl-head: "Inter", "Inter Fallback", system-ui, sans-serif; --bl-body: "Inter", "Inter Fallback", "Noto Sans Devanagari", system-ui, sans-serif;
}
:root:root:root .bl-page.bl-hi, :root:root:root .bl-page [lang="hi"] { --bl-body: "Noto Sans Devanagari", "Inter", system-ui, sans-serif; }
:root:root:root .sb2 { --tint: rgba(34, 211, 238, 0.12); }

/* Fonts: Inter for text and titles (tight tracking), JetBrains Mono for small labels (the RPG signature) */
:root:root:root body { font-family: var(--f-body); }
:root:root:root h1, :root:root:root .page-title { font-family: var(--f-disp); font-weight: 700; letter-spacing: -0.02em; }
:root:root:root .s6-word { font: 700 13.5px var(--f-disp); letter-spacing: 0.16em; }
:root:root:root .s6-glabel, :root:root:root .label, :root:root:root .eyebrow, :root:root:root .group-label, :root:root:root .section-badge,
:root:root:root .sb2-th, :root:root:root .nv-label {
  font-family: var(--f-mono); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
}
html[lang="hi"]:root:root body, :root:root:root [lang="hi"] { font-family: "Noto Sans Devanagari", var(--f-body); }

/* Components, calm (Studio) by default: section 3 P3 */
:root:root:root .btn.primary { border-color: transparent; color: var(--on-saffron); background: var(--saffron-fill); }
:root:root:root .btn.primary:hover { background: var(--saffron); }
:root:root:root .chip.active, :root:root:root .chip[aria-pressed="true"] { color: var(--ink); border-color: rgba(249, 115, 22, 0.7); background: rgba(249, 115, 22, 0.18); }
:root:root:root :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
:root:root:root ::selection { background: rgba(249, 115, 22, 0.45); }
:root:root:root .s6-item.is-on { background: var(--active); box-shadow: inset 3px 0 0 var(--saffron); }
:root:root:root .toggle input:checked { background: var(--saffron-fill); border-color: var(--saffron-fill); }

/* Dark only (D2): the theme switches are hidden while RPG Classic is on; their code stays */
:root:root:root [data-theme-toggle], :root:root:root [data-theme-btn] { display: none !important; }

/* Studio (logged in): flat background, no aurora, no grid, no sheen */
html[data-mode="studio"] body::before, html[data-mode="studio"] body::after { display: none; }
html[data-mode="studio"] body { background: var(--void); }

/* Showroom (public pages): aurora, faint grid, glass cards, sheen primary button, gradient hero titles */
html[data-mode="showroom"] body { background: var(--void); }
html[data-mode="showroom"] body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; display: block;
  background:
    radial-gradient(40% 35% at 15% 10%, rgba(249, 115, 22, 0.22), transparent 70%),
    radial-gradient(35% 30% at 85% 20%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(45% 40% at 60% 90%, rgba(167, 139, 250, 0.12), transparent 70%);
  animation: kv-aurora 26s ease-in-out infinite alternate;
}
html[data-mode="showroom"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
@media (max-width: 767px) { html[data-mode="showroom"] body::before { opacity: .35; } }
html[data-mode="showroom"] .card { background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
html[data-mode="showroom"] .btn.primary {
  color: #fff; background: linear-gradient(120deg, var(--saffron), color-mix(in srgb, var(--saffron) 55%, var(--accent-3)) 60%, var(--saffron));
  background-size: 200% 100%; animation: kv-sheen 6s linear infinite; box-shadow: 0 8px 26px -10px var(--saffron), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-mode="showroom"] .hero-title {
  font-weight: 750; letter-spacing: -0.04em; line-height: 1.02;
  background: linear-gradient(110deg, #fff 10%, #ffd9bf 35%, var(--saffron) 55%, var(--violet) 80%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes kv-sheen { to { background-position: -200% 0; } }
@keyframes kv-aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(3%, 2%, 0) rotate(4deg); } 100% { transform: translate3d(-2%, 4%, 0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-mode="showroom"] body::before, html[data-mode="showroom"] .btn.primary { animation: none; }
}

/* Scrollbars (RPG) */
:root:root:root ::-webkit-scrollbar { width: 10px; height: 10px; }
:root:root:root ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
:root:root:root .adm-v2 { --nv-deep: #0c0e16; --nv-line: rgba(255, 255, 255, 0.08); --nv-saffron: #f97316; --nv-saffron-text: #fb923c; --nv-ink-muted: #b7bbcc; }