/* ========================================
   FRANDE ONE · TOKENS DE DISEÑO
   Fuente: sistema de Frande One Mail (marca oficial Frande Connection: #25A1FB y #0F0D3F).
   Prefijo --fo- para convivir con las variables heredadas de style.css.
   Contrastes verificados WCAG AA: primario #0476C8 con blanco 4,74:1.
   ======================================== */

:root {
    --fo-brand-blue: #25a1fb;
    --fo-brand-navy: #0f0d3f;

    --fo-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --fo-font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fo-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --fo-text-xs: 0.75rem;
    --fo-text-sm: 0.875rem;
    --fo-text-md: 1rem;
    --fo-text-lg: 1.125rem;
    --fo-text-xl: 1.375rem;
    --fo-text-2xl: 1.75rem;
    --fo-text-3xl: clamp(2rem, 4vw, 2.75rem);
    --fo-text-hero: clamp(2.4rem, 6.5vw, 4.5rem);

    --fo-space-1: 0.25rem;
    --fo-space-2: 0.5rem;
    --fo-space-3: 0.75rem;
    --fo-space-4: 1rem;
    --fo-space-5: 1.5rem;
    --fo-space-6: 2rem;
    --fo-space-7: 3rem;
    --fo-space-8: 4.5rem;

    --fo-radius-sm: 6px;
    --fo-radius-md: 10px;
    --fo-radius-lg: 16px;
    --fo-radius-xl: 24px;
    --fo-radius-pill: 999px;

    --fo-duration: 180ms;
    --fo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fo-content-max: 1180px;
    --fo-header-h: 5.5rem;

    color-scheme: light;
    --fo-background: #f4f8fb;
    --fo-surface: #ffffff;
    --fo-surface-sunken: #eaf1f6;
    --fo-foreground: #0f0d3f;
    --fo-foreground-secondary: #4b4969;
    --fo-muted: #5e5d74;
    --fo-border: #d6dfe6;
    --fo-border-strong: #8a9aa8;

    --fo-primary: #0476c8;
    --fo-primary-hover: #0364aa;
    --fo-primary-active: #035896;
    --fo-primary-soft: #e2f2fd;
    --fo-primary-foreground: #ffffff;
    --fo-accent: #25a1fb;
    --fo-link: #0364aa;

    --fo-success: #0f7b4a;
    --fo-success-soft: #e3f5ec;
    --fo-warning: #8a5a00;
    --fo-warning-soft: #fff4db;

    --fo-focus: #0364aa;
    --fo-shadow-sm: 0 1px 2px rgba(15, 13, 63, 0.06);
    --fo-shadow-md: 0 6px 20px -8px rgba(15, 13, 63, 0.18);
    --fo-shadow-lg: 0 24px 60px -20px rgba(15, 13, 63, 0.28);
}

[data-theme="dark"] {
    color-scheme: dark;
    --fo-background: #0e0d19;
    --fo-surface: #161625;
    --fo-surface-sunken: #11101d;
    --fo-foreground: #e8e8f3;
    --fo-foreground-secondary: #b9b8cc;
    --fo-muted: #a3a2b8;
    --fo-border: #333248;
    --fo-border-strong: #6b6a85;

    --fo-primary-soft: #193143;
    --fo-link: #6cc0fc;

    --fo-success: #4ade9a;
    --fo-success-soft: #10291e;
    --fo-warning: #f5c451;
    --fo-warning-soft: #2c2310;

    --fo-focus: #6cc0fc;
    --fo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --fo-shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    --fo-shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fo-duration: 0ms;
    }
}