/* Base Styles */
:root {
  /* Colors - Sophisticated Dark Palette */
  --bg-color: #000000;
  --text-primary: #f2f2f2;
  --text-secondary: #c8c8c8;
  --text-tertiary: #a0a0a0;
  --text-quaternary: #808080;
  --text-light: #e5e5e5;
  --border-color: #333333;
  --border-light: #1a1a1a;
  --hover-color: #0a0a0a;
  --accent-color: #ffffff;

  /* Opacity System */
  --opacity-primary: 0.92; /* Titles, active states */
  --opacity-secondary: 0.72; /* Body text, descriptions */
  --opacity-tertiary: 0.55; /* Headers, meta info */
  --opacity-subtle: 0.35; /* Disabled, very subtle */
  --opacity-muted: 0.18; /* Hover backgrounds, elevated borders */
  --opacity-border: 0.14; /* Borders, backgrounds */
  --opacity-faint: 0.05; /* Ultra-subtle dividers, bracket lines */
  --opacity-ghost: 0.03; /* Barely-there fills */
  --opacity-dim: 0.25; /* Inactive elements */
  --opacity-quiet: 0.48; /* Secondary meta floor — 4.8:1 on black, WCAG AA */
  --opacity-bright: 0.85; /* Emphasized text below primary */

  /* Typography — Aspekta */
  --font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-size-3xs: 8px; /* Bracket slots, tarot corners, micro labels */
  --font-size-2xs: 10px; /* Micro UI labels, toggles */
  --font-size-xs: 11px; /* Captions, meta */
  --font-size-sm: 12px; /* Meta, labels */
  --font-size-compact: 13px; /* Filter UI, quiz/tarot meta */
  --font-size-base: 15px; /* Body — unified reading size across all views */
  --font-size-md: 16px; /* Body emphasis, list titles */
  --font-size-lg: 18px; /* Card/modal titles */
  --font-size-xl: 24px; /* Section titles */
  --font-size-2xl: 28px; /* Page titles */
  --font-size-display: 32px; /* Reveal titles, season/tarot display */
  --font-size-3xl: 38px; /* Hero */

  /* Letter Spacing — bumped 10% */
  --letter-spacing: 0.0055em;
  --letter-spacing-tight: 0em;
  --letter-spacing-loose: 0;
  --letter-spacing-body: 0.011em; /* Body elements, tags, chips */
  --letter-spacing-wide: 0.022em; /* Logo, slightly open */
  --letter-spacing-nav: 0.033em; /* Nav buttons, filter labels */
  --letter-spacing-label: 0.044em; /* Only for uppercase labels */
  --letter-spacing-display: 0.15em; /* Wide tracked display glyphs (tarot, zodiac) */
  --letter-spacing-display-tight: -0.01em; /* Large display titles */

  /* Line Heights */
  --line-height-tight: 1.15;
  --line-height-base: 1.45;
  --line-height-relaxed: 1.7; /* single body rhythm — all reading text routes here */

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 450;
  --font-semibold: 500;
  --font-bold: 600;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Layout */
  --header-height: calc(56px + env(safe-area-inset-top, 0px));
  --button-height: 32px;
  --page-gutter: 36px;
  --search-height: calc(
    var(--spacing-lg) * 2 + 40px + 1px
  ); /* search bar: padding + input + border */
  --border-radius: 0;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Z-index */
  --z-header: 1000;
  --z-controls: 1000;
  --z-tooltip: 1001;
  --z-modal: 1100;
}