/* ==========================================================================
   Editorial Design System - Theme Variables
   Supports Light & Dark themes with smooth transitions
   ========================================================================== */

/* ==========================================================================
   DARK THEME (Default) - Editorial Noir
   ========================================================================== */

:root,
[data-theme="dark"] {
  --ed-theme: dark;

  /* Primary: Coral/Vermillion */
  --ed-coral: #FF6B4A;
  --ed-coral-light: #FF8A70;
  --ed-coral-dark: #E85A3A;
  --ed-coral-glow: rgba(255, 107, 74, 0.15);
  --ed-coral-intense: rgba(255, 107, 74, 0.25);

  /* Secondary: Warm Gold */
  --ed-gold: #F5A623;
  --ed-gold-light: #FFD07A;
  --ed-gold-dark: #D4920F;

  /* Background Colors - matched to neo-gray-50 dark mode (#1c1917) */
  --ed-bg-primary: #1c1917;
  --ed-bg-secondary: #292524;
  --ed-bg-tertiary: #44403c;
  --ed-bg-elevated: #2E2E2E;
  --ed-bg-hover: rgba(255, 107, 74, 0.08);

  /* Surface Colors - matched to warm neo grays */
  --ed-surface: #292524;
  --ed-surface-hover: #44403c;
  --ed-surface-active: #57534e;

  /* Text Colors */
  --ed-text-primary: #FFF8F0;
  --ed-text-secondary: rgba(255, 248, 240, 0.75);
  --ed-text-tertiary: rgba(255, 248, 240, 0.5);
  --ed-text-muted: rgba(255, 248, 240, 0.35);

  /* Border Colors */
  --ed-border-default: #333333;
  --ed-border-subtle: #2A2A2A;
  --ed-border-strong: #444444;
  --ed-border-accent: rgba(255, 107, 74, 0.3);

  /* Shadows */
  --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ed-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.35);
  --ed-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
  --ed-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.45);
  --ed-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
  --ed-shadow-glow: 0 0 40px rgba(255, 107, 74, 0.2);
  --ed-shadow-coral: 0 4px 24px rgba(255, 107, 74, 0.3);
  --ed-shadow-coral-lg: 0 8px 40px rgba(255, 107, 74, 0.4);

  /* Overlay */
  --ed-overlay: rgba(0, 0, 0, 0.6);
  --ed-overlay-light: rgba(0, 0, 0, 0.3);

  /* Nav */
  --ed-nav-bg: rgba(18, 18, 18, 0.95);
  --ed-nav-bg-scrolled: rgba(18, 18, 18, 0.98);
  --ed-nav-border: transparent;
  --ed-nav-border-scrolled: #333333;

  /* Cards */
  --ed-card-bg: #1A1A1A;
  --ed-card-bg-hover: #242424;
  --ed-card-border: #333333;
  --ed-card-border-hover: rgba(255, 107, 74, 0.3);

  /* Feature */
  --ed-feature-number: #2A2A2A;
  --ed-feature-number-hover: var(--ed-coral);

  /* Watermark */
  --ed-watermark: #1E1E1E;

  /* Marquee */
  --ed-marquee-bg: #1A1A1A;
  --ed-marquee-text: #666666;
  --ed-marquee-text-hover: var(--ed-text-primary);

  /* Footer */
  --ed-footer-bg: #0A0A0A;

  /* Toggle icons */
  --ed-toggle-sun: var(--ed-text-tertiary);
  --ed-toggle-moon: var(--ed-coral);
}

/* ==========================================================================
   LIGHT THEME - Editorial Blanc
   ========================================================================== */

