/*
 * app-shell.css — UI-only re-skin layer for the legacy app + auth pages.
 *
 * Goal: bring every non-wizard page onto the same clean, "transactional email"
 * look as the new dashboard flow (dashboard-v2) — pure white surfaces, hairline
 * borders, flat shadows, a single green accent, no purple, calm interactions.
 *
 * How it works (and why it's safe):
 *   This file is loaded AFTER styles.css. styles.css already drives every page
 *   through shared design tokens (--card, --line, --border-*, --shadow*,
 *   --radius*, --accent2, --gradient, --input-bg). By re-mapping those tokens
 *   here we re-skin almost everything without touching any page markup or JS.
 *   A short tail of component overrides handles the few spots the tokens can't
 *   reach (header blur, the gradient-text nav link, the green→purple button).
 *
 *   No markup is restructured, no class/ID is renamed, no behaviour changes.
 *   Removing the <link> for this file fully reverts the look.
 *
 * Design reference: landing/dashboard-v2-inline.css §1 (Tokens) — the same
 * #2e7d0f accent, #f0f0f0 hairlines, white surfaces and flat radii.
 */

/* ─────────────────────────────────────────────────────────────────
 * 1. Token remap — light (default)
 * ───────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces: pure white, faint greys (was #f5f7fa bg + soft greys) */
  --bg: #ffffff;
  --bg2: #fafafa;
  --card: #ffffff;
  --card2: #fafafa;
  --card-modal: #ffffff;

  /* Hairlines (was translucent black at .08–.14) */
  --line: #f0f0f0;
  --border-1: #f0f0f0;
  --border-2: #ececec;
  --border-3: #e3e5e8;

  --surface-1: #fafafa;
  --surface-2: #f6f7f8;
  --surface-3: #f0f1f2;

  /* Flat shadows (was 0 20px 60px) */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Tighter radii (was 16 / 12) */
  --radius: 12px;
  --radius2: 10px;

  /* Single green accent — kill the purple secondary + gradients */
  --accent2: #2e7d0f;
  --accent2-bg: rgba(46, 125, 15, 0.10);
  --gradient: #2e7d0f;
  --accent-hover: #266a0c;   /* new — used by the button override below */

  /* Clean white inputs (was a grey fill) */
  --input-bg: #ffffff;

  /* Solid (no blur) header/blur backdrops */
  --bg-blur: rgba(255, 255, 255, 0.92);
  --bg-blur-strong: rgba(255, 255, 255, 0.97);
}

/* ─────────────────────────────────────────────────────────────────
 * 2. Token remap — dark (mirrors dashboard-v2 dark palette)
 * ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0b0f1a;
  --bg2: #0f1422;
  --card: #121826;
  --card2: #0f1422;
  --card-modal: #121826;

  --line: rgba(255, 255, 255, 0.06);
  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(255, 255, 255, 0.14);

  --surface-1: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.06);

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);

  --accent: #9bf94c;
  --accent2: #9bf94c;
  --accent2-bg: rgba(155, 249, 76, 0.10);
  --gradient: #9bf94c;
  --accent-hover: #aaff5e;
  --on-accent: #0b0f1a;

  --input-bg: rgba(255, 255, 255, 0.04);

  --bg-blur: rgba(11, 15, 26, 0.85);
  --bg-blur-strong: rgba(11, 15, 26, 0.97);
}

/* ─────────────────────────────────────────────────────────────────
 * 3. Component overrides — the few spots tokens can't reach
 * ───────────────────────────────────────────────────────────────── */

/* Header: solid surface + hairline, no glassy blur */
.header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

/* Brand mark: flatter corner to match the v2 brand-dot aesthetic */
.logo {
  border-radius: 8px;
  background: var(--accent-bg-1);
  border-color: var(--accent-bg-2);
}

/* "Studio"/"Create" used gradient-clipped text — make it a solid green link */
.navlinks a.nav-create,
.navlinks a.nav-studio {
  background: none;
  -webkit-text-fill-color: var(--accent);
  background-clip: initial;
  -webkit-background-clip: initial;
  color: var(--accent);
  font-weight: 700;
}
.navlinks a.nav-create:hover,
.navlinks a.nav-studio:hover {
  background: none;
  -webkit-text-fill-color: var(--accent-hover);
  color: var(--accent-hover);
}

/* Buttons: calm + flat (drop the hover lift), solid-green primary */
.btn:hover,
.btn:active {
  transform: none;
}
.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
  text-shadow: none;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: none;
  transform: none;
  color: var(--on-accent);
}