/* =========================================================================
 Helmara - Design tokens
 Extracted from /client/src/index.css (:root and .dark) and
 /client/tailwind.config.js `pp.*` color map. Values are copied verbatim;
 nothing here is invented.
 ========================================================================= */

:root {
 /* ---- Surfaces ---- */
 --color-bg-base: #ffffff;
 --color-bg-surface: #f7f8fc;
 --color-bg-elevated: #ffffff;
 --color-bg-overlay: #eef1f8;
 --color-bg-muted: #f1f3f9;
 --color-bg-hero: #f4f2ff;
 --color-bg-dark: #0b1220;

 /* ---- Brand / accent ---- */
 --color-primary: #f79723;
 --color-primary-light: #f9ab4a;
 --color-primary-dim: #e08515;
 --color-on-primary: #ffffff;

 --color-accent: #f79723;
 --color-accent-dim: #e08515;
 --color-accent-glow: rgba(247, 151, 35, 0.2);
 --color-on-accent: #ffffff;

 --color-cyan: #f9ab4a;
 --color-cyan-dim: #f79723;
 --color-cyan-glow: rgba(247, 151, 35, 0.15);

 /* ---- Status ---- */
 --color-success: #10b981;
 --color-success-bg: rgba(16, 185, 129, 0.1);
 --color-warning: #f59e0b;
 --color-warning-bg: rgba(245, 158, 11, 0.1);
 --color-error: #ef4444;
 --color-error-bg: rgba(239, 68, 68, 0.1);

 /* ---- Text ---- */
 --color-text-primary: #0f172a;
 --color-text-secondary: #334155;
 --color-text-tertiary: #64748b;
 --color-text-disabled: #94a3b8;
 --color-text-inverse: #ffffff;

 /* ---- Borders ---- */
 --color-border: #e8eaf2;
 --color-border-strong: #cfd5e3;
 --color-border-focus: #f79723;

 /* ---- Module accent colors (badges / icon fills if ever needed) ---- */
 --color-m1-content: #8b5cf6;
 --color-m2-email: #f9ab4a;
 --color-m3-support: #10b981;
 --color-m4-calling: #f79723;
 --color-m5-leads: #e08515;
 --color-m6-ads: #ec4899;

 /* ---- Gradients ---- */
 --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(247, 151, 35, 0.14) 0%, transparent 55%),
 radial-gradient(ellipse 50% 40% at 90% 20%, rgba(249, 171, 74, 0.1) 0%, transparent 50%), #ffffff;
 --gradient-cta: linear-gradient(135deg, #f79723 0%, #e08515 100%);
 --gradient-btn-primary: linear-gradient(135deg, #f79723 0%, #e08515 100%);
 --gradient-text-hero: linear-gradient(135deg, #0f172a 0%, #334155 50%, #f79723 100%);
 --gradient-orange-text: linear-gradient(135deg, #f79723 0%, #fbbf24 100%);

 /* ---- Shadows ---- */
 --shadow-card: 0 10px 40px rgba(15, 23, 42, 0.06);
 --shadow-banner: 0 30px 80px rgba(247, 151, 35, 0.12);
 --fade-edge: #ffffff;
 --fade-edge-surface: #f7f8fc;

 /* ---- Spacing scale ---- */
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 20px;
 --space-6: 24px;
 --space-8: 32px;
 --space-10: 40px;
 --space-12: 48px;
 --space-16: 64px;
 --space-20: 80px;
 --space-24: 96px;

 /* ---- Radii ---- */
 --radius-sm: 4px;
 --radius-md: 8px;
 --radius-lg: 12px;
 --radius-xl: 16px;
 --radius-2xl: 24px;
 --radius-full: 9999px;
 --radius: 0.75rem;

 /* ---- Layout ---- */
 --container-2xl: 1400px;

 color-scheme: light;
}

/* ─── DARK - BugMonks navy ─── */
:root.dark,
html.dark {
 --color-bg-base: #0a0f1e;
 --color-bg-surface: #0f172a;
 --color-bg-elevated: #111827;
 --color-bg-overlay: #1e293b;
 --color-bg-muted: #1a2332;
 --color-bg-hero: #0a0f1e;
 --color-bg-dark: #050810;

 --color-text-primary: #f8fafc;
 --color-text-secondary: #cbd5e1;
 --color-text-tertiary: #94a3b8;
 --color-text-disabled: #475569;
 --color-text-inverse: #0a0f1e;

 --color-border: #1e293b;
 --color-border-strong: #334155;

 --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(247, 151, 35, 0.28) 0%, transparent 70%),
 radial-gradient(ellipse 50% 40% at 80% 80%, rgba(249, 171, 74, 0.15) 0%, transparent 60%), #0a0f1e;
 --gradient-text-hero: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #f79723 100%);

 --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.35);
 --shadow-banner: 0 30px 80px rgba(0, 0, 0, 0.45);
 --fade-edge: #0a0f1e;
 --fade-edge-surface: #0a0f1e;

 color-scheme: dark;
}

/* ---- Semantic aliases used throughout landing.css (mirrors Tailwind `pp.*`) ---- */
:root {
 --pp-base: var(--color-bg-base);
 --pp-surface: var(--color-bg-surface);
 --pp-elevated: var(--color-bg-elevated);
 --pp-overlay: var(--color-bg-overlay);
 --pp-muted: var(--color-bg-muted);
 --pp-dark: var(--color-bg-dark);
 --pp-orange: var(--color-accent);
 --pp-orange-d: var(--color-accent-dim);
 --pp-border: var(--color-border);
 --pp-border-s: var(--color-border-strong);
 --pp-text: var(--color-text-primary);
 --pp-text-2: var(--color-text-secondary);
 --pp-text-3: var(--color-text-tertiary);
 --pp-text-d: var(--color-text-disabled);
}