[data-theme="light"] {
  --ed-theme: light;

  /* Primary: Deeper Coral for light bg */
  --ed-coral: #E85A3A;
  --ed-coral-light: #FF6B4A;
  --ed-coral-dark: #D14A2A;
  --ed-coral-glow: rgba(232, 90, 58, 0.1);
  --ed-coral-intense: rgba(232, 90, 58, 0.15);

  /* Secondary: Warm Gold */
  --ed-gold: #D4920F;
  --ed-gold-light: #F5A623;
  --ed-gold-dark: #B87D0A;

  /* Background Colors */
  --ed-bg-primary: #FDFCFB;
  --ed-bg-secondary: #F8F7F6;
  --ed-bg-tertiary: #F2F1F0;
  --ed-bg-elevated: #FFFFFF;
  --ed-bg-hover: rgba(232, 90, 58, 0.06);

  /* Surface Colors */
  --ed-surface: #FFFFFF;
  --ed-surface-hover: #F8F7F6;
  --ed-surface-active: #F2F1F0;

  /* Text Colors */
  --ed-text-primary: #1A1615;
  --ed-text-secondary: rgba(26, 22, 21, 0.7);
  --ed-text-tertiary: rgba(26, 22, 21, 0.5);
  --ed-text-muted: rgba(26, 22, 21, 0.35);

  /* Border Colors */
  --ed-border-default: #E8E6E4;
  --ed-border-subtle: #F0EEEC;
  --ed-border-strong: #D8D6D4;
  --ed-border-accent: rgba(232, 90, 58, 0.25);

  /* Shadows */
  --ed-shadow-sm: 0 1px 3px rgba(26, 22, 21, 0.06);
  --ed-shadow-base: 0 4px 8px rgba(26, 22, 21, 0.08);
  --ed-shadow-md: 0 8px 20px rgba(26, 22, 21, 0.1);
  --ed-shadow-lg: 0 16px 32px rgba(26, 22, 21, 0.12);
  --ed-shadow-xl: 0 24px 48px rgba(26, 22, 21, 0.15);
  --ed-shadow-glow: 0 0 60px rgba(232, 90, 58, 0.12);
  --ed-shadow-coral: 0 4px 20px rgba(232, 90, 58, 0.2);
  --ed-shadow-coral-lg: 0 8px 32px rgba(232, 90, 58, 0.25);

  /* Overlay */
  --ed-overlay: rgba(26, 22, 21, 0.5);
  --ed-overlay-light: rgba(26, 22, 21, 0.2);

  /* Nav */
  --ed-nav-bg: rgba(253, 252, 251, 0.9);
  --ed-nav-bg-scrolled: rgba(253, 252, 251, 0.98);
  --ed-nav-border: transparent;
  --ed-nav-border-scrolled: #E8E6E4;

  /* Cards */
  --ed-card-bg: #FFFFFF;
  --ed-card-bg-hover: #F8F7F6;
  --ed-card-border: #E8E6E4;
  --ed-card-border-hover: rgba(232, 90, 58, 0.3);

  /* Feature */
  --ed-feature-number: #F0EEEC;
  --ed-feature-number-hover: var(--ed-coral);

  /* Watermark */
  --ed-watermark: #F5F4F3;

  /* Marquee */
  --ed-marquee-bg: #F8F7F6;
  --ed-marquee-text: #999999;
  --ed-marquee-text-hover: var(--ed-text-primary);

  /* Footer */
  --ed-footer-bg: #F2F1F0;

  /* Toggle icons */
  --ed-toggle-sun: var(--ed-coral);
  --ed-toggle-moon: var(--ed-text-tertiary);
}

/* ==========================================================================
   STATIC DESIGN TOKENS
   ========================================================================== */

