/* ============================================
   TASKFORCEONE - EMERALD THEME
   ============================================
   Minimal theme with black hero, white sections below.
   Typography: Plus Jakarta Sans (display) + Outfit (body)
   Colors: Black & white with emerald green accents
   ============================================ */

:root {
    /* Dark palette (hero, header, some sections) */
    --bg-void: #000000;
    --bg-void-rgb: 0, 0, 0;
    --bg-surface: #15202b;
    --bg-elevated: #1e2732;
    --bg-elevated-rgb: 30, 39, 50;
    --bg-hover: #2c3640;

    /* Light palette (for light sections) */
    --bg-light: #ffffff;
    --bg-light-surface: #f7f9f9;
    --bg-light-elevated: #eff3f4;
    --bg-light-hover: #e7e9ea;

    /* Text - dark mode defaults */
    --text-primary: #e7e9ea;
    --text-secondary: #8b98a5;
    --text-muted: #7a8794;

    /* Text - light mode variants */
    --text-dark: #0f1419;
    --text-dark-secondary: #536371;
    --text-dark-muted: #667786;

    /* Accents - Emerald green for both dark and light sections */
    --accent-primary: #10b981;
    --accent-primary-rgb: 16, 185, 129;
    --accent-primary-strong: #34d399;
    --accent-primary-strong-rgb: 52, 211, 153;
    --accent-primary-dark: #059669;
    --accent-primary-dim: rgba(var(--accent-primary-rgb), 0.1);
    --accent-primary-glow: rgba(var(--accent-primary-rgb), 0.15);
    --accent-cta: var(--accent-primary);
    --accent-cta-hover: #059669;
    --accent-cta-dim: var(--accent-primary-dim);

    /* Emerald accent for light sections */
    --accent-dark: #047857;
    --accent-dark-rgb: 4, 120, 87;
    --accent-dark-hover: #046c4e;
    --accent-dark-dim: rgba(4, 120, 87, 0.08);

    /* Borders - White-based for dark theme */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(var(--accent-primary-rgb), 0.4);

    /* Borders - Black-based for light theme */
    --border-light-subtle: rgba(0, 0, 0, 0.06);
    --border-light-default: rgba(0, 0, 0, 0.1);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* Shadows - Deeper for dark theme */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(var(--accent-primary-rgb), 0.15);
    --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.4);
    --shadow-cta: 0 8px 20px rgba(var(--accent-primary-strong-rgb), 0.25);

    /* Overlays & effects */
    --overlay-header: rgba(var(--bg-void-rgb), 0.9);
    --overlay-nav: rgba(var(--bg-elevated-rgb), 0.98);
    --overlay-scrim: rgba(0, 0, 0, 0.5);
    --accent-ambient-hero-strong: rgba(var(--accent-primary-rgb), 0.08);
    --accent-ambient-hero-soft: rgba(var(--accent-primary-rgb), 0.05);
    --accent-ambient-section: rgba(var(--accent-primary-strong-rgb), 0.05);
    --accent-ambient-section-faint: rgba(var(--accent-primary-strong-rgb), 0.04);
    --accent-focus-ring: rgba(var(--accent-primary-strong-rgb), 0.1);

    /* Solid colors (no gradients - X.com style) */
    --gradient-hero: none;
    --gradient-card: var(--bg-surface);
    --gradient-cta: var(--accent-primary);
    --gradient-cta-hover: var(--accent-cta-hover);

    /* Typography */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* UI Element Colors */
    --dot-close: #ff5f57;
    --dot-minimize: #febc2e;
    --dot-maximize: #28c840;
    --star-rating: #fbbf24;

    /* Phone Mockup - X.com Dark variant */
    --phone-frame: #2c3640;
    --phone-notch: #000000;
}