/* ============================================================================
   ToMax Suite — Design Tokens v1
   Mood: "Stripe/Linear caldo · Hospitality Tech"
   Brand: arancione neon #FF4F1A + ambra #FFA500 · warm-dark surfaces
   WCAG AA verified on all foreground/background pairs.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ── Brand primitives ─────────────────────────────────────────────────── */
  --brand-orange-50:  #FFF1EB;
  --brand-orange-100: #FFDBC9;
  --brand-orange-200: #FFB593;
  --brand-orange-300: #FF8F5D;
  --brand-orange-400: #FF7137;
  --brand-orange-500: #FF4F1A;   /* X body — primary */
  --brand-orange-600: #E63A0F;   /* active/pressed */
  --brand-orange-700: #B82B08;
  --brand-orange-800: #842004;

  --brand-amber-300: #FFD27A;
  --brand-amber-400: #FFB547;
  --brand-amber-500: #FFA500;    /* circuiti, glow */
  --brand-amber-600: #D97E00;

  --brand-navy-700: #2A3B52;
  --brand-navy-800: #1F2D40;
  --brand-navy-900: #1A2332;     /* TOMA wordmark */

  /* ── Neutrals (warm-dark) ─────────────────────────────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAF3E7;       /* crema warm — text primary on dark */
  --neutral-100:  #EFE5D2;
  --neutral-200:  #D6C9B0;
  --neutral-300:  #A89A82;
  --neutral-400:  #7A6F5E;
  --neutral-500:  #4F4639;
  --neutral-600:  #322B22;
  --neutral-700:  #241C14;       /* card hover */
  --neutral-800:  #1A130C;       /* card */
  --neutral-850:  #140E08;       /* elevated bg */
  --neutral-900:  #0E0805;       /* app bg */
  --neutral-950:  #080503;       /* deepest input/well */

  /* ── Semantic surfaces ────────────────────────────────────────────────── */
  --bg:               var(--neutral-900);
  --bg-elev-1:        var(--neutral-850);
  --bg-elev-2:        var(--neutral-800);
  --bg-elev-3:        var(--neutral-700);
  --bg-input:         #0A0604;
  --bg-hover:         rgba(255, 196, 130, 0.04);
  --bg-active:        rgba(255, 79, 26, 0.10);
  --bg-scrim:         rgba(8, 5, 3, 0.72);

  --border:           rgba(255, 196, 130, 0.08);
  --border-strong:    rgba(255, 196, 130, 0.18);
  --border-brand:     rgba(255, 79, 26, 0.38);
  --border-focus:     var(--brand-orange-400);

  /* ── Semantic text (verified AA on --bg) ──────────────────────────────── */
  --text:             var(--neutral-50);
  --text-dim:         rgba(250, 243, 231, 0.72);   /* 7.0:1 on --bg */
  --text-soft:        rgba(250, 243, 231, 0.50);   /* 4.6:1 — minimum body */
  --text-faint:       rgba(250, 243, 231, 0.32);   /* decorative only */
  --text-on-brand:    #1A0A02;                     /* on --primary */
  --text-link:        var(--brand-amber-400);
  --text-danger:      #FF9B9E;
  --text-success:     #A8D89A;

  /* ── Semantic intent ──────────────────────────────────────────────────── */
  --primary:          var(--brand-orange-500);
  --primary-hover:    var(--brand-orange-400);
  --primary-active:   var(--brand-orange-600);
  --primary-dim:      rgba(255, 79, 26, 0.22);
  --primary-faint:    rgba(255, 79, 26, 0.10);

  --accent:           var(--brand-amber-500);
  --accent-dim:       rgba(255, 165, 0, 0.22);

  /* ── AI affordance accent (cyan calmo · per affordance AI) ────────────── */
  --brand-cyan-300: #B5D8E6;
  --brand-cyan-400: #79B8D4;   /* ai-accent body */
  --brand-cyan-500: #4E9CC4;
  --brand-cyan-600: #2E7FA7;
  --ai-accent:      var(--brand-cyan-400);
  --ai-accent-soft: var(--brand-cyan-300);
  --ai-accent-dim:  rgba(121, 184, 212, 0.16);
  --ai-accent-glow: 0 0 18px rgba(121, 184, 212, 0.28);

  --success:          #7FB069;
  --success-dim:      rgba(127, 176, 105, 0.18);
  --warning:          #F5A623;
  --warning-dim:      rgba(245, 166, 35, 0.18);
  --danger:           #E5484D;
  --danger-dim:       rgba(229, 72, 77, 0.18);
  --info:             #4DABF7;
  --info-dim:         rgba(77, 171, 247, 0.18);

  /* ── Operational status (pacing/lotti pills) ──────────────────────────── */
  --state-coda:        #F5A623;
  --state-sbloccato:   #7FB069;
  --state-cottura:     #FF7137;
  --state-pronto:      #4DABF7;
  --state-consegnato:  rgba(250, 243, 231, 0.42);
  --state-bloccato:    #E5484D;
  --state-forzato:     #C77DFF;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --font-2xs:     0.625rem;    /* 10 — micro labels (role pill, badge) */
  --font-xxs:     0.6875rem;   /* 11 — pill labels, tabular meta */
  --font-xs:      0.75rem;     /* 12 */
  --font-sm:      0.8125rem;   /* 13 */
  --font-base:    0.9375rem;   /* 15 — UI default */
  --font-md:      1rem;        /* 16 — body reading */
  --font-lg:      1.125rem;    /* 18 */
  --font-xl:      1.375rem;    /* 22 */
  --font-2xl:     1.75rem;     /* 28 */
  --font-3xl:     2.25rem;     /* 36 */
  --font-4xl:     3rem;        /* 48 */
  --font-display-lg: 3.75rem;  /* 60 — hero only */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Spacing (4-base) ─────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   2rem;      /* 32 */
  --space-8:   2.5rem;    /* 40 */
  --space-9:   3rem;      /* 48 */
  --space-10:  4rem;      /* 64 */
  --space-11:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */

  /* Back-compat with legacy app.css */
  --s1: var(--space-1); --s2: var(--space-2); --s3: var(--space-3);
  --s4: var(--space-4); --s5: var(--space-6); --s6: var(--space-7);

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ── Shadows (warm-layered) ───────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.18);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.22);
  --shadow:      0 6px 18px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.18);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-lg:   0 20px 44px rgba(0,0,0,0.48), 0 4px 12px rgba(0,0,0,0.22);
  --shadow-xl:   0 32px 64px rgba(0,0,0,0.55);

  /* Brand glow — firma estetica ToMax */
  --shadow-glow-sm: 0 0 0 1px rgba(255, 79, 26, 0.32), 0 0 12px rgba(255, 79, 26, 0.22);
  --shadow-glow:    0 0 0 1px rgba(255, 79, 26, 0.42), 0 0 24px rgba(255, 79, 26, 0.32), 0 0 1px rgba(255, 165, 0, 0.6);
  --shadow-glow-amber: 0 0 18px rgba(255, 165, 0, 0.28);

  /* Card depth (G6 · subtle elevation per .card-lift utility) */
  --shadow-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card-lift: 0 2px 0 rgba(0, 0, 0, 0.30), 0 10px 24px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card-lift-hover: 0 4px 0 rgba(0, 0, 0, 0.32), 0 16px 36px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* AI accent glow (per affordance AI · card AI / tool trace) */
  --shadow-ai-glow-sm: 0 0 0 1px rgba(121, 184, 212, 0.28), 0 0 12px rgba(121, 184, 212, 0.18);
  --shadow-ai-focus: 0 0 0 3px rgba(121, 184, 212, 0.32);

  --shadow-focus: 0 0 0 3px rgba(255, 79, 26, 0.32);
  --shadow-focus-danger: 0 0 0 3px rgba(229, 72, 77, 0.32);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-slower:  480ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --layout-max:        1440px;
  --layout-content:    1180px;
  --layout-narrow:     720px;
  --layout-form:       420px;
  --header-h:          64px;
  --header-h-mobile:   56px;
  --sidebar-w:         240px;
  --sidebar-w-collapsed: 64px;
  --bottom-nav-h:      72px;

  /* ── Z-index scale ────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-nav:     40;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   200;
  --z-tooltip: 300;
}

/* ============================================================================
   Light mode (opt-in via [data-theme="light"]) — future-ready.
   Definito ora per evitare drift in seguito.
   ============================================================================ */
