/* Base tokens and reset for customer-facing pages */
:root {
    color-scheme: dark;
    --color-bg: #0c1322;
    --color-bg-alt: #111b2e;
    --color-surface-1: rgba(15, 23, 42, 0.85);
    --color-surface-2: rgba(24, 34, 52, 0.76);
    --color-border: rgba(148, 163, 184, 0.14);
    --color-border-strong: rgba(99, 102, 241, 0.28);
    --color-text: #e2e8f0;
    --color-text-muted: rgba(226, 232, 240, 0.68);
    --color-primary: #6366f1;
    --color-primary-strong: #4f46e5;
    --color-secondary: #8b5cf6;
    --color-accent: #ec4899;
    --shadow-sm: 0 10px 28px rgba(9, 14, 32, 0.35);
    --shadow-md: 0 18px 44px rgba(9, 14, 32, 0.45);
    --shadow-lg: 0 24px 70px rgba(9, 14, 32, 0.55);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-display: 'Space Grotesk', var(--font-family-base);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.65;
    --line-height-heading: 1.15;
    --letter-spacing-tight: -0.015em;
    --letter-spacing-wide: 0.08em;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: clamp(1.75rem, 3vw, 2.25rem);
    --font-size-3xl: clamp(2.25rem, 6vw, 3.1rem);
    --font-size-4xl: clamp(2.85rem, 8vw, 3.8rem);
    --container-width: 1180px;
    --container-gutter: clamp(1.25rem, 3vw, 2.75rem);
    --section-spacing-y: clamp(3.5rem, 8vw, 5.75rem);
    --section-spacing-y-lg: clamp(5rem, 10vw, 7.5rem);
    --transition-base: 180ms ease;

    /* Backwards compatibility tokens */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-accent);
    --text-color: var(--color-text);
    --muted-text-color: var(--color-text-muted);
    --bg-dark: var(--color-bg);
    --bg-dark-secondary: var(--color-bg-alt);
    --card-bg: var(--color-surface-1);
    --border-radius: var(--radius-sm);
    --border-radius-lg: var(--radius-lg);
    --shadow-glow: var(--shadow-md);
    --transition: var(--transition-base);
}
