/* ═══════════════════════════════════════════════════════════════════════════
   360LM theme-v2 — per-app design-token layer (VCC Phase 5, 2026-07-02, ADR-100)

   USAGE (opt-in per PWA):
     1. <link rel="stylesheet" href="/shared/theme-v2.css">  (AFTER the app's inline <style>)
     2. <html data-theme="ember-v2">   ← pick ONE preset below
     3. Consume the tokens (--bg/--surface/--card/--border/--accent/--accent2/
        --text/--muted/--radius/--font …) exactly as PWAs already do.

   Presets do NOT change structural tokens (z-index ladder, --bnav-h, safe-bottom).
   A PWA that does not link this file is completely unaffected.
   New presets: add a [data-theme="…"] block here + one row in
   docs/style/identity-and-design-system.md — never fork tokens inside a PWA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared extras every preset provides ──────────────────────────────────── */
html[data-theme] {
  --radius-sm: 8px;
  --radius-lg: 18px;
  --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 1px 8px rgba(0,0,0,.15);
  --sh-2: 0 4px 14px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --dur-fast: .15s;
  --dur-med: .3s;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
html[data-theme] :is(button,select,input,a,[tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ── ember-v2 — refined black + molten orange (Hub) ───────────────────────── */
html[data-theme="ember-v2"] {
  --bg: #0b0908;
  --bg-grad: radial-gradient(1200px 500px at 50% -10%, #201108 0%, #0b0908 55%);
  --surface: #171310;
  --card: #1d1815;
  --card-top: #241d18;
  --border: #322922;
  --accent: #ff6b35;
  --accent2: #ffb800;
  --accent-grad: linear-gradient(120deg, #ff6b35 10%, #ffb800 90%);
  --text: #f4efe9;
  --muted: #9a8f85;
  --danger: #ef5350;
  --success: #34c77b;
  --info: #4aa8e0;
  --radius: 14px;
  --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

/* ── navy-classic — Recce/standard (tokens = current values, for adoption) ── */
html[data-theme="navy-classic"] {
  --bg: #f8fafc; --surface: #ffffff; --card: #ffffff; --card-top: #ffffff;
  --border: #e2e8f0;
  --accent: #f97316; --accent2: #d97706;
  --accent-grad: linear-gradient(120deg, #f97316, #fb923c);
  --text: #0f172a; --muted: #64748b;
  --danger: #dc2626; --success: #16a34a; --info: #2563eb;
  --radius: 12px;
  --font: 'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --bg-grad: none;
  --sh-1: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --sh-2: 0 6px 18px rgba(15,23,42,.12);
}

/* ── forest — deep green ops look ─────────────────────────────────────────── */
html[data-theme="forest"] {
  --bg: #0a120d; --bg-grad: radial-gradient(1100px 480px at 50% -10%, #10251a 0%, #0a120d 55%);
  --surface: #101a14; --card: #15221a; --card-top: #1a2a20; --border: #24382c;
  --accent: #34c77b; --accent2: #a3e635;
  --accent-grad: linear-gradient(120deg, #34c77b, #a3e635);
  --text: #ecf5ee; --muted: #8aa392;
  --danger: #ef5350; --success: #34c77b; --info: #4aa8e0;
  --radius: 14px;
  --font: 'Manrope', system-ui, sans-serif; --font-display: 'Sora', system-ui, sans-serif;
}

/* ── ivory — warm light professional ──────────────────────────────────────── */
html[data-theme="ivory"] {
  --bg: #faf7f2; --bg-grad: linear-gradient(180deg, #fdfaf5 0%, #f4efe6 100%);
  --surface: #ffffff; --card: #ffffff; --card-top: #ffffff; --border: #e7dfd2;
  --accent: #c2410c; --accent2: #b45309;
  --accent-grad: linear-gradient(120deg, #c2410c, #ea580c);
  --text: #292524; --muted: #78716c;
  --danger: #dc2626; --success: #15803d; --info: #1d4ed8;
  --radius: 14px;
  --font: 'Manrope', system-ui, sans-serif; --font-display: 'Sora', system-ui, sans-serif;
  --sh-1: 0 1px 3px rgba(41,37,36,.08), 0 1px 10px rgba(41,37,36,.05);
  --sh-2: 0 8px 22px rgba(41,37,36,.12);
}

/* ── slate — cool grey-teal utility ───────────────────────────────────────── */
html[data-theme="slate"] {
  --bg: #0c1116; --bg-grad: radial-gradient(1100px 480px at 50% -10%, #142030 0%, #0c1116 55%);
  --surface: #131a22; --card: #182129; --card-top: #1d2833; --border: #263341;
  --accent: #2dd4bf; --accent2: #60a5fa;
  --accent-grad: linear-gradient(120deg, #2dd4bf, #60a5fa);
  --text: #edf3f7; --muted: #8fa3b3;
  --danger: #f87171; --success: #34d399; --info: #60a5fa;
  --radius: 14px;
  --font: 'Manrope', system-ui, sans-serif; --font-display: 'Sora', system-ui, sans-serif;
}

/* ── coral-pulse — vibrant pink+amber, energetic/social apps (demo preset, built via
   /shared/theme-editor.html's "playful/vibrant/energetic/bold/youth/social" keyword suggestion,
   2026-07-06 — not yet adopted by any PWA) ─────────────────────────────────────────────────── */
html[data-theme="coral-pulse"] {
  --bg: #120a1a; --bg-grad: radial-gradient(1200px 500px at 50% -10%, #2a1030 0%, #120a1a 55%);
  --surface: #1a1024; --card: #221530; --card-top: #2b1c3b; --border: #3a2a4d;
  --accent: #ec4899; --accent2: #f59e0b;
  --accent-grad: linear-gradient(120deg, #ec4899 10%, #f59e0b 90%);
  --text: #f7edf7; --muted: #b39cc4;
  --danger: #ef4444; --success: #22c55e; --info: #38bdf8;
  --radius: 18px;
  --font: 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;
}
