/* CoopMate design system — token (RD-1). UNICO file con colori esadecimali: tutto il resto usa var(--ui-*).
   Chiaro di default; scuro con prefers-color-scheme quando non c'è data-theme, o forzato con data-theme="dark".
   I blocchi scuri (media query e [data-theme="dark"]) devono restare IDENTICI: lo verifica `php bin/ds-contrast.php`,
   che controlla anche ogni coppia testo/sfondo (>= 4,5:1; >= 3:1 per testo grande e componenti UI) nei due temi.
   Breakpoint (mobile-first, solo min-width; le custom property non valgono nelle media query):
   640px (sm) · 900px (md) · 1200px (lg). */

:root {
    /* Marchio (dal logo coopmate_logo.png): arancio, teal, navy, corallo + fondo scuro. Mai per testo su bianco: usare i token -text. */
    --ui-brand-orange: #feac28;
    --ui-brand-teal: #2aa396;
    --ui-brand-navy: #142044;
    --ui-brand-coral: #fd624e;
    --ui-brand-night: #0e1630;

    /* Superfici e inchiostro (tema chiaro) */
    --ui-surface: #fbf7f1;
    --ui-surface-raised: #ffffff;
    --ui-surface-sunken: #f3ede3;
    --ui-surface-inverse: var(--ui-brand-navy);
    --ui-ink: var(--ui-brand-navy);
    --ui-ink-muted: #4a5272;
    --ui-ink-inverse: #fbf7f1;
    --ui-border: #e3dccf;
    --ui-border-strong: #7b8199;

    /* Ruoli: corallo = azione primaria, teal = secondaria/link, arancio = evidenza ("gratis", livelli, premi) */
    --ui-primary: var(--ui-brand-coral);
    --ui-primary-hover: #ff7a69;
    --ui-primary-ink: var(--ui-brand-navy);
    --ui-primary-text: #c0311d;
    --ui-secondary: var(--ui-brand-teal);
    --ui-secondary-hover: #3bb5a7;
    --ui-secondary-ink: var(--ui-brand-navy);
    --ui-secondary-text: #17756a;
    --ui-accent: var(--ui-brand-orange);
    --ui-accent-ink: var(--ui-brand-navy);
    --ui-accent-text: #7a4a00;
    --ui-link: var(--ui-secondary-text);
    --ui-link-hover: #0f5c53;

    /* Stati: -bg sfondo tenue, -ink testo su -bg e su superficie, -solid icona/barra (>= 3:1 su -bg) */
    --ui-success-bg: #e3f4f1;
    --ui-success-ink: #0f5c53;
    --ui-success-solid: #1b7f74;
    --ui-warning-bg: #fff1d6;
    --ui-warning-ink: #7a4a00;
    --ui-warning-solid: #a86200;
    --ui-danger-bg: #ffe9e5;
    --ui-danger-ink: #a52a17;
    --ui-danger-solid: #d23a25;
    --ui-info-bg: #e6ebf8;
    --ui-info-ink: #1f2f66;
    --ui-info-solid: #3d56a6;
    --ui-disabled-bg: #ece6da;
    --ui-disabled-ink: #646a82;

    --ui-focus: var(--ui-brand-navy);
    --ui-brand-tile: transparent; /* tessera dietro il simbolo: il navy del joystick sparisce sul fondo scuro */
    --ui-overlay: rgb(20 32 68 / .55);
    --ui-shadow-1: 0 1px 2px rgb(20 32 68 / .06), 0 2px 8px rgb(20 32 68 / .05);
    --ui-shadow-2: 0 2px 4px rgb(20 32 68 / .06), 0 8px 24px rgb(20 32 68 / .10);
    --ui-shadow-3: 0 4px 8px rgb(20 32 68 / .08), 0 16px 40px rgb(20 32 68 / .16);

    /* Tipografia: Nunito variabile self-hosted (base.css) con ripiego di sistema; scala fluida (360 -> 1280 px) */
    --ui-font-sans: "Nunito", "Nunito Fallback", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --ui-text-xs: clamp(.75rem, .74rem + .05vw, .78rem);
    --ui-text-sm: clamp(.875rem, .86rem + .08vw, .92rem);
    --ui-text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --ui-text-lg: clamp(1.125rem, 1.07rem + .27vw, 1.25rem);
    --ui-text-xl: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --ui-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --ui-text-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
    --ui-text-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
    --ui-leading-tight: 1.15;
    --ui-leading-snug: 1.3;
    --ui-leading-normal: 1.6;
    --ui-weight-regular: 400;
    --ui-weight-medium: 600;
    --ui-weight-heavy: 800;
    --ui-tracking-tight: -.015em;
    --ui-tracking-caps: .06em;

    /* Spazi (scala 4 px), raggi generosi */
    --ui-space-1: .25rem;
    --ui-space-2: .5rem;
    --ui-space-3: .75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-space-7: 3rem;
    --ui-space-8: 4rem;
    --ui-space-section: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    --ui-radius-xs: .375rem;
    --ui-radius-sm: .625rem;
    --ui-radius-md: .875rem;
    --ui-radius-lg: 1.25rem;
    --ui-radius-xl: 1.75rem;
    --ui-radius-pill: 999px;

    /* Layout */
    --ui-tap: 44px;
    --ui-container: 72rem;
    --ui-container-narrow: 44rem;
    --ui-measure: 66ch;
    --ui-gutter: clamp(1rem, .6rem + 2vw, 2rem);
    --ui-header-h: 4rem;
    --ui-bottom-bar-h: 4rem;

    /* Movimento: brevi e sobrie; prefers-reduced-motion le azzera (base.css) */
    --ui-dur-fast: 120ms;
    --ui-dur-base: 200ms;
    --ui-dur-slow: 320ms;
    --ui-ease: cubic-bezier(.2, 0, 0, 1);
    --ui-ease-out: cubic-bezier(0, 0, .2, 1);
    --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Livelli (z-index) */
    --ui-z-base: 0;
    --ui-z-sticky: 100;
    --ui-z-bottom-bar: 200;
    --ui-z-dropdown: 300;
    --ui-z-overlay: 400;
    --ui-z-dialog: 500;
    --ui-z-toast: 600;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-surface: var(--ui-brand-night);
        --ui-surface-raised: #172244;
        --ui-surface-sunken: #0a1124;
        --ui-surface-inverse: #fbf7f1;
        --ui-ink: #f4f1ea;
        --ui-ink-muted: #b4bad2;
        --ui-ink-inverse: var(--ui-brand-navy);
        --ui-border: #2a3560;
        --ui-border-strong: #8a95bd;
        --ui-primary-hover: #ff7a69;
        --ui-primary-text: var(--ui-brand-coral);
        --ui-secondary-hover: #3bb5a7;
        --ui-secondary-text: #3bc0b1;
        --ui-accent-text: var(--ui-brand-orange);
        --ui-link-hover: #7fe0d3;
        --ui-success-bg: #0f2e35;
        --ui-success-ink: #7fe0d3;
        --ui-success-solid: #2aa396;
        --ui-warning-bg: #33270f;
        --ui-warning-ink: #ffcf7a;
        --ui-warning-solid: #feac28;
        --ui-danger-bg: #3a1a24;
        --ui-danger-ink: #ff9d8f;
        --ui-danger-solid: #fd624e;
        --ui-info-bg: #1b2a5a;
        --ui-info-ink: #b6c4f5;
        --ui-info-solid: #7f95e0;
        --ui-disabled-bg: #1c2648;
        --ui-disabled-ink: #8d96b8;
        --ui-focus: var(--ui-brand-orange);
        --ui-brand-tile: var(--ui-surface-inverse);
        --ui-overlay: rgb(5 9 22 / .72);
        --ui-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .2);
        --ui-shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
        --ui-shadow-3: 0 4px 8px rgb(0 0 0 / .35), 0 16px 40px rgb(0 0 0 / .5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ui-surface: var(--ui-brand-night);
    --ui-surface-raised: #172244;
    --ui-surface-sunken: #0a1124;
    --ui-surface-inverse: #fbf7f1;
    --ui-ink: #f4f1ea;
    --ui-ink-muted: #b4bad2;
    --ui-ink-inverse: var(--ui-brand-navy);
    --ui-border: #2a3560;
    --ui-border-strong: #8a95bd;
    --ui-primary-hover: #ff7a69;
    --ui-primary-text: var(--ui-brand-coral);
    --ui-secondary-hover: #3bb5a7;
    --ui-secondary-text: #3bc0b1;
    --ui-accent-text: var(--ui-brand-orange);
    --ui-link-hover: #7fe0d3;
    --ui-success-bg: #0f2e35;
    --ui-success-ink: #7fe0d3;
    --ui-success-solid: #2aa396;
    --ui-warning-bg: #33270f;
    --ui-warning-ink: #ffcf7a;
    --ui-warning-solid: #feac28;
    --ui-danger-bg: #3a1a24;
    --ui-danger-ink: #ff9d8f;
    --ui-danger-solid: #fd624e;
    --ui-info-bg: #1b2a5a;
    --ui-info-ink: #b6c4f5;
    --ui-info-solid: #7f95e0;
    --ui-disabled-bg: #1c2648;
    --ui-disabled-ink: #8d96b8;
    --ui-focus: var(--ui-brand-orange);
    --ui-brand-tile: var(--ui-surface-inverse);
    --ui-overlay: rgb(5 9 22 / .72);
    --ui-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .2);
    --ui-shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    --ui-shadow-3: 0 4px 8px rgb(0 0 0 / .35), 0 16px 40px rgb(0 0 0 / .5);
    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}