:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--raw-black);
  --color-bg-elevated: var(--raw-black-soft);
  --color-bg-card: var(--raw-charcoal);
  --color-bg-card-hover: #222222;
  --color-bg-input: rgba(255, 255, 255, 0.06);
  --color-bg-overlay: rgba(8, 8, 8, 0.88);
  --color-bg-glass: rgba(8, 8, 8, 0.92);
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-muted: rgba(255, 255, 255, 0.52);
  --color-text-disabled: rgba(255, 255, 255, 0.32);
  --color-text-inverse: var(--raw-black);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-input: rgba(255, 255, 255, 0.14);
  --color-divider: rgba(255, 255, 255, 0.06);
  --color-surface-1: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.08);
  --color-surface-3: rgba(255, 255, 255, 0.12);
  --color-surface-yellow: rgba(255, 212, 0, 0.10);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.50);
  --shadow-yellow: 0 12px 30px rgba(255, 212, 0, 0.22);
  --shadow-focus: 0 0 0 4px rgba(255, 212, 0, 0.12);
  --overlay-hero: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(8, 8, 8, 0.85) 25%, rgba(8, 8, 8, 0.40) 45%, rgba(8, 8, 8, 0) 70%);
  --overlay-hero-bilateral: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(8, 8, 8, 0.88) 22%, rgba(8, 8, 8, 0.25) 42%, rgba(8, 8, 8, 0.25) 58%, rgba(8, 8, 8, 0.88) 78%, var(--color-bg) 92%, var(--color-bg) 100%);
  --overlay-hero-mobile: linear-gradient(180deg, rgba(8, 8, 8, 0.85) 0%, rgba(8, 8, 8, 0.55) 50%, rgba(8, 8, 8, 0.20) 100%);
  --overlay-card: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%);
  --overlay-card-soft: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.20) 100%);
  --color-accent-editorial: var(--raw-yellow);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--raw-paper);
  --color-bg-elevated: var(--raw-paper-soft);
  --color-bg-card: var(--raw-paper-soft);
  --color-bg-card-hover: var(--raw-cream);
  --color-bg-input: rgba(8, 8, 8, 0.04);
  --color-bg-overlay: rgba(247, 245, 242, 0.92);
  --color-bg-glass: rgba(247, 245, 242, 0.88);
  --color-text-primary: #171717;
  --color-text-secondary: rgba(8, 8, 8, 0.72);
  --color-text-muted: rgba(8, 8, 8, 0.56);
  --color-text-disabled: rgba(8, 8, 8, 0.32);
  --color-text-inverse: #FFFFFF;
  --color-border: rgba(8, 8, 8, 0.10);
  --color-border-strong: rgba(8, 8, 8, 0.18);
  --color-border-input: rgba(8, 8, 8, 0.14);
  --color-divider: rgba(8, 8, 8, 0.08);
  --color-surface-1: rgba(8, 8, 8, 0.03);
  --color-surface-2: rgba(8, 8, 8, 0.06);
  --color-surface-3: rgba(8, 8, 8, 0.10);
  --color-surface-yellow: rgba(255, 212, 0, 0.18);
  --shadow-sm: 0 2px 8px rgba(8, 8, 8, 0.06);
  --shadow-md: 0 8px 24px rgba(8, 8, 8, 0.08);
  --shadow-lg: 0 18px 50px rgba(8, 8, 8, 0.12);
  --shadow-yellow: 0 12px 30px rgba(255, 212, 0, 0.28);
  --shadow-focus: 0 0 0 4px rgba(255, 212, 0, 0.18);
  --overlay-hero: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(247, 240, 222, 0.85) 25%, rgba(247, 240, 222, 0.40) 45%, rgba(247, 240, 222, 0) 70%);
  --overlay-hero-bilateral: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(247, 240, 222, 0.92) 22%, rgba(247, 240, 222, 0.30) 42%, rgba(247, 240, 222, 0.30) 58%, rgba(247, 240, 222, 0.92) 78%, var(--color-bg) 92%, var(--color-bg) 100%);
  --overlay-hero-mobile: linear-gradient(180deg, rgba(247, 240, 222, 0.95) 0%, rgba(247, 240, 222, 0.65) 50%, rgba(247, 240, 222, 0.30) 100%);
  --overlay-card: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%);
  --overlay-card-soft: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.20) 100%);
  --color-accent-editorial: var(--raw-yellow-amber);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-bg: var(--raw-paper);
    --color-bg-elevated: var(--raw-paper-soft);
    --color-bg-card: var(--raw-paper-soft);
    --color-bg-card-hover: var(--raw-cream);
    --color-bg-input: rgba(8, 8, 8, 0.04);
    --color-bg-overlay: rgba(247, 245, 242, 0.92);
    --color-bg-glass: rgba(247, 245, 242, 0.88);
    --color-text-primary: #171717;
    --color-text-secondary: rgba(8, 8, 8, 0.72);
    --color-text-muted: rgba(8, 8, 8, 0.56);
    --color-text-disabled: rgba(8, 8, 8, 0.32);
    --color-text-inverse: #FFFFFF;
    --color-border: rgba(8, 8, 8, 0.10);
    --color-border-strong: rgba(8, 8, 8, 0.18);
    --color-border-input: rgba(8, 8, 8, 0.14);
    --color-divider: rgba(8, 8, 8, 0.08);
    --color-surface-1: rgba(8, 8, 8, 0.03);
    --color-surface-2: rgba(8, 8, 8, 0.06);
    --color-surface-3: rgba(8, 8, 8, 0.10);
    --color-surface-yellow: rgba(255, 212, 0, 0.18);
    --shadow-sm: 0 2px 8px rgba(8, 8, 8, 0.06);
    --shadow-md: 0 8px 24px rgba(8, 8, 8, 0.08);
    --shadow-lg: 0 18px 50px rgba(8, 8, 8, 0.12);
    --shadow-yellow: 0 12px 30px rgba(255, 212, 0, 0.28);
    --shadow-focus: 0 0 0 4px rgba(255, 212, 0, 0.18);
    --overlay-hero: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(247, 240, 222, 0.85) 25%, rgba(247, 240, 222, 0.40) 45%, rgba(247, 240, 222, 0) 70%);
    --overlay-hero-bilateral: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 8%, rgba(247, 240, 222, 0.92) 22%, rgba(247, 240, 222, 0.30) 42%, rgba(247, 240, 222, 0.30) 58%, rgba(247, 240, 222, 0.92) 78%, var(--color-bg) 92%, var(--color-bg) 100%);
    --overlay-hero-mobile: linear-gradient(180deg, rgba(247, 240, 222, 0.95) 0%, rgba(247, 240, 222, 0.65) 50%, rgba(247, 240, 222, 0.30) 100%);
    --overlay-card: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%);
    --overlay-card-soft: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.20) 100%);
    --color-accent-editorial: var(--raw-yellow-amber);
  }
}