/* Fast Padel — tokens oscuros (web); canvas OLED suavizado vs #000 puro en MAUI nativo */

:root {
    /* Canvas web: gris profundo OLED (legibilidad); app MAUI puede seguir en negro puro */
    --fp-page-bg: #080808;
    --fp-surface: #121212;
    --fp-surface-raised: #151515;
    --fp-surface-input: #0f0f0f;
    --fp-surface-muted: #1a1a1a;
    --fp-border: #333333;
    --fp-border-soft: #2b2b2b;
    --fp-border-strong: #444444;
    --fp-text: #ffffff;
    --fp-text-secondary: #b8b8b8;
    --fp-text-muted: #a3a3a3;
    --fp-ghost: #2a2a2a;
    --fp-hero-top: #1a1a1a;
    --fp-tab-bar: #0a0a0a;

    --fp-radius-sm: 8px;
    --fp-radius-md: 12px;
    --fp-radius-lg: 16px;
    --fp-radius-xl: 20px;
    --fp-radius-pill: 999px;

    --fp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fp-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Courier New", monospace;

    --fp-transition: 0.2s ease;
    --fp-transition-slow: 0.35s ease;

    --fp-shadow-sm: 0 1px 2px color-mix(in srgb, #000 40%, transparent);
    --fp-shadow-md: 0 4px 24px color-mix(in srgb, #000 55%, transparent);
    --fp-shadow-lg: 0 12px 40px color-mix(in srgb, #000 65%, transparent);
    --fp-shadow-glow: 0 0 48px color-mix(in srgb, var(--fp-text) 6%, transparent);

    --fp-focus-ring: 0 0 0 2px var(--fp-page-bg), 0 0 0 4px color-mix(in srgb, var(--fp-text) 50%, transparent);

    --fp-link: color-mix(in srgb, var(--fp-text) 88%, #7eb8ff);
    --fp-link-hover: var(--fp-text);

    --fp-premium-hover-bg: color-mix(in srgb, var(--fp-text) 90%, #000);
    --fp-outline-hover-bg: color-mix(in srgb, var(--fp-text) 12%, transparent);

    /* Glass / bento (vanguardia UI) */
    --fp-glass-bg: color-mix(in srgb, var(--fp-surface) 58%, transparent);
    --fp-glass-bg-strong: color-mix(in srgb, var(--fp-surface) 72%, transparent);
    --fp-glass-border: color-mix(in srgb, var(--fp-border) 50%, transparent);
    --fp-blur-strength: 14px;
    --fp-bento-gap: clamp(0.875rem, 2.5cqi, 1.5rem);

    --fp-hero-mesh-a: color-mix(in srgb, #4a6fa8 22%, transparent);
    --fp-hero-mesh-b: color-mix(in srgb, var(--fp-text) 6%, transparent);
}

html {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --fp-transition: 0.01ms;
        --fp-transition-slow: 0.01ms;
    }
}