[data-theme="light"] {
  color-scheme: light;
  --bg:               #FFFBF5;
  --bg-elev-1:        #FFF7EB;
  --bg-elev-2:        #FFFFFF;
  --bg-elev-3:        #FAF3E7;
  --bg-input:         #FFFFFF;
  --bg-hover:         rgba(26, 19, 12, 0.04);
  --bg-active:        rgba(255, 79, 26, 0.10);
  --bg-scrim:         rgba(26, 19, 12, 0.48);

  --border:           rgba(26, 19, 12, 0.10);
  --border-strong:    rgba(26, 19, 12, 0.18);

  --text:             #1A130C;
  --text-dim:         rgba(26, 19, 12, 0.70);
  --text-soft:        rgba(26, 19, 12, 0.52);
  --text-faint:       rgba(26, 19, 12, 0.32);
  --text-on-brand:    #FFFFFF;
  --text-danger:      #B8242A;
  --text-success:     #2E6F2E;

  --shadow-xs:   0 1px 2px rgba(26, 19, 12, 0.06);
  --shadow-sm:   0 2px 6px rgba(26, 19, 12, 0.08);
  --shadow:      0 6px 18px rgba(26, 19, 12, 0.10), 0 1px 2px rgba(26, 19, 12, 0.05);
  --shadow-card: 0 8px 24px rgba(26, 19, 12, 0.12);
  --shadow-lg:   0 20px 44px rgba(26, 19, 12, 0.18);
}

/* ============================================================================
   Reduced motion — respect user preference (A11y rule §1, §7)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}