/*
 * Chiosco Cloud — design tokens
 * Mirror del design system "Chiosco Cloud" (claude.ai/design).
 * Non modificare a mano: allineare al design system quando cambia.
 */

:root {
    /* Palette di brand */
    --brand-teal: #6DA0A6;
    --brand-gold: #F2C230;
    --brand-orange-light: #F2AE2E;
    --brand-orange: #F27329;
    --brand-orange-red: #F2522E;
    --brand-teal-dark: #2A5C62;
    --brand-gold-dark: #A67C00;
    --brand-orange-dark: #D95213;
    --brand-orange-red-dark: #C63A17;

    /* Gradienti */
    --gradient-warm: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-red) 100%);
    --gradient-warm-high-contrast: linear-gradient(135deg, var(--brand-orange-dark) 0%, var(--brand-orange-red-dark) 100%);
    --gradient-full: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-gold) 25%, var(--brand-orange-light) 50%, var(--brand-orange) 75%, var(--brand-orange-red) 100%);
    --gradient-sunset: linear-gradient(135deg, var(--brand-orange-light) 0%, var(--brand-orange) 50%, var(--brand-orange-red) 100%);
    --gradient-cool: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-gold) 100%);

    /* Superfici — tema scuro (default) */
    --background: #121212;
    --surface: #1e1e1e;
    --surface-2: #2c2c2c;
    --text-main: #ffffff;
    --text-secondary: #b3b3b3;
    --border: #333333;
    --fg-1: #ffffff;
    --fg-2: #a0a0a0;
    --accent: var(--brand-teal);

    --shadow-brand: 0 10px 30px -5px rgba(242, 115, 41, .3);
    --shadow-teal: 0 10px 30px -5px rgba(109, 160, 166, .3);

    /* Stati */
    --success: #22c55e;
    --warning: #f0b24a;
    --critical: #ef4444;
}

[data-theme='light'] {
    --background: #ffffff;
    --surface: #f3f4f6;
    --surface-2: #e5e7eb;
    --text-main: #111827;
    --text-secondary: #4b5563;
    --border: #e5e7eb;
    --fg-1: #111827;
    --fg-2: #4b5563;
    --accent: var(--brand-teal-dark);

    --shadow-brand: 0 10px 30px -5px rgba(242, 115, 41, .2);
    --shadow-teal: 0 10px 30px -5px rgba(109, 160, 166, .2);

    /* Su fondo chiaro i gradienti usano le varianti ad alto contrasto */
    --gradient-warm: linear-gradient(135deg, var(--brand-orange-dark) 0%, var(--brand-orange-red-dark) 100%);
    --gradient-cool: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-gold-dark) 100%);
}

/* Cassa Volante — palette POS/chiosco (solo chiara, leggibile all'aperto). */
:root {
    --pos-primary: #A0522D;
    --pos-primary-dark: #8A4524;
    --pos-success: #3A6B35;
    --pos-success-dark: #2E5429;
    --pos-accent: #E3B448;
    --pos-secondary: #5D4037;
    --pos-ink-strong: #3E2723;
    --pos-surface-bg: #FCFBF8;
    --pos-surface: #FFFFFF;
    --pos-outline: #E0E0D0;
    --pos-on-surface: #3E3E3E;
    --pos-warning: #D98A2B;
    --pos-critical: #B3261E;
}

/* Tipografia */
:root {
    --font-main: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-display: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-pos: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-display: 800 3rem/1.2 var(--font-display);
    --text-h1: 800 2.5rem/1.2 var(--font-display);
    --text-h2: 700 2rem/1.25 var(--font-display);
    --text-h3: 700 1.25rem/1.3 var(--font-main);
    --text-body: 400 1rem/1.5 var(--font-main);
    --text-body-lg: 400 1.2rem/1.5 var(--font-main);
    --text-small: 400 .875rem/1.4 var(--font-main);
    --text-caption: 400 .8rem/1.4 var(--font-main);

    --pos-text-display: 700 28px/34px var(--font-pos);
    --pos-text-title: 700 22px/28px var(--font-pos);
    --pos-text-section: 600 18px/24px var(--font-pos);
    --pos-text-body: 400 16px/24px var(--font-pos);
    --pos-text-label: 500 14px/20px var(--font-pos);
    --pos-text-caption: 400 12px/16px var(--font-pos);
    --pos-text-price: 600 18px/1 var(--font-pos);
    --pos-label-tracking: .06em;
}

/* Spaziature */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);

    --pos-space-xs: var(--space-1);
    --pos-space-sm: var(--space-2);
    --pos-space-md: var(--space-3);
    --pos-space-lg: var(--space-4);
    --pos-space-xl: var(--space-5);

    --touch-min: 48px;
    --touch-primary: 56px;
    --touch-keypad: 64px;
    --touch-tile: 88px;
}

/* Raggi, ombre, transizioni */
:root {
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    --pos-radius-card: 12px;
    --pos-radius-button: 10px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
}