/*
 * Otix design system — tokens.
 * Unica fonte dei valori (colori, tipo, forma, movimento, layout). components.css usa solo var(--…).
 * Ricavati da offix (public/assets/app.css). Per adottarlo in un'app basta ridefinire --brand e --on-brand.
 * Breakpoint (le media query non accettano variabili, qui sono documentati):
 *   mobile ≤720px · da 721px (tipo desktop, righe alte) · tablet 721–1099px · desktop ≥1100px (sidebar 252px)
 *   ≥1500px: nessuna regola nel DS, eventuale respiro extra a cura dell'app
 */
:root {
  /* Brand: l'app ridefinisce --brand e --on-brand; il resto si ricava. */
  --brand: #0069ff;
  --on-brand: #fff;
  --brand-dark: color-mix(in srgb, var(--brand) 82%, #000);          /* rgb × 0.82, come offix */
  --brand-soft: color-mix(in srgb, var(--brand) 12%, #fff);
  --brand-soft-2: color-mix(in srgb, var(--brand) 8%, #f4f6f9);
  --brand-line: color-mix(in srgb, var(--brand) 22%, #fff);
  --brand-ink: color-mix(in srgb, var(--brand) 55%, #1c2533);        /* testo su --brand-soft (nav attiva) */
  --brand-text: var(--brand-ink);                                    /* testo e icone in colore brand; --brand solo se regge 4.5:1 su bianco, --bg, --slate-100 e --brand-soft */
  --brand-wash: color-mix(in srgb, var(--brand) 6%, var(--surface)); /* stati con testo --muted sopra (riga selezionata, colonna di arrivo, dropzone): --muted ≥ 4.5:1 con qualsiasi brand */

  /* Superfici e testo */
  --bg: #f4f5f7;
  --surface: #fff;
  --surface-alt: #fbfcfd;                                             /* topbar */
  --ink: #222e3e;
  --ink-2: #3d4b5e;                                                   /* label, testo secondario forte */
  --muted: #6b6e74;                                                   /* offix #7a7e84, scurito per 4.5:1 su --bg */
  --line: #e3e6eb;
  --line-soft: #edeff1;                                               /* separatori fra righe */
  --line-strong: #d7dee7;                                             /* bordo dei campi */
  --focus: #738bac;                                                   /* bordo dei campi a fuoco */
  --focus-ring: #56729b;                                              /* contorno :focus-visible */
  --backdrop: rgb(29 40 56 / .4);

  /* Neutri grigio-blu di offix */
  --slate-50: #f8f9fb;
  --slate-100: #f1f4f8;
  --slate-200: #e7ecf3;
  --slate-300: #d7dee7;
  --slate-400: #9ca5b1;                                               /* solo decorazioni e placeholder grandi */
  --slate-500: #7b889a;                                               /* icone, mai testo piccolo */
  --slate-600: #596679;
  --slate-700: #4f6280;
  --slate-800: #2d425f;
  --slate-900: #1c2533;

  /* Stati: coppie sfondo/testo, testo ≥ 4.5:1 sul proprio sfondo */
  --status-pending-bg: #f8f2e4;
  --status-pending-fg: #816b32;
  --status-approved-bg: #e8edf4;
  --status-approved-fg: #52698a;
  --status-rejected-bg: #f8eae6;
  --status-rejected-fg: #945a4e;
  --status-cancelled-bg: #eeeff1;
  --status-cancelled-fg: #676b71;
  --status-danger-bg: #f7e9e5;
  --status-danger-fg: #9e5044;
  --status-ok-bg: #e7f0ea;
  --status-ok-fg: #2f6b4f;
  --status-info-bg: #eef3fa;
  --status-info-fg: #4f6280;
  --danger-solid: #934f42;                                            /* toast di errore, testo bianco */
  --danger-solid-dark: color-mix(in srgb, var(--danger-solid) 82%, #000);
  --on-solid: #fff;                                                   /* testo e segni bianchi su fondi pieni scuri (tooltip, spunta tonda) */
  --on-danger: #fff;                                                  /* testo su --danger-solid */

  /* Priorità dei task (puntino, barra della card): ≥ 3:1 su bianco */
  --priority-urgent: #c0503f;
  --priority-high: #a87b26;
  --priority-medium: #56729b;
  --priority-low: var(--slate-500);

  /* Tinte per tessere icona (decorative) */
  --tint-slate-bg: #e7ecf3;
  --tint-slate-fg: #647895;
  --tint-sand-bg: #f7efe1;
  --tint-sand-fg: #8f7746;
  --tint-lavender-bg: #f0edf5;
  --tint-lavender-fg: #806b9c;

  /* Tipografia */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* codici e credenziali */
  --text-12: 12px;                                                    /* minimo assoluto */
  --text-13: 13px;
  --text-14: 14px;                                                    /* corpo */
  --text-15: 15px;
  --text-16: 16px;
  --text-19: 19px;
  --text-25: 25px;
  --text-33: 33px;
  --text-36: 36px;
  --text-46: 46px;                                                    /* numeri grandi nelle card */
  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading: 1.55;
  --leading-relaxed: 1.8;
  --tracking-display: -1.4px;
  --tracking-title: -.8px;
  --tracking-heading: -.45px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-display: 550;
  --weight-semibold: 600;
  --weight-strong: 650;
  --weight-bold: 750;

  /* Spaziature (nome = px) */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Forma */
  --radius-5: 5px;                                                    /* badge, chip */
  --radius-7: 7px;                                                    /* tab */
  --radius-8: 8px;                                                    /* campi, nav, icon-btn */
  --radius-9: 9px;                                                    /* bottoni */
  --radius-10: 10px;                                                  /* tessere icona, toast */
  --radius-12: 12px;                                                  /* banner, elenchi annidati */
  --radius-13: 13px;                                                  /* stat */
  --radius-16: 16px;                                                  /* panel, card */
  --radius-18: 18px;                                                  /* dialog */
  --radius-pill: 999px;
  --radius-round: 50%;
  --shadow-card-hover: 0 7px 20px rgb(27 43 72 / .06);
  --shadow-raised: 0 8px 30px rgb(27 39 56 / .06);
  --shadow-dialog: 0 30px 100px rgb(27 39 56 / .15);
  --shadow-toast: 0 5px 20px rgb(0 0 0 / .13);
  --shadow-focus: 0 0 0 3px rgb(115 139 172 / .1);

  /* Movimento (azzerato da prefers-reduced-motion in components.css) */
  --dur-fast: .15s;
  --dur: .2s;
  --dur-slow: .24s;
  --ease-out: cubic-bezier(.2, .75, .25, 1);

  /* Livelli */
  --z-sidebar: 10;
  --z-dropdown: 50;
  --z-drawer: 60;                                                     /* pannello laterale non nativo */
  --z-offcanvas-backdrop: 70;                                         /* sfondo della sidebar a scomparsa */
  --z-offcanvas: 75;                                                  /* sidebar a scomparsa (≤720px) */
  --z-tooltip: 90;
  --z-toast: 100;
  --z-skip: 200;

  /* Layout e misure */
  --sidebar-w: 242px;
  --topbar-h: 84px;
  --control-h: 46px;
  --control-h-touch: 49px;                                            /* campi e bottoni a ≤720px */
  --icon-btn: 40px;
  --icon: 20px;
  --icon-sm: 16px;
  --page-max: 1470px;
  --page-pad-x: 42px;
  --page-pad-y: 40px;
  --dialog-w: 540px;
  --drawer-w: 760px;                                                  /* pannello laterale destro */
  --drawer-w-wide: 1080px;                                            /* drawer a due colonne */
  --dialog-w-large: 1080px;                                           /* dialog grande: pannello task */
  --kanban-col-w: 304px;
  --menu-w: 240px;
  --control-h-sm: 36px;                                               /* controlli compatti: segmenti, pagine, bottone small */
  --checkbox: 18px;
  --avatar: var(--slate-600);                                         /* colore di riserva; per utente si imposta inline */
  --on-avatar: #fff;                                                  /* iniziali */
}