/**
 * Logged-out design tokens (REQ-001).
 * Naming: --lo-* are documented aliases; --bg-*, --text-*, --accent are the shared
 * contract used by base-logged-out, tools-forms, and landing. --lp-* are landing-only.
 * Theme: default dark; light via prefers-color-scheme or html[data-theme="light|dark"].
 */
:root {
  color-scheme: dark;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --color-primary: #00d4ff;
  --color-secondary: #7f00ff;
  --color-text-header: #e6edf3;
  --bg-primary: #171923;
  --bg-secondary: #25273a;
  --border: #374151;
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --text-muted: #a0a0a0;
  --accent: #00d4ff;
  --accent-2: #00ffd3;
  --accent-active: #00a6cc;
  --accent-on-accent: #121212;
  --border-radius: 8px;
  --path-color: linear-gradient(to right, #00d4ff, #00f0c3);
  --branch-1-color: #00d4ff;
  --branch-2-color: #00b8d9;
  --branch-3-color: #00ffd3;
  --branch-4-color: #a28aff;
  --branch-5-color: #ff79c6;
  --branch-6-color: #ffb86b;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.35);
  --glow-small: 0 0 10px rgba(0, 212, 255, 0.4);
  --glow-medium: 0 0 25px rgba(0, 212, 255, 0.5);
  --glow-large: 0 0 40px rgba(0, 212, 255, 0.6);
  --nav-height: 84px;
  --nav-bg: rgba(23, 25, 35, 0.85);
  --nav-border: rgba(55, 65, 81, 0.35);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 45%, transparent);
  --z-lightbox: 2000;

  /* Landing page (dark) */
  --lp-font-heading: "Space Grotesk", system-ui, sans-serif;
  --lp-font-body: "DM Sans", system-ui, sans-serif;
  --lp-accent: #0ea5e9;
  --lp-accent-warm: #f59e0b;
  --lp-accent-warm-hover: #d97706;
  --lp-bg-dark: #0b1120;
  --lp-bg-darker: #070d1a;
  --lp-bg-card: #111827;
  --lp-bg-card-alt: #141c2e;
  --lp-border: rgba(255, 255, 255, 0.08);
  --lp-text: #f1f5f9;
  --lp-text-secondary: #94a3b8;
  --lp-text-muted: #64748b;
  --lp-radius: 12px;
  --lp-radius-sm: 8px;
  --lp-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --lp-max-width: 1120px;
  --lp-sticky-bg: rgba(11, 17, 32, 0.95);
  --lp-final-cta-mid: #0f1d32;
}

