/*
 * GeOr24 PWA design tokens (phase 3A).
 * Source of truth for the prototype and, from phase 3B, for the MudBlazor theme.
 * Contrast ratios (WCAG 2.2) are documented in docs/plans/geor24-fase-3a-esperienza-prototipo.md.
 * Light palette on :root; the dark one applies with the system setting unless data-theme="light" is set,
 * and always with data-theme="dark".
 */

:root {
    color-scheme: light;

    /* Brand */
    --brand-violet: #9e40a3;
    --brand-night: #1d1c47;
    --brand-green: #39b54a;

    /* Roles */
    --primary: #9e40a3;
    --primary-strong: #84328a;
    --on-primary: #ffffff;
    --primary-tint: #f4e8f5;
    --ink: #1d1c47;
    --ink-muted: #55546e;
    --background: #f7f6fb;
    --surface: #ffffff;
    --surface-2: #f0eff6;
    --outline: #8b8aa0;
    --divider: #e3e2ec;
    --accent: #39b54a;
    --scrim: rgba(18, 17, 38, 0.45);
    --shadow: 0 6px 24px rgba(29, 28, 71, 0.14);

    /* Top bar: light surface (variant A, chosen in the review of the first prototype round) */
    --bar-bg: var(--surface);
    --bar-ink: var(--ink);

    /* Status tones: text/icon on tinted fill */
    --tone-success: #1e7a34;
    --tone-success-bg: #e6f4e8;
    --tone-warning: #8a5300;
    --tone-warning-bg: #fdf1dc;
    --tone-error: #b3261e;
    --tone-error-bg: #fcebea;
    --tone-info: #2f55b8;
    --tone-info-bg: #e9eefb;
    --tone-neutral: #5f6070;
    --tone-neutral-bg: #eeeef2;

    /* Type */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-title: 600 24px/32px var(--font);
    --text-section: 600 18px/24px var(--font);
    --text-body: 400 16px/24px var(--font);
    --text-body-strong: 600 16px/24px var(--font);
    --text-secondary: 400 14px/20px var(--font);
    --text-label: 500 12px/16px var(--font);

    /* Shape and space */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-card: 12px;
    --radius-sheet: 20px;
    --radius-pill: 999px;
    --touch: 48px;

    /* Motion */
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --primary: #d59ad9;
        --primary-strong: #e6bde8;
        --on-primary: #3d0a42;
        --primary-tint: #3a2447;
        --ink: #ecebf5;
        --ink-muted: #b4b3c8;
        --background: #121126;
        --surface: #1c1b36;
        --surface-2: #26254a;
        --outline: #82819e;
        --divider: #2f2e52;
        --scrim: rgba(0, 0, 0, 0.6);
        --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
        --tone-success: #7fd48a;
        --tone-success-bg: #16351f;
        --tone-warning: #f2c06b;
        --tone-warning-bg: #3a2a0c;
        --tone-error: #ffb4ab;
        --tone-error-bg: #43171a;
        --tone-info: #a9c1ff;
        --tone-info-bg: #1a2754;
        --tone-neutral: #c4c3d4;
        --tone-neutral-bg: #2a2940;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #d59ad9;
    --primary-strong: #e6bde8;
    --on-primary: #3d0a42;
    --primary-tint: #3a2447;
    --ink: #ecebf5;
    --ink-muted: #b4b3c8;
    --background: #121126;
    --surface: #1c1b36;
    --surface-2: #26254a;
    --outline: #82819e;
    --divider: #2f2e52;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    --tone-success: #7fd48a;
    --tone-success-bg: #16351f;
    --tone-warning: #f2c06b;
    --tone-warning-bg: #3a2a0c;
    --tone-error: #ffb4ab;
    --tone-error-bg: #43171a;
    --tone-info: #a9c1ff;
    --tone-info-bg: #1a2754;
    --tone-neutral: #c4c3d4;
    --tone-neutral-bg: #2a2940;
}