/**
 * LW Era - Design Tokens & Core Variables
 * Source of Truth: Figma "Main Design Era" (9njJ7tqab4Ti4f5kyHa538)
 */

:root {
  /* --- Obsidian Monolith Dark Scale --- */
  --color-obsidian-pure: #000000;
  --color-obsidian-surface-1: #0E0E0E;
  --color-obsidian-surface-2: #131313;
  --color-obsidian-surface-3: #1C1B1B;
  --color-obsidian-surface-4: #201F1F;
  --color-obsidian-card: #181818;
  --color-obsidian-border: rgba(255, 255, 255, 0.08);
  --color-obsidian-border-subtle: rgba(255, 255, 255, 0.04);
  --color-obsidian-border-hover: rgba(255, 255, 255, 0.22);

  /* --- Crisp Polarity White Scale --- */
  --color-polar-white: #FFFFFF;
  --color-alabaster: #FAF8F4;
  --color-alabaster-surface: #F5F5F7;
  --color-light-border: rgba(0, 0, 0, 0.08);
  --color-light-border-hover: rgba(0, 0, 0, 0.2);

  /* --- Muted Neutrals & Typography Colors --- */
  --color-text-platinum: #E5E2E1;
  --color-text-silver: #C6C6C7;
  --color-text-ash: #988E90;
  --color-text-steel: #5E5E5E;
  --color-text-dark-headline: #131313;
  --color-text-dark-body: #4C4546;
  --color-text-dark-muted: #7E7879;

  /* --- Accent Colors --- */
  --color-accent-amber: #E27B38;
  --color-accent-emerald: #10B981;
  --color-accent-cyan: #38BDF8;

  /* --- Typography Families --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist', 'SF Mono', 'Roboto Mono', Menlo, monospace;
  --font-serif-luxury: 'Playfair Display', 'Instrument Serif', 'Liberation Serif', Georgia, serif;

  /* --- Layout & Spacing --- */
  --container-max-width: 1440px;
  --container-padding-desktop: 64px;
  --container-padding-tablet: 32px;
  --container-padding-mobile: 20px;
  --header-height: 72px;

  /* --- Transitions & Springs --- */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Polarity Shift Helpers */
.bg-obsidian {
  background-color: var(--color-obsidian-surface-1) !important;
  color: var(--color-text-platinum) !important;
}

.bg-obsidian-pure {
  background-color: var(--color-obsidian-pure) !important;
  color: var(--color-text-platinum) !important;
}

.bg-polar-white {
  background-color: var(--color-polar-white) !important;
  color: var(--color-text-dark-headline) !important;
}

.bg-alabaster {
  background-color: var(--color-alabaster) !important;
  color: var(--color-text-dark-headline) !important;
}