/* System light preference when no manual theme is stored */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-primary: #0d9488;
    --color-secondary: #6d28d9;
    --color-text-header: #0f172a;
    --bg-primary: #f4f2ee;
    --bg-secondary: #e8e4dc;
    --border: rgba(15, 23, 42, 0.14);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --accent: #0d9488;
    --accent-2: #14b8a6;
    --accent-active: #0f766e;
    --accent-on-accent: #f8fafc;
    --path-color: linear-gradient(to right, #0d9488, #14b8a6);
    --branch-1-color: #0d9488;
    --branch-2-color: #0e7490;
    --branch-3-color: #14b8a6;
    --branch-4-color: #7c3aed;
    --branch-5-color: #c026d3;
    --branch-6-color: #ea580c;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
    --glow-small: 0 1px 0 rgba(15, 23, 42, 0.06);
    --glow-medium: 0 4px 16px rgba(13, 148, 136, 0.2);
    --glow-large: 0 8px 28px rgba(13, 148, 136, 0.22);
    --nav-bg: rgba(244, 242, 238, 0.92);
    --nav-border: rgba(15, 23, 42, 0.1);
    --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);

    --lp-accent: #0d9488;
    --lp-accent-warm: #d97706;
    --lp-accent-warm-hover: #b45309;
    --lp-bg-dark: #ece8e2;
    --lp-bg-darker: #e2ddd4;
    --lp-bg-card: #faf8f5;
    --lp-bg-card-alt: #f0ebe4;
    --lp-border: rgba(15, 23, 42, 0.12);
    --lp-text: #0f172a;
    --lp-text-secondary: #475569;
    --lp-text-muted: #64748b;
    --lp-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --lp-sticky-bg: rgba(244, 242, 238, 0.96);
    --lp-final-cta-mid: #d6d3cd;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #0d9488;
  --color-secondary: #6d28d9;
  --color-text-header: #0f172a;
  --bg-primary: #f4f2ee;
  --bg-secondary: #e8e4dc;
  --border: rgba(15, 23, 42, 0.14);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --accent: #0d9488;
  --accent-2: #14b8a6;
  --accent-active: #0f766e;
  --accent-on-accent: #f8fafc;
  --path-color: linear-gradient(to right, #0d9488, #14b8a6);
  --branch-1-color: #0d9488;
  --branch-2-color: #0e7490;
  --branch-3-color: #14b8a6;
  --branch-4-color: #7c3aed;
  --branch-5-color: #c026d3;
  --branch-6-color: #ea580c;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  --glow-small: 0 1px 0 rgba(15, 23, 42, 0.06);
  --glow-medium: 0 4px 16px rgba(13, 148, 136, 0.2);
  --glow-large: 0 8px 28px rgba(13, 148, 136, 0.22);
  --nav-bg: rgba(244, 242, 238, 0.92);
  --nav-border: rgba(15, 23, 42, 0.1);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);

  --lp-accent: #0d9488;
  --lp-accent-warm: #d97706;
  --lp-accent-warm-hover: #b45309;
  --lp-bg-dark: #ece8e2;
  --lp-bg-darker: #e2ddd4;
  --lp-bg-card: #faf8f5;
  --lp-bg-card-alt: #f0ebe4;
  --lp-border: rgba(15, 23, 42, 0.12);
  --lp-text: #0f172a;
  --lp-text-secondary: #475569;
  --lp-text-muted: #64748b;
  --lp-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  --lp-sticky-bg: rgba(244, 242, 238, 0.96);
  --lp-final-cta-mid: #d6d3cd;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #00d4ff;
  --color-secondary: #7f00ff;
  --color-text-header: #e6edf3;
  --bg-primary: #171923;
  --bg-secondary: #25273a;
  --border: #374151;
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --text-muted: #a0a0a0;
  --accent: #00d4ff;
  --accent-2: #00ffd3;
  --accent-active: #00a6cc;
  --accent-on-accent: #121212;
  --path-color: linear-gradient(to right, #00d4ff, #00f0c3);
  --branch-1-color: #00d4ff;
  --branch-2-color: #00b8d9;
  --branch-3-color: #00ffd3;
  --branch-4-color: #a28aff;
  --branch-5-color: #ff79c6;
  --branch-6-color: #ffb86b;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.35);
  --glow-small: 0 0 10px rgba(0, 212, 255, 0.4);
  --glow-medium: 0 0 25px rgba(0, 212, 255, 0.5);
  --glow-large: 0 0 40px rgba(0, 212, 255, 0.6);
  --nav-bg: rgba(23, 25, 35, 0.85);
  --nav-border: rgba(55, 65, 81, 0.35);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 45%, transparent);

  --lp-accent: #0ea5e9;
  --lp-accent-warm: #f59e0b;
  --lp-accent-warm-hover: #d97706;
  --lp-bg-dark: #0b1120;
  --lp-bg-darker: #070d1a;
  --lp-bg-card: #111827;
  --lp-bg-card-alt: #141c2e;
  --lp-border: rgba(255, 255, 255, 0.08);
  --lp-text: #f1f5f9;
  --lp-text-secondary: #94a3b8;
  --lp-text-muted: #64748b;
  --lp-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --lp-sticky-bg: rgba(11, 17, 32, 0.95);
  --lp-final-cta-mid: #0f1d32;
}