:root {
    /* Brand palette — green-first (Yono-style CTA cohesion) */
    --color-primary: #22c55e;
    --color-primary-strong: #16a34a;
    --color-secondary: #7c3aed;
    --color-accent: #22c55e;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info-bonus: #16a34a;
    --color-info-constraint: #e11d48;

    --color-dark: #0f172a;
    --color-dark-2: #111827;
    --color-border-base: #1f2937;
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #9ca3af;
    --color-white: #ffffff;

    /* Semantic tokens (dark default) */
    --color-text: var(--color-text-primary);
    --color-muted: var(--color-text-secondary);
    --color-text-muted: var(--color-text-secondary);
    --color-background: var(--color-dark);
    --color-background-deep: #0b1220;
    --color-bg-light: var(--color-dark-2);
    --color-surface: var(--color-dark-2);
    --color-surface-strong: #1a2332;
    --color-surface-panel: rgba(15, 23, 42, 0.96);
    --color-surface-panel-strong: var(--color-dark);
    --color-surface-soft: rgba(255, 255, 255, 0.06);
    --color-surface-soft-light: var(--color-dark-2);
    --color-surface-muted: var(--color-dark-2);
    --color-glass: rgba(17, 24, 39, 0.88);
    --color-border: var(--color-border-base);
    --color-border-soft: rgba(31, 41, 55, 0.72);
    --color-border-medium: #374151;
    --color-border-muted: rgba(31, 41, 55, 0.5);
    --color-accent-soft: rgba(34, 197, 94, 0.14);
    --color-accent-soft-strong: rgba(34, 197, 94, 0.22);
    --color-shadow: rgba(0, 0, 0, 0.25);

    --background-radial-accent: radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.14), transparent 42%);
    --background-gradient-body: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    --gradient-surface-glass: linear-gradient(145deg, rgba(31, 41, 55, 0.6), rgba(17, 24, 39, 0.92));
    --gradient-accent-soft: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(124, 58, 237, 0.12));
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
    --gradient-community: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-hero-dark: linear-gradient(135deg, #0f172a 0%, #111827 48%, #1e293b 100%);
    --gradient-panel-dark: linear-gradient(180deg, #111827, #0f172a);
    --gradient-promo: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(124, 58, 237, 0.22));

    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-button: 0 8px 24px rgba(34, 197, 94, 0.32);
    --shadow-accent-soft: 0 4px 20px rgba(34, 197, 94, 0.18);
    --shadow-accent-soft-strong: 0 8px 28px rgba(34, 197, 94, 0.24);
    --shadow-focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.35);
    --color-focus-ring: rgba(34, 197, 94, 0.55);

    --font-family-sans: "Inter", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-display: 3rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1.125rem;
    --font-size-body: 1rem;
    --font-size-small: 0.9375rem;
    --font-size-caption: 0.8125rem;
    --line-height-heading: 1.15;
    --line-height-body: 1.65;
    --line-height-tight: 1.2;

    --space-4: 4px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 16px;
    --radius-circle: 999px;
    --transition: 0.2s ease;
    --container-max-width: 800px;
    --container-tablet: 800px;
    --container-mobile: 100%;
    --header-height: 64px;
    --mobile-nav-height: 0px;
    --body-nav-offset: 0px;
    --search-height-desktop: 52px;
    --search-height-mobile: 52px;

    /* Typography scale — tuned for ~800px content shell */
    --type-hero-title: clamp(2rem, 2.25rem, 2.75rem);
    --type-hero-subtitle: 1.0625rem;
    --type-section-title: 1.3125rem;
    --type-section-subtitle: 0.9375rem;
    --type-body: 1rem;
    --type-small: 0.875rem;
    --type-caption: 0.8125rem;
    --type-nav-label: 0.6875rem;
    --type-nav-icon: 1rem;
}

body.light-mode {
    --color-background: #f5f7f6;
    --color-background-deep: #eef2ef;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-text-muted: #64748b;
    --color-surface: #ffffff;
    --color-surface-strong: #ffffff;
    --color-surface-muted: #ffffff;
    --color-surface-soft: #f1f5f1;
    --color-border: rgba(15, 23, 42, 0.1);
    --color-border-soft: rgba(15, 23, 42, 0.06);
    --background-gradient-body: linear-gradient(180deg, #f5f7f6 0%, #eef2ef 100%);
    --background-radial-accent: radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 40%);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.08);
}