/* Art direction: True-crime detective show meets meta self-aware AI comedy
   Palette: noir maroon/charcoal neutrals, single warm gold accent (case-file gold), teal for Plex's AI presence
   Typography: 'Fraunces' (display, editorial-detective) + 'Work Sans' (body, clean readable)
   Density: balanced, dossier/case-file feel */

:root, [data-theme="light"] {
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #f0ece5;
  --color-surface-offset-2: #e8e2d8;
  --color-divider: #dcd5c9;
  --color-border: #cfc6b6;
  --color-text: #221d17;
  --color-text-muted: #6b6255;
  --color-text-faint: #a89d8b;
  --color-text-inverse: #f9f8f4;
  --color-primary: #7a1f2b;
  --color-primary-hover: #5c1620;
  --color-primary-active: #430f16;
  --color-primary-highlight: #e6cdd0;
  --color-plex: #0f7a72;
  --color-plex-hover: #0b5c56;
  --color-plex-highlight: #cfe6e3;
  --color-gold: #b6862c;
  --color-gold-hover: #93691f;
  --color-gold-highlight: #ecdfc0;
  --color-success: #3f7a35;
  --color-error: #a12c2c;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 30 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 30 / 0.12);
  --shadow-lg: 0 16px 36px oklch(0.2 0.02 30 / 0.18);
  --content-narrow: 640px;
  --content-default: 880px;
  --content-wide: 1120px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', 'Helvetica Neue', sans-serif;
}

[data-theme="dark"] {
  --color-bg: #17130f;
  --color-surface: #1c1712;
  --color-surface-2: #211b15;
  --color-surface-offset: #241d17;
  --color-surface-offset-2: #2c241c;
  --color-divider: #34291f;
  --color-border: #45362a;
  --color-text: #ede6da;
  --color-text-muted: #b0a493;
  --color-text-faint: #7a6d5b;
  --color-text-inverse: #221a14;
  --color-primary: #d1495b;
  --color-primary-hover: #e06373;
  --color-primary-highlight: #3d2226;
  --color-plex: #4fc9bd;
  --color-plex-hover: #6fd8ce;
  --color-plex-highlight: #1c3634;
  --color-gold: #e0b354;
  --color-gold-hover: #edc978;
  --color-gold-highlight: #3a301c;
  --color-success: #7fbf6f;
  --color-error: #e0716b;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 16px 36px oklch(0 0 0 / 0.5);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
button { font: inherit; color: inherit; cursor: pointer; background:none; border:none; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }
h1,h2,h3 { font-family: var(--font-display); text-wrap: balance; line-height:1.1; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}