/* CSS Custom Properties (Theme) */
/* Atmospheric direction — see project-docs/top-nav-redesign/explorations/05-atmospheric.html */

:root {
  /* ===== Light Theme (Default) — atmospheric warm cream ===== */

  /* Backgrounds — warm cream surfaces, gradient endpoints for nav backplates */
  --bg-primary: #f7f0e3;
  --bg-secondary: #fdf6ed;
  --bg-tertiary: rgba(28, 23, 34, 0.05);
  --bg-elevated: #ffffff;

  --bg-primary-from: #fdf6ed;
  --bg-primary-to: #f6e9da;
  --bg-secondary-from: #fffaf2;
  --bg-secondary-to: #fbecd9;

  /* Text — warm purple-tinged */
  --text-primary: #1c1722;
  --text-secondary: #5a4f6a;
  --text-tertiary: #9087a0;
  --text-inverse: #fffaf2;

  /* Borders & Dividers */
  --border-color: rgba(28, 23, 34, 0.10);
  --border-subtle: rgba(28, 23, 34, 0.06);
  --border-strong: rgba(28, 23, 34, 0.18);

  /* Primary Accent — Rose/Pink (used ONCE per view as the CTA) */
  --accent-color: #c0518e;
  --accent-hover: #b04680;
  --accent-subtle: rgba(192, 81, 142, 0.10);
  --accent-text: #fffaf2;
  --accent-from: #e16a8f;
  --accent-to: #a83d80;

  /* Secondary Accent — Lavender (active tabs, decorative wordmark) */
  --secondary-accent: #9461c4;
  --secondary-accent-hover: #7e4fb0;
  --secondary-accent-subtle: rgba(148, 97, 196, 0.16);
  --secondary-accent-text: #5e3590;
  --secondary-from: #b384e0;
  --secondary-to: #6d3aa6;

  /* Status Colors (unchanged — status semantics are independent of brand) */
  --success-color: #10b981;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;

  --warning-color: #f59e0b;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;

  --error-color: #ef4444;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #dc2626;

  --info-color: #3b82f6;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;

  /* Interactive States */
  --hover-bg: rgba(0, 0, 0, 0.04);
  --active-bg: rgba(0, 0, 0, 0.08);
  --focus-ring: rgba(192, 81, 142, 0.4);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(28, 23, 34, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(28, 23, 34, 0.07), 0 2px 4px -1px rgba(28, 23, 34, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(28, 23, 34, 0.08), 0 4px 6px -2px rgba(28, 23, 34, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(28, 23, 34, 0.10), 0 10px 10px -5px rgba(28, 23, 34, 0.04);
  --shadow-glow: 0 8px 28px rgba(192, 81, 142, 0.30), 0 0 0 1px rgba(192, 81, 142, 0.18);

  /* Desaturated primary used to tint Material-elevation shadows.
   * #c0518e (full primary) → desaturated ~50% toward grey (RGB 165, 110, 140).
   * Used as `rgba(var(--shadow-tint-rgb), <alpha>)` in elevation stacks. */
  --shadow-tint-rgb: 165, 110, 140;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.3s ease;

  /* Font stacks */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Inconsolata', 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-brand: 'Baumans', cursive;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* Atmospheric body backplate — soft radial halos behind the whole viewport */
  --bg-atmosphere-1: rgba(180, 130, 220, 0.18);
  --bg-atmosphere-2: rgba(255, 175, 130, 0.20);

  /* Syntax-highlight palette — consumed by both the homepage hero code
   * snippet (.dev-code) and the workspace detail page's lazy-hydrated
   * source disclosure (.detail-source-code). Keeping them in theme.css
   * means a single source of truth + automatic dark-mode flip. */
  --code-keyword: #6d3aa6;
  --code-fn:      #a83d80;
  --code-num:     #d97a6e;
  --code-str:     #5a8a72;
  --code-comment: #9087a0;
  --code-op:      #6b5a7a;
  --code-tp:      #b65a2a;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* ===== Dark Theme — atmospheric deep purple ===== */
[data-theme='dark'] {
  /* Backgrounds — deep purple-black with gradient endpoints */
  --bg-primary: #14101c;
  --bg-secondary: #100c17;
  --bg-tertiary: rgba(255, 250, 242, 0.05);
  --bg-elevated: #1a1424;

  --bg-primary-from: #1a1424;
  --bg-primary-to: #110d18;
  --bg-secondary-from: #15101e;
  --bg-secondary-to: #0c0913;

  /* Text — warm cream */
  --text-primary: #f6e9da;
  --text-secondary: #b5a8c4;
  --text-tertiary: #7a6f8a;
  --text-inverse: #14101c;

  /* Borders & Dividers */
  --border-color: rgba(246, 233, 218, 0.10);
  --border-subtle: rgba(246, 233, 218, 0.05);
  --border-strong: rgba(246, 233, 218, 0.20);

  /* Primary Accent — Warm Amber/Peach (CTA) */
  --accent-color: #f7b56e;
  --accent-hover: #ffc585;
  --accent-subtle: rgba(247, 181, 110, 0.15);
  --accent-text: #1a1424;
  --accent-from: #ffd194;
  --accent-to: #e89254;

  /* Secondary Accent — Pale Lavender (active tabs, decorative) */
  --secondary-accent: #c4a4e8;
  --secondary-accent-hover: #d4baef;
  --secondary-accent-subtle: rgba(196, 164, 232, 0.16);
  --secondary-accent-text: #d4bcef;
  --secondary-from: #d8c4f0;
  --secondary-to: #9c7cd5;

  /* Status Colors */
  --success-color: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);
  --success-border: rgba(34, 197, 94, 0.3);

  --warning-color: #e0a840;
  --warning-bg: rgba(224, 168, 64, 0.15);
  --warning-border: rgba(224, 168, 64, 0.3);

  --error-color: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.6);
  --error-border: rgba(239, 68, 68, 0.5);
  --error-text: #fcd5d5;

  --info-color: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);
  --info-border: rgba(59, 130, 246, 0.3);

  /* Interactive States */
  --hover-bg: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(255, 255, 255, 0.1);
  --focus-ring: rgba(247, 181, 110, 0.4);

  /* Shadows — subtler in dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 8px 28px rgba(247, 181, 110, 0.32), 0 0 0 1px rgba(247, 181, 110, 0.30);

  /* Desaturated primary tint for elevation shadows in dark mode.
   * #f7b56e (full peach primary) → desaturated ~50% (RGB 213, 180, 144). */
  --shadow-tint-rgb: 213, 180, 144;

  /* Dark-mode atmosphere — deeper, cooler halos */
  --bg-atmosphere-1: rgba(140, 100, 200, 0.18);
  --bg-atmosphere-2: rgba(220, 140, 90, 0.18);

  /* Syntax-highlight palette — lighter saturations to read against the
   * deep-purple backplate without screaming. */
  --code-keyword: #c4a4e8;
  --code-fn:      #f7b56e;
  --code-num:     #f0a07b;
  --code-str:     #8fc4a1;
  --code-comment: #7a6f8a;
  --code-op:      #a8a0b8;
  --code-tp:      #e8b48a;
}

/* Auto dark mode based on system preference (when no explicit theme set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-primary: #14101c;
    --bg-secondary: #100c17;
    --bg-tertiary: rgba(255, 250, 242, 0.05);
    --bg-elevated: #1a1424;

    --bg-primary-from: #1a1424;
    --bg-primary-to: #110d18;
    --bg-secondary-from: #15101e;
    --bg-secondary-to: #0c0913;

    --text-primary: #f6e9da;
    --text-secondary: #b5a8c4;
    --text-tertiary: #7a6f8a;
    --text-inverse: #14101c;

    --border-color: rgba(246, 233, 218, 0.10);
    --border-subtle: rgba(246, 233, 218, 0.05);
    --border-strong: rgba(246, 233, 218, 0.20);

    --accent-color: #f7b56e;
    --accent-hover: #ffc585;
    --accent-subtle: rgba(247, 181, 110, 0.15);
    --accent-text: #1a1424;
    --accent-from: #ffd194;
    --accent-to: #e89254;

    --secondary-accent: #c4a4e8;
    --secondary-accent-hover: #d4baef;
    --secondary-accent-subtle: rgba(196, 164, 232, 0.16);
    --secondary-accent-text: #d4bcef;
    --secondary-from: #d8c4f0;
    --secondary-to: #9c7cd5;

    --success-color: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.3);

    --warning-color: #e0a840;
    --warning-bg: rgba(224, 168, 64, 0.15);
    --warning-border: rgba(224, 168, 64, 0.3);

    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.6);
    --error-border: rgba(239, 68, 68, 0.5);
    --error-text: #fcd5d5;

    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.3);

    --hover-bg: rgba(255, 255, 255, 0.06);
    --active-bg: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(247, 181, 110, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 8px 28px rgba(247, 181, 110, 0.32), 0 0 0 1px rgba(247, 181, 110, 0.30);
    --shadow-tint-rgb: 213, 180, 144;
    --bg-atmosphere-1: rgba(140, 100, 200, 0.18);
    --bg-atmosphere-2: rgba(220, 140, 90, 0.18);

    --code-keyword: #c4a4e8;
    --code-fn:      #f7b56e;
    --code-num:     #f0a07b;
    --code-str:     #8fc4a1;
    --code-comment: #7a6f8a;
    --code-op:      #a8a0b8;
    --code-tp:      #e8b48a;
  }
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body — atmospheric warm-cream backplate with soft radial halos.
 * Same surface treatment behind every page (SPA + static), so the
 * grain texture and gradient atmosphere span the entire viewport. */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background:
    radial-gradient(900px 500px at 0% 0%, var(--bg-atmosphere-1, rgba(180, 130, 220, 0.18)), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, var(--bg-atmosphere-2, rgba(255, 175, 130, 0.20)), transparent 60%),
    var(--bg-primary);
  min-height: 100vh;
  position: relative;
  transition:
    background-color var(--transition-slow),
    color var(--transition-slow);
}

/* Headings — DM Serif Display globally. Every server-rendered page
 * (homepage, /explore, /featured, /u/:handle, /docs, /blog) inherits
 * this. DM Serif Display only ships in 400 weight + italic, so we
 * pin font-weight here too rather than letting page-specific rules
 * request 600/700 (which would be artificially bolded by the browser).
 * Per-page rules can override (e.g. tight UI labels staying in
 * var(--font-body)) by setting font-family on the specific element. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
}

/* Grain texture — fixed-position overlay so it stays put as the user scrolls.
 * Pointer-events disabled, blend-mode multiply tints the warm bg subtly. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

[data-theme='dark'] body::before,
[data-active-theme='dark'] body::before {
  mix-blend-mode: overlay;
  opacity: 0.32;
}

/* Prevent CLS before custom element upgrade */
app-shell:not(:defined) {
  display: block;
  min-height: 100vh;
  background: var(--bg-primary);
}

app-header:not(:defined) {
  display: block;
  height: 52px;
}

/* CodeMirror completion tooltip must render above the error panel (z-index: 10) */
.cm-tooltip-autocomplete {
  z-index: 100 !important;
}