/* ============================================================================
   BakiPro Design System — Design token
   Fonte visiva: BakiPro Mobile ok.pdf (58 pagine). Vedi Docs/SCREEN_CATALOG.md §1.
   Regola: NESSUN valore colore/spazio/raggio/ombra duplicato nei CSS delle pagine.
   ============================================================================ */
:root {
    /* Palette — turchese (Professionista / brand) */
    --baki-teal-900: #17605F;
    --baki-teal-700: #249C9F;
    --baki-teal-600: #43B7B8;
    --baki-teal-400: #6FC9C9;
    --baki-teal-200: #A9DCDC;  /* footer / overlay acqua */
    --baki-teal-100: #DDF4F3;
    --baki-teal-050: #EFFAF9;

    /* Palette — arancio (Cliente / CTA) */
    --baki-orange-700: #D97706;
    --baki-orange-500: #F2921D;
    --baki-orange-300: #F8B95E;
    --baki-orange-100: #FDE2BE;
    --baki-orange-050: #FEF3E3;

    /* Palette — azzurro dei mockup 2026-10 (azioni, professionista); il turchese resta per logo e Dobloni */
    --baki-sky-900: #0E5A86;
    --baki-sky-700: #1483BF;
    --baki-sky-600: #1BA1DD;
    --baki-sky-400: #62C2EB;
    --baki-sky-200: #B8E2F6;
    --baki-sky-100: #E1F2FB;
    --baki-sky-050: #F1F9FE;

    /* Blu notte dei titoli (mockup 2026-10) */
    --baki-navy-900: #1C2A4A;
    --baki-navy-700: #3A4A6B;

    /* Palette — pesca decorativo (blob) */
    --baki-peach-200: #F8DCBC;
    --baki-peach-100: #FAE8D4;
    --baki-peach-050: #FCF3E8;

    /* Neutri */
    --baki-ink-900: #273238;
    --baki-gray-700: #60686D;
    --baki-gray-500: #939BA0;
    --baki-gray-300: #C9CED1;
    --baki-gray-200: #E7E9EA;
    --baki-gray-100: #F2F4F5;
    --baki-surface: #FFFFFF;
    --baki-background: #FBFDFE;

    /* Semantici */
    --baki-success: #2E9E5B;
    --baki-success-bg: #E3F5EA;
    --baki-warning: #D97706;
    --baki-warning-bg: #FDF0DC;
    --baki-danger: #D64545;
    --baki-danger-bg: #FBE7E7;
    --baki-info: var(--baki-sky-700);
    --baki-info-bg: var(--baki-sky-100);

    /* Ruoli dei colori (mockup 2026-10): "primary" = azioni (pulsanti pieni, schede selezionate,
       stato Confermato), "highlight" = evidenza (voce attiva della barra, CTA forte, Da confermare) */
    --baki-primary: var(--baki-sky-600);
    --baki-primary-strong: var(--baki-sky-700);
    --baki-primary-soft: var(--baki-sky-100);
    --baki-primary-contrast: #FFFFFF;
    --baki-highlight: var(--baki-orange-500);
    --baki-highlight-strong: var(--baki-orange-700);
    --baki-highlight-soft: var(--baki-orange-050);
    --baki-title: var(--baki-navy-900);

    /* Accent per ruolo: Cliente = arancio, Professionista = azzurro (mockup 2026-10; prima turchese).
       Cambiato da [data-baki-role]. */
    --baki-accent: var(--baki-sky-600);
    --baki-accent-strong: var(--baki-sky-700);
    --baki-accent-soft: var(--baki-sky-100);
    --baki-accent-contrast: #FFFFFF;

    /* Tipografia */
    --baki-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --baki-text-xs: 0.75rem;
    --baki-text-sm: 0.875rem;
    --baki-text-md: 1rem;
    --baki-text-lg: 1.125rem;
    --baki-text-xl: 1.375rem;
    --baki-text-2xl: 1.75rem;
    --baki-text-3xl: 2.25rem;

    /* Scala spazi */
    --baki-space-1: 0.25rem;
    --baki-space-2: 0.5rem;
    --baki-space-3: 0.75rem;
    --baki-space-4: 1rem;
    --baki-space-5: 1.5rem;
    --baki-space-6: 2rem;
    --baki-space-7: 3rem;

    /* Raggi (card molto arrotondate, pill per bottoni/input) */
    --baki-radius-sm: 10px;
    --baki-radius-md: 16px;
    --baki-radius-lg: 24px;
    --baki-radius-pill: 999px;

    /* Ombre morbide */
    --baki-shadow-card: 0 6px 24px rgba(39, 50, 56, 0.08);
    --baki-shadow-raised: 0 10px 32px rgba(39, 50, 56, 0.14);
    --baki-shadow-soft: 0 2px 8px rgba(39, 50, 56, 0.06);

    /* Icone e touch target */
    --baki-icon-sm: 16px;
    --baki-icon-md: 22px;
    --baki-icon-lg: 28px;
    --baki-touch-target: 44px;

    /* Breakpoint (riferimento per media query) */
    --baki-bp-sm: 480px;
    --baki-bp-md: 768px;
    --baki-bp-lg: 1024px;
    --baki-bp-xl: 1280px;

    /* Layout */
    --baki-sidebar-width: 264px;
    --baki-bottomnav-height: 64px;
    --baki-topbar-height: 60px;

    /* Colonna vertebrale dei Progressi (ADR-018): un colore per regione, come nell'esempio del cliente */
    --baki-spine-cervical: #F2921D;
    --baki-spine-thoracic: #3A9AD9;
    --baki-spine-lumbar: #EE7A2C;
    --baki-spine-sacral: #2FB3A3;
    --baki-spine-coccygeal: #E8553B;
    --baki-spine-locked: #EDF1F3;
    --baki-spine-locked-stroke: #D6DDE1;
    --baki-spine-locked-text: #9AA5AC;
    --baki-spine-cord: #CFE6E6;

    /* Pannello laterale: arancione per il cliente, turchese per il professionista */
    --baki-drawer-customer: #E8700F;
    --baki-drawer-professional: #1E9CA3;

    /* Transizioni */
    --baki-transition: 160ms ease;
}

/* Tema per ruolo (mockup: stesso layout, accent invertito) */
[data-baki-role="customer"] {
    --baki-accent: var(--baki-orange-500);
    --baki-accent-strong: var(--baki-orange-700);
    --baki-accent-soft: var(--baki-orange-100);
    --baki-accent-contrast: #FFFFFF;
}

[data-baki-role="professional"],
[data-baki-role="admin"] {
    --baki-accent: var(--baki-sky-600);
    --baki-accent-strong: var(--baki-sky-700);
    --baki-accent-soft: var(--baki-sky-100);
    --baki-accent-contrast: #FFFFFF;
}