:root {
  /* Typography - Uses self-hosted Inter Tight with graceful fallbacks */
  --ed-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ed-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --ed-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace;

  /* Font Sizes */
  --ed-text-xs: 0.75rem;
  --ed-text-sm: 0.875rem;
  --ed-text-base: 1rem;
  --ed-text-lg: 1.125rem;
  --ed-text-xl: 1.25rem;
  --ed-text-2xl: 1.5rem;
  --ed-text-3xl: 1.875rem;
  --ed-text-4xl: 2.25rem;
  --ed-text-5xl: 3rem;
  --ed-text-6xl: 3.75rem;
  --ed-text-7xl: 4.5rem;
  --ed-text-8xl: 6rem;
  --ed-text-9xl: 8rem;

  /* Font Weights */
  --ed-font-light: 300;
  --ed-font-normal: 400;
  --ed-font-medium: 500;
  --ed-font-semibold: 600;
  --ed-font-bold: 700;
  --ed-font-extrabold: 800;
  --ed-font-black: 900;

  /* Line Heights */
  --ed-leading-none: 1;
  --ed-leading-tight: 1.1;
  --ed-leading-snug: 1.25;
  --ed-leading-normal: 1.5;
  --ed-leading-relaxed: 1.625;
  --ed-leading-loose: 2;

  /* Letter Spacing */
  --ed-tracking-tighter: -0.05em;
  --ed-tracking-tight: -0.025em;
  --ed-tracking-normal: 0;
  --ed-tracking-wide: 0.025em;
  --ed-tracking-wider: 0.05em;
  --ed-tracking-widest: 0.1em;
  --ed-tracking-ultra: 0.2em;

  /* Spacing */
  --ed-space-1: 0.25rem;
  --ed-space-2: 0.5rem;
  --ed-space-3: 0.75rem;
  --ed-space-4: 1rem;
  --ed-space-5: 1.25rem;
  --ed-space-6: 1.5rem;
  --ed-space-8: 2rem;
  --ed-space-10: 2.5rem;
  --ed-space-12: 3rem;
  --ed-space-16: 4rem;
  --ed-space-20: 5rem;
  --ed-space-24: 6rem;
  --ed-space-32: 8rem;
  --ed-space-40: 10rem;
  --ed-space-48: 12rem;

  /* Layout */
  --ed-container-sm: 640px;
  --ed-container-md: 768px;
  --ed-container-lg: 1024px;
  --ed-container-xl: 1280px;
  --ed-container-2xl: 1440px;
  --ed-container-full: 1600px;
  --ed-nav-height: 80px;

  /* Border Radius */
  --ed-radius-none: 0;
  --ed-radius-sm: 2px;
  --ed-radius-base: 4px;
  --ed-radius-md: 6px;
  --ed-radius-lg: 8px;
  --ed-radius-xl: 12px;
  --ed-radius-2xl: 16px;
  --ed-radius-3xl: 24px;
  --ed-radius-full: 9999px;

  /* Transitions */
  --ed-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ed-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ed-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ed-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ed-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ed-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --ed-duration-fast: 150ms;
  --ed-duration-base: 250ms;
  --ed-duration-slow: 400ms;
  --ed-duration-slower: 600ms;
  --ed-duration-slowest: 1000ms;

  /* Z-Index */
  --ed-z-base: 0;
  --ed-z-above: 10;
  --ed-z-dropdown: 100;
  --ed-z-sticky: 200;
  --ed-z-fixed: 300;
  --ed-z-modal-backdrop: 400;
  --ed-z-modal: 500;
  --ed-z-popover: 600;
  --ed-z-tooltip: 700;
  --ed-z-max: 9999;

  /* Semantic Colors */
  --ed-success: #4ADE80;
  --ed-error: #F87171;
  --ed-warning: #FBBF24;
  --ed-info: #60A5FA;
}

/* ==========================================================================
   THEME TRANSITION
   ========================================================================== */

.ed-landing,
.ed-landing *,
.ed-landing *::before,
.ed-landing *::after {
  transition:
    background-color var(--ed-duration-slow) var(--ed-ease-smooth),
    border-color var(--ed-duration-slow) var(--ed-ease-smooth),
    color var(--ed-duration-base) var(--ed-ease-smooth),
    box-shadow var(--ed-duration-slow) var(--ed-ease-smooth),
    fill var(--ed-duration-base) var(--ed-ease-smooth);
}

/* Disable transitions on initial load */
.ed-landing.no-transition,
.ed-landing.no-transition *,
.ed-landing.no-transition *::before,
.ed-landing.no-transition *::after {
  transition: none !important;
}

/* ==========================================================================
   FONT LOADING
   ========================================================================== */

/*
 * FONT LOADING NOTES:
 * The app uses self-hosted Inter and Inter Tight fonts (see /fonts directory and fonts-neo.css).
 * For editorial display fonts, we fall back to system fonts for performance and reliability.
 *
 * If you want to use Playfair Display or DM Sans, either:
 * 1. Download the font files to /fonts/ and create @font-face rules pointing to them
 * 2. Or add a Google Fonts <link> in index.html (not recommended for GDPR compliance)
 *
 * The font stacks in :root (--ed-font-display, --ed-font-body) provide graceful fallbacks.
 */