/* ============================================
   NOIIISE WEBAPP - DESIGN SYSTEM
   Aligned with noiiise-app (Flutter) palette

   Brand Color: #CB4C38
   ============================================ */

/* Satoshi (variable) — webapp display/body font, served from public/fonts. */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* noiiise logotype -- the wordmark font (5 glyphs n/o/i/s/e, lowercase only),
   pixel-traced from the SVG master in noiiise-lab. Used for the "noiiise"
   wordmark: header rail (CommandMenu) + chat bot bubbles. Master in the lab. */
@font-face {
  font-family: 'Noiiise Logotype';
  src: url('/fonts/Noiiise/Noiiise-Logotype.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ----------------------------------------
   SHADCN/UI REQUIRED VARIABLES
   Aligned with Flutter neutral palette
   ---------------------------------------- */

:root {
  --radius: 0.5rem;

  /* Primary = brand identity color (shadcn-canonical name).
     The extras below have no shadcn equivalent; they keep the `primary` root. */
  --primary: #CB4C38;
  --primary-foreground: #FFFFFF;
  --primary-hover: #B84432;
  --primary-light: #F2DFDB;
  --primary-shade: rgba(203, 76, 56, 0.08);

  /* Background & Foreground */
  --background: #fafaf8;
  --foreground: #111111;

  /* Card */
  --card: #fafaf8;
  --card-foreground: #111111;

  /* Popover */
  --popover: #fafaf8;
  --popover-foreground: #111111;

  /* Secondary */
  --secondary: rgba(17, 17, 17, 0.04);
  --secondary-foreground: #111111;

  /* Muted */
  --muted: rgba(17, 17, 17, 0.04);
  --muted-foreground: rgba(17, 17, 17, 0.6);

  /* Accent */
  --accent: rgba(17, 17, 17, 0.04);
  --accent-foreground: #111111;

  /* Destructive */
  --destructive: #C62828;
  --destructive-foreground: #FFFFFF;

  /* Border & Input */
  --border: rgba(17, 17, 17, 0.1);
  --input: rgba(17, 17, 17, 0.18);
  --ring: #CB4C38;
}

/* ----------------------------------------
   DARK MODE
   ---------------------------------------- */

.dark {
  /* shadcn raw — dark overrides */
  --primary: #CB4C38;
  --primary-foreground: #FFFFFF;
  --primary-hover: #D85D49;
  --primary-light: #2C1916;
  --primary-shade: rgba(203, 76, 56, 0.16);

  --background: #090909;
  --foreground: #F9F9F8;

  --card: #090909;
  --card-foreground: #F9F9F8;

  --popover: #090909;
  --popover-foreground: #F9F9F8;

  --secondary: rgba(255, 255, 255, 0.05);
  --secondary-foreground: #F9F9F8;

  --muted: rgba(255, 255, 255, 0.05);
  --muted-foreground: rgba(249, 249, 248, 0.72);

  --accent: rgba(255, 255, 255, 0.05);
  --accent-foreground: #F9F9F8;

  --destructive: #EF5E5E;
  --destructive-foreground: #FFFFFF;

  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #CB4C38;

  /* Custom extras — dark overrides (no shadcn equivalent).
     The --color-* aliases (surface, surface-secondary, text, text-secondary,
     border, danger) follow their shadcn source automatically and need no
     override here. --color-favourite and the data-viz palette are identical
     across modes, so they live once in @theme. */
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-active: rgba(255, 255, 255, 0.10);
  --color-surface-elevated: #090909;
  --color-surface-elevated-hover: rgba(255, 255, 255, 0.06);

  /* Chat bubble (theirs): OPAQUE, surface-secondary composited over #090909. See @theme. */
  --color-chat-bubble: #151515;

  --color-text-tertiary: rgba(249, 249, 248, 0.45);
  --color-text-placeholder: rgba(249, 249, 248, 0.45);

  --color-border-strong: rgba(255, 255, 255, 0.20);

  --color-success: #5AD674;
  --color-success-bg: #1A2E1A;

  --color-warning: #FFC15E;
  --color-warning-bg: #2E2A1A;

  --color-danger-bg: #2E1A1A;

  --color-info: #64B5FF;
  --color-info-bg: #1A2A3E;

  /* Group colours — dark values (crimson and plum are the same in both themes, so they
     live once in @theme). */
  --color-group-blue: #0091FF;
  --color-group-indigo: #6D7CFF;
  --color-group-purple: #DB34F2;
  --color-group-mint: #00DAC3;
  --color-group-cyan: #3CD3FE;
  --color-group-red: #FF4245;
  --color-group-orange: #FF9230;
  --color-group-yellow: #FFD600;
  --color-group-green: #30D158;
  --color-group-pink: #FF375F;

  /* Side panel — dark */
  --side-panel-bg: #090909;
  --side-panel-border: rgba(255, 255, 255, 0.12);
  --side-panel-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------
   NOIIISE CUSTOM DESIGN TOKENS
   ---------------------------------------- */

@theme {
  /* GENERATED START — non editare a mano, rigenerato da $OPS type:apply (tools/type/manifest.json) */
  /* testo hero-title: titolo dell'hero di un detail, di un builder o di un modale, titolo delle pagine lista */
  --text-hero-title: 18px;
  --text-hero-title--line-height: 1.3;
  --text-hero-title--font-weight: 580;
  --text-hero-title--letter-spacing: -0.005em;
  /* testo hero-title-compact: titolo dell'hero compatto (rail affiancato, card stacked) */
  --text-hero-title-compact: 16px;
  --text-hero-title-compact--line-height: 1.3;
  --text-hero-title-compact--font-weight: 580;
  --text-hero-title-compact--letter-spacing: -0.005em;
  /* testo hero-meta: sottotitolo e meta sotto il titolo dell'hero, descrizione di un modale */
  --text-hero-meta: 13px;
  --text-hero-meta--line-height: 1.4;
  --text-hero-meta--font-weight: 450;
  --text-hero-meta--letter-spacing: 0em;
  /* testo section-label: etichetta di una sezione (sopra il contenuto), intestazione di un gruppo di opzioni */
  --text-section-label: 12px;
  --text-section-label--line-height: 1.35;
  --text-section-label--font-weight: 550;
  --text-section-label--letter-spacing: 0.01em;
  /* testo section-action: etichetta di una sezione che e' un'azione (chiudi le submission) */
  --text-section-action: 12px;
  --text-section-action--line-height: 1.35;
  --text-section-action--font-weight: 550;
  --text-section-action--letter-spacing: 0.01em;
  /* testo section-danger: etichetta di una sezione che e' un'azione distruttiva (elimina) */
  --text-section-danger: 12px;
  --text-section-danger--line-height: 1.35;
  --text-section-danger--font-weight: 550;
  --text-section-danger--letter-spacing: 0.01em;
  /* testo field-label: etichetta di un campo di un form (Label) */
  --text-field-label: 12px;
  --text-field-label--line-height: 1.35;
  --text-field-label--font-weight: 550;
  --text-field-label--letter-spacing: 0.01em;
  /* testo field-value: valore breve di un campo (citta', data, visibilita') */
  --text-field-value: 14px;
  --text-field-value--line-height: 1.4;
  --text-field-value--font-weight: 500;
  --text-field-value--letter-spacing: 0em;
  /* testo field-value-secondary: seconda riga di un valore (indirizzo sotto la citta', orario sotto la data), valore assente o non trovato */
  --text-field-value-secondary: 14px;
  --text-field-value-secondary--line-height: 1.4;
  --text-field-value-secondary--font-weight: 500;
  --text-field-value-secondary--letter-spacing: 0em;
  /* testo field-value-empty: valore di un campo ancora vuoto, tono smorzato */
  --text-field-value-empty: 14px;
  --text-field-value-empty--line-height: 1.4;
  --text-field-value-empty--font-weight: 500;
  --text-field-value-empty--letter-spacing: 0em;
  /* testo field-value-prompt: valore di un campo ancora vuoto che invita a compilarlo (creazione) */
  --text-field-value-prompt: 14px;
  --text-field-value-prompt--line-height: 1.4;
  --text-field-value-prompt--font-weight: 500;
  --text-field-value-prompt--letter-spacing: 0em;
  /* testo field-value-code: codice da copiare in un campo (codice invito) */
  --text-field-value-code: 14px;
  --text-field-value-code--line-height: 1.4;
  --text-field-value-code--font-weight: 500;
  --text-field-value-code--letter-spacing: 0em;
  /* testo long-text: testo lungo in lettura e in edit: bio, brief, note, descrizioni */
  --text-long-text: 13px;
  --text-long-text--line-height: 1.55;
  --text-long-text--font-weight: 420;
  --text-long-text--letter-spacing: 0em;
  /* testo long-text-empty: testo lungo ancora vuoto, tono smorzato */
  --text-long-text-empty: 13px;
  --text-long-text-empty--line-height: 1.55;
  --text-long-text-empty--font-weight: 420;
  --text-long-text-empty--letter-spacing: 0em;
  /* testo long-text-prompt: testo lungo ancora vuoto che invita a scriverlo (creazione) */
  --text-long-text-prompt: 13px;
  --text-long-text-prompt--line-height: 1.55;
  --text-long-text-prompt--font-weight: 420;
  --text-long-text-prompt--letter-spacing: 0em;
  /* testo list-preview: anteprima compatta di una lista chiusa (ruoli, generi, partecipanti) */
  --text-list-preview: 13px;
  --text-list-preview--line-height: 1.4;
  --text-list-preview--font-weight: 450;
  --text-list-preview--letter-spacing: 0em;
  /* testo list-preview-empty: anteprima di una lista ancora vuota, tono smorzato */
  --text-list-preview-empty: 13px;
  --text-list-preview-empty--line-height: 1.4;
  --text-list-preview-empty--font-weight: 450;
  --text-list-preview-empty--letter-spacing: 0em;
  /* testo list-preview-prompt: anteprima di una lista ancora vuota che invita a riempirla (creazione) */
  --text-list-preview-prompt: 13px;
  --text-list-preview-prompt--line-height: 1.4;
  --text-list-preview-prompt--font-weight: 450;
  --text-list-preview-prompt--letter-spacing: 0em;
  /* testo list-preview-count: conteggio accanto all'anteprima di una lista (partecipanti) */
  --text-list-preview-count: 13px;
  --text-list-preview-count--line-height: 1.4;
  --text-list-preview-count--font-weight: 450;
  --text-list-preview-count--letter-spacing: 0em;
  /* testo row-title: titolo di una riga di lista (persona, ruolo, risultato) */
  --text-row-title: 14px;
  --text-row-title--line-height: 1.35;
  --text-row-title--font-weight: 500;
  --text-row-title--letter-spacing: 0em;
  /* testo row-title-action: titolo di una riga che apre qualcosa (nome della persona in una card) */
  --text-row-title-action: 14px;
  --text-row-title-action--line-height: 1.35;
  --text-row-title-action--font-weight: 500;
  --text-row-title-action--letter-spacing: 0em;
  /* testo row-title-secondary: titolo di una riga ancora senza scelta (testo segnaposto di una scelta chiusa) */
  --text-row-title-secondary: 14px;
  --text-row-title-secondary--line-height: 1.35;
  --text-row-title-secondary--font-weight: 500;
  --text-row-title-secondary--letter-spacing: 0em;
  /* testo row-title-danger: titolo di una riga che e' un'azione distruttiva (voce di un foglio di azioni) */
  --text-row-title-danger: 14px;
  --text-row-title-danger--line-height: 1.35;
  --text-row-title-danger--font-weight: 500;
  --text-row-title-danger--letter-spacing: 0em;
  /* testo row-title-count: numero nel titolo di una riga (quantita' di un ruolo) */
  --text-row-title-count: 14px;
  --text-row-title-count--line-height: 1.35;
  --text-row-title-count--font-weight: 500;
  --text-row-title-count--letter-spacing: 0em;
  /* testo row-meta: meta di una riga di lista (ruolo, stato, data) */
  --text-row-meta: 12px;
  --text-row-meta--line-height: 1.35;
  --text-row-meta--font-weight: 450;
  --text-row-meta--letter-spacing: 0em;
  /* testo row-meta-selected: meta di una riga scelta (conteggio di un luogo selezionato) */
  --text-row-meta-selected: 12px;
  --text-row-meta-selected--line-height: 1.35;
  --text-row-meta-selected--font-weight: 450;
  --text-row-meta-selected--letter-spacing: 0em;
  /* testo row-meta-active: meta in un selettore a due voci, la voce attiva (lead o backup) */
  --text-row-meta-active: 12px;
  --text-row-meta-active--line-height: 1.35;
  --text-row-meta-active--font-weight: 450;
  --text-row-meta-active--letter-spacing: 0em;
  /* testo row-meta-warning: meta di una riga che chiede attenzione (invito senza lead) */
  --text-row-meta-warning: 12px;
  --text-row-meta-warning--line-height: 1.35;
  --text-row-meta-warning--font-weight: 450;
  --text-row-meta-warning--letter-spacing: 0em;
  /* testo input-text: testo digitato in un campo a riga singola, select, ricerca, orario */
  --text-input-text: 14px;
  --text-input-text--line-height: 1.4;
  --text-input-text--font-weight: 450;
  --text-input-text--letter-spacing: 0em;
  /* testo input-text-empty: campo ancora vuoto che mostra il suo segnaposto (data da scegliere), tono smorzato */
  --text-input-text-empty: 14px;
  --text-input-text-empty--line-height: 1.4;
  --text-input-text-empty--font-weight: 450;
  --text-input-text-empty--letter-spacing: 0em;
  /* testo input-text-prompt: campo ancora vuoto che invita a compilarlo (creazione) */
  --text-input-text-prompt: 14px;
  --text-input-text-prompt--line-height: 1.4;
  --text-input-text-prompt--font-weight: 450;
  --text-input-text-prompt--letter-spacing: 0em;
  /* testo button: etichetta di un bottone */
  --text-button: 13px;
  --text-button--line-height: 1.25;
  --text-button--font-weight: 550;
  --text-button--letter-spacing: 0.005em;
  /* testo button-danger: etichetta di un bottone distruttivo */
  --text-button-danger: 13px;
  --text-button-danger--line-height: 1.25;
  --text-button-danger--font-weight: 550;
  --text-button-danger--letter-spacing: 0.005em;
  /* testo button-secondary: etichetta di un bottone secondario */
  --text-button-secondary: 13px;
  --text-button-secondary--line-height: 1.25;
  --text-button-secondary--font-weight: 550;
  --text-button-secondary--letter-spacing: 0.005em;
  /* testo button-link: etichetta di un bottone a forma di link */
  --text-button-link: 13px;
  --text-button-link--line-height: 1.25;
  --text-button-link--font-weight: 550;
  --text-button-link--letter-spacing: 0.005em;
  /* testo button-muted: etichetta di un bottone smorzato (azzera i filtri, vedi tutti) */
  --text-button-muted: 13px;
  --text-button-muted--line-height: 1.25;
  --text-button-muted--font-weight: 550;
  --text-button-muted--letter-spacing: 0.005em;
  /* testo nav: voci di menu, tab, navigazione, orari rapidi */
  --text-nav: 13px;
  --text-nav--line-height: 1.3;
  --text-nav--font-weight: 500;
  --text-nav--letter-spacing: 0em;
  /* testo nav-selected: voce scelta di un menu o di una lista di opzioni, orario rapido scelto */
  --text-nav-selected: 13px;
  --text-nav-selected--line-height: 1.3;
  --text-nav-selected--font-weight: 500;
  --text-nav-selected--letter-spacing: 0em;
  /* testo nav-secondary: parte secondaria di una voce di menu (regione accanto alla citta'), lista di opzioni vuota */
  --text-nav-secondary: 13px;
  --text-nav-secondary--line-height: 1.3;
  --text-nav-secondary--font-weight: 500;
  --text-nav-secondary--letter-spacing: 0em;
  /* testo note: hint, contatori, timestamp */
  --text-note: 11px;
  --text-note--line-height: 1.35;
  --text-note--font-weight: 500;
  --text-note--letter-spacing: 0.01em;
  /* testo note-error: errore sotto un campo, stato scaduto */
  --text-note-error: 11px;
  --text-note-error--line-height: 1.35;
  --text-note-error--font-weight: 500;
  --text-note-error--letter-spacing: 0.01em;
  /* testo note-faint: separatore minimo fra due meta (il punto fra tipo e stato) */
  --text-note-faint: 11px;
  --text-note-faint--line-height: 1.35;
  --text-note-faint--font-weight: 500;
  --text-note-faint--letter-spacing: 0.01em;
  /* testo number-display: numeri grandi dei cruscotti */
  --text-number-display: 28px;
  --text-number-display--line-height: 1.1;
  --text-number-display--font-weight: 580;
  --text-number-display--letter-spacing: -0.01em;
  /* spazio section: tra due sezioni di un detail o di un builder */
  --spacing-section: 22px;
  /* spazio section-head: tra l'etichetta di una sezione e il suo contenuto */
  --spacing-section-head: 8px;
  /* spazio panel-x: padding orizzontale di rail, modale, pannello editor */
  --spacing-panel-x: 20px;
  /* spazio panel-y: padding verticale di rail, modale, pannello editor */
  --spacing-panel-y: 16px;
  /* spazio row-x: padding orizzontale di una riga di lista */
  --spacing-row-x: 12px;
  /* spazio row-y: padding verticale di una riga di lista */
  --spacing-row-y: 8px;
  /* spazio row-gap: tra gli elementi dentro una riga (avatar, testo, azione) */
  --spacing-row-gap: 10px;
  /* spazio list-gap: tra due righe di una lista */
  --spacing-list-gap: 2px;
  /* spazio stack: tra due campi di un form o di un editor */
  --spacing-stack: 12px;
  /* spazio inline: tra un'icona e il suo testo; tra elementi piccoli affiancati: chip, select e bottone, i due lati di uno stepper o di un toggle */
  --spacing-inline: 6px;
  /* spazio tight: tra titolo e meta dentro lo stesso blocco */
  --spacing-tight: 4px;
  /* spazio hairline: scarto minimo: righe dello stesso valore, l'ora sotto il nome, il ritocco ottico di un glifo, il rientro di un bottone di download */
  --spacing-hairline: 2px;
  /* spazio control-x: padding orizzontale di input, select, textarea */
  --spacing-control-x: 12px;
  /* spazio control-y: padding verticale di input, select, textarea */
  --spacing-control-y: 6px;
  /* spazio control-gap: tra icona e testo dentro un controllo o un bottone */
  --spacing-control-gap: 8px;
  /* spazio control-icon-inset: rientro del testo quando un'icona sta dentro il controllo */
  --spacing-control-icon-inset: 36px;
  /* spazio button-x: padding orizzontale di un bottone */
  --spacing-button-x: 16px;
  /* spazio button-x-sm: padding orizzontale di un bottone piccolo */
  --spacing-button-x-sm: 12px;
  /* spazio button-y: padding verticale di un bottone */
  --spacing-button-y: 8px;
  /* spazio menu: padding del contenitore di un menu, select aperta, lista di opzioni */
  --spacing-menu: 4px;
  /* spazio menu-item-x: padding orizzontale di una voce di menu o di opzione */
  --spacing-menu-item-x: 8px;
  /* spazio menu-item-y: padding verticale di una voce di menu o di opzione */
  --spacing-menu-item-y: 6px;
  /* spazio dialog: padding di un modale */
  --spacing-dialog: 24px;
  /* spazio dialog-gap: tra header, corpo e footer di un modale */
  --spacing-dialog-gap: 16px;
  /* spazio switch-inset: padding fra bordo e pomello dello switch */
  --spacing-switch-inset: 3px;
  /* spazio tile-y: padding verticale della cella di una tile di lista */
  --spacing-tile-y: 10px;
  /* spazio chip-x: padding orizzontale di un chip */
  --spacing-chip-x: 10px;
  /* spazio search-inset: rientro del testo nel campo di ricerca compatto, per icona e X */
  --spacing-search-inset: 28px;
  /* spazio tile-overlay-y: fondo della tile quando un overlay sta in basso (azione, non letti) */
  --spacing-tile-overlay-y: 28px;
  /* spazio widget-action-top: spazio sopra la timeline del widget split per il bottone di annullamento */
  --spacing-widget-action-top: 28px;
  /* spazio tile-overlay-x: riserva a destra del titolo della tile quando un overlay sta in alto */
  --spacing-tile-overlay-x: 32px;
  /* spazio menu-item-inset: rientro di una voce di menu con indicatore (check, radio) */
  --spacing-menu-item-inset: 32px;
  /* spazio error-pad: padding del fallback di errore */
  --spacing-error-pad: 32px;
  /* spazio chat-state: padding verticale del caricamento della chat */
  --spacing-chat-state: 32px;
  /* spazio chat-empty: padding verticale dello stato vuoto della chat */
  --spacing-chat-empty: 48px;
  /* spazio state-y: padding verticale degli stati vuoto e di caricamento di pagina */
  --spacing-state-y: 64px;
  /* spazio cluster: tra elementi affiancati di una riga compatta: avatar e bolla, trigger delle pill, leading e testo di una tile, blocchi di un widget, header e footer di una card */
  --spacing-cluster: 8px;
  /* spazio cluster-tight: tra icona e testo stretti: trigger di un filtro, riga meta, link, icona dentro un bottone con testo; sopra una riga di bottoni */
  --spacing-cluster-tight: 4px;
  /* spazio block: tra i blocchi grandi di un widget o di un editor; tra binario e contenuto della timeline; tra spinner e messaggio */
  --spacing-block: 12px;
  /* spazio block-lg: tra le sezioni di una card o di un'area: mesi del calendario, messaggi della chat, sotto il riquadro di uno stato */
  --spacing-block-lg: 16px;
  /* spazio state-gap: sotto la descrizione di uno stato vuoto o di errore */
  --spacing-state-gap: 24px;
  /* spazio area-x: padding orizzontale di un'area: stati, composer, area messaggi, header della chat, barra, toolbar, cella di tabella, popover, banner */
  --spacing-area-x: 16px;
  /* spazio area-y: padding verticale di un'area: composer, area messaggi, header della chat, footer bar, errore inline */
  --spacing-area-y: 12px;
  /* spazio bar-y: padding verticale di una barra o di uno scrim: toolbar, banner di risposta, scrim dei filtri */
  --spacing-bar-y: 8px;
  /* spazio bubble-x: padding orizzontale di una bolla di chat */
  --spacing-bubble-x: 12px;
  /* spazio bubble-y: padding verticale di una bolla di chat */
  --spacing-bubble-y: 8px;
  /* spazio card: padding di un popover, di una cella di tabella, di un banner di errore, di un modale di conferma */
  --spacing-card: 16px;
  /* spazio label-gap: tra etichetta e campo in un editor */
  --spacing-label-gap: 6px;
  /* spazio stack-overlap: sovrapposizione degli avatar nella pila e del chip +N */
  --spacing-stack-overlap: 6px;
  /* spazio pill-x: padding orizzontale di una pill piccola: codice invito, badge di una submission */
  --spacing-pill-x: 6px;
  /* spazio pill-y: padding verticale di una pill piccola e della data separatrice della chat */
  --spacing-pill-y: 2px;
  /* spazio count-x: padding orizzontale del badge contatore nelle pill di stato */
  --spacing-count-x: 4px;
  /* spazio menu-row-x: padding orizzontale di una voce del menu contestuale di un messaggio */
  --spacing-menu-row-x: 12px;
  /* spazio menu-row-y: padding verticale di una voce del menu contestuale di un messaggio */
  --spacing-menu-row-y: 8px;
  /* spazio menu-row-gap: tra icona e testo in una voce del menu contestuale di un messaggio */
  --spacing-menu-row-gap: 10px;
  /* spazio calendar: padding del contenitore del calendario */
  --spacing-calendar: 12px;
  /* spazio icon-pad: padding di un bottone a sola icona piccolo: X di un banner, copia, archivio, toggle */
  --spacing-icon-pad: 4px;
  /* spazio chip-y: padding verticale di un chip piccolo */
  --spacing-chip-y: 4px;
  /* spazio chip-lg-x: padding orizzontale di un chip grande */
  --spacing-chip-lg-x: 12px;
  /* spazio chip-lg-y: padding verticale di un chip grande */
  --spacing-chip-lg-y: 6px;
  /* spazio compact-x: padding orizzontale di un controllo compatto a 28: annulla split, etichetta del separatore data, riga cliccabile */
  --spacing-compact-x: 8px;
  /* spazio quote-x: padding orizzontale della citazione di risposta in una bolla */
  --spacing-quote-x: 8px;
  /* spazio message-gap: tra due messaggi della chat dello stesso mittente */
  --spacing-message-gap: 4px;
  /* spazio message-gap-lg: tra due messaggi della chat di mittenti diversi */
  --spacing-message-gap-lg: 12px;
  /* spazio nav-x: padding orizzontale della navigazione del calendario */
  --spacing-nav-x: 4px;
  /* spazio icon-nudge: ritocco di un pixel dell'icona accanto a un messaggio di campo */
  --spacing-icon-nudge: 1px;
  /* spazio close-slot: posto riservato alla X in cima a uno sheet */
  --spacing-close-slot: 48px;
  /* taglia hero-tile: riquadro icona o avatar dell'hero di un detail e di un pannello di sezione; il glifo di X e bandierina sta sulla sua linea alta */
  --spacing-hero-tile: 40px;
  /* taglia icon-button: bottone a sola icona: X e bandierina d'angolo, menu overflow, frecce del calendario */
  --spacing-icon-button: 28px;
  /* taglia control: altezza di input, select, campo data e ora, trigger dei filtri */
  --spacing-control: 36px;
  /* taglia control-sm: altezza dei controlli compatti: select nelle righe, popover-select, bottoni di riga */
  --spacing-control-sm: 32px;
  /* taglia avatar-stack: avatar nelle pile sovrapposte e nei riassunti partecipanti */
  --spacing-avatar-stack: 20px;
  /* taglia avatar-row: avatar nella riga persona di un builder o di una sezione */
  --spacing-avatar-row: 24px;
  /* taglia avatar-tile: avatar nelle tile di lista: chat, membri, professional, inviti */
  --spacing-avatar-tile: 28px;
  /* taglia avatar-chat: avatar accanto a un messaggio in chat */
  --spacing-avatar-chat: 32px;
  /* taglia avatar-profile: avatar della testata del profilo e dell'onboarding (iniziali 12) */
  --spacing-avatar-profile: 40px;
  /* taglia icon-inline: glifo dentro un testo, un'etichetta di sezione, un chip, una voce di menu */
  --spacing-icon-inline: 16px;
  /* taglia icon-control: glifo di un bottone, di un controllo e dell'hero (centrato nel riquadro hero-tile) */
  --spacing-icon-control: 20px;
  /* taglia icon-section: glifo di uno stato vuoto, di un avviso, di un modale di conferma */
  --spacing-icon-section: 24px;
  /* taglia icon-chip: indicatore piccolo: spunta del select, chevron e chiusura di un chip */
  --spacing-icon-chip: 14px;
  /* taglia checkbox: checkbox e pomello dello slider */
  --spacing-checkbox: 16px;
  /* taglia dot: pallino: campo richiesto, puntini di scrittura in corso */
  --spacing-dot: 6px;
  /* taglia status-dot: pallino di stato nelle pill e nelle righe */
  --spacing-status-dot: 10px;
  /* taglia badge: contatore dei non letti */
  --spacing-badge: 20px;
  /* taglia state-tile: riquadro dell'icona negli stati vuoti, di errore e nei modali di conferma */
  --spacing-state-tile: 48px;
  /* taglia cover: altezza dell'anteprima immagine e del riquadro di caricamento in un dettaglio */
  --spacing-cover: 128px;
  /* taglia list-scroll: altezza massima di una lista scorrevole dentro un campo: suggerimenti, risultati */
  --spacing-list-scroll: 192px;
  /* taglia dropdown: larghezza dei menu a tendina dell'header e dei menu contestuali */
  --spacing-dropdown: 192px;
  /* taglia popover: larghezza di un popover di modifica in linea (citta') */
  --spacing-popover: 288px;
  /* taglia column-label: colonna delle etichette nelle matrici e nelle barre del radar */
  --spacing-column-label: 160px;
  /* taglia avatar-entry: avatar della riga di uno split nella lista degli split */
  --spacing-avatar-entry: 40px;
  /* taglia avatar-header: avatar dell'utente nell'header dell'app */
  --spacing-avatar-header: 32px;
  /* taglia avatar-radar: avatar nelle card dei talenti e nella barra di composizione del radar */
  --spacing-avatar-radar: 28px;
  /* taglia avatar-roster: avatar nella card del roster del radar */
  --spacing-avatar-roster: 20px;
  /* taglia avatar-dock: avatar nella finestra chat del dock */
  --spacing-avatar-dock: 20px;
  /* taglia icon-meta: glifo minore: spinner del Save negli editor, X del chip, chevron del filtro, meta delle tile, widget dello split */
  --spacing-icon-meta: 12px;
  /* taglia icon-mark: glifo minimo: pallino del radio nel menu, inbox nel badge messaggi della tile sessione */
  --spacing-icon-mark: 8px;
  /* taglia divider: spessore di un separatore (menu, select, binario della timeline, divisore dei filtri) e della sentinella invisibile dello scroll infinito */
  --spacing-divider: 1px;
  /* taglia connector-top: tratto di connettore sopra il pallino del passo corrente della timeline dello split */
  --spacing-connector-top: 2px;
  /* taglia connector: connettore minimo fra due passi della timeline dello split */
  --spacing-connector: 12px;
  /* taglia step-ring: anello del passo corrente della timeline dello split e la sua colonna */
  --spacing-step-ring: 16px;
  /* taglia mark: pallino di un passo della timeline dello split e spessore della barra di avanzamento */
  --spacing-mark: 8px;
  /* taglia slider-track: binario dello slider */
  --spacing-slider-track: 4px;
  /* taglia slider-min: altezza minima dello slider verticale */
  --spacing-slider-min: 176px;
  /* taglia switch: larghezza del binario dello switch */
  --spacing-switch: 44px;
  /* taglia switch-track: altezza del binario dello switch */
  --spacing-switch-track: 24px;
  /* taglia switch-thumb: pomello dello switch */
  --spacing-switch-thumb: 18px;
  /* taglia tile-badge: badge messaggi sull'icona della tile sessione */
  --spacing-tile-badge: 12px;
  /* taglia chip-button: bottone di chiusura di un chip */
  --spacing-chip-button: 16px;
  /* taglia filter-divider: altezza del divisore fra i gruppi della riga filtri */
  --spacing-filter-divider: 20px;
  /* taglia icon-button-lg: bottone a sola icona grande: rimuovi invito accanto alla riga */
  --spacing-icon-button-lg: 40px;
  /* taglia menu-min: larghezza minima di dropdown, select e sottomenu */
  --spacing-menu-min: 128px;
  /* taglia context-menu: larghezza minima del menu overflow di un dettaglio e del menu contestuale di un messaggio */
  --spacing-context-menu: 176px;
  /* taglia filter-search: campo di ricerca per nome nella barra filtri dei professional */
  --spacing-filter-search: 176px;
  /* taglia search-min: larghezza minima del campo di ricerca nella barra filtri */
  --spacing-search-min: 200px;
  /* taglia search-max: larghezza massima del campo di ricerca nella barra filtri e della colonna di un messaggio audio */
  --spacing-search-max: 300px;
  /* taglia link-label: larghezza massima del nome nel link alla sessione sotto l'header della chat */
  --spacing-link-label: 150px;
  /* taglia role-select: select del ruolo nella riga di un membro della label */
  --spacing-role-select: 110px;
  /* taglia share-input: input della percentuale nella proposta di split */
  --spacing-share-input: 80px;
  /* taglia share-col: colonna della percentuale nell'approvazione dello split */
  --spacing-share-col: 48px;
  /* taglia signature-pad: tela della firma dello split */
  --spacing-signature-pad: 120px;
  /* taglia composer-max: altezza massima del composer della chat */
  --spacing-composer-max: 120px;
  /* taglia option-list: altezza massima della lista opzioni di select e popover-select */
  --spacing-option-list: 256px;
  /* taglia location-list: altezza massima dei risultati del selettore di localita' */
  --spacing-location-list: 320px;
  /* taglia inline-editor: larghezza del popover dell'editor inline di un builder */
  --spacing-inline-editor: 320px;
  /* taglia error-min: altezza minima del fallback di errore */
  --spacing-error-min: 400px;
  /* taglia avatar-card: avatar della card persona di un dettaglio (iniziali 14) */
  --spacing-avatar-card: 40px;
  /* taglia avatar-application: avatar della riga di una candidatura */
  --spacing-avatar-application: 32px;
  /* taglia control-xs: controllo compatto a 28 con testo: select della divisione nella riga membro, input della percentuale, annulla split, bottone testo della toolbar, chip piccolo */
  --spacing-control-xs: 28px;
  /* taglia play-button: bottone play di un messaggio audio */
  --spacing-play-button: 32px;
  /* taglia action-tile: riquadro dell'icona di un'azione nel foglio piu' della chat */
  --spacing-action-tile: 36px;
  /* taglia table-head: altezza della testata di una tabella */
  --spacing-table-head: 48px;
  /* taglia count-badge: badge contatore nelle pill di stato */
  --spacing-count-badge: 16px;
  /* taglia connector-stub: tratto di connettore sopra il pallino di un passo non corrente della timeline dello split */
  --spacing-connector-stub: 6px;
  /* taglia header-button: bottone a sola icona dell'header e X dell'inbox */
  --spacing-header-button: 32px;
  /* taglia auth-logo: logo nella pagina di accesso */
  --spacing-auth-logo: 32px;
  /* taglia avatar-label: avatar della label nel suo pannello */
  --spacing-avatar-label: 56px;
  /* taglia page-column: colonna di una pagina a colonna sola: supporto, split esterno */
  --spacing-page-column: 600px;
  /* taglia icon-create: glifo del bottone crea sessione nell'header */
  --spacing-icon-create: 18px;
  /* taglia icon-page: glifo del caricamento di pagina e dei dati della mappa non caricati */
  --spacing-icon-page: 32px;
  /* taglia icon-map: glifo della mappa non disponibile */
  --spacing-icon-map: 40px;
  /* taglia icon-outcome: glifo dell'esito: split esterno firmato, support inviato */
  --spacing-icon-outcome: 48px;
  /* GENERATED END */

  /* === Aliases onto shadcn raw values (single source of truth). ===
     Cambiare --primary / --background / --secondary / --muted-foreground /
     --border / --destructive in :root propaga automaticamente qui. */
  --color-surface: var(--background);
  --color-surface-secondary: var(--secondary);
  --color-text: var(--foreground);
  --color-text-secondary: var(--muted-foreground);
  --color-border: var(--border);
  --color-danger: var(--destructive);

  /* === Estensioni genuine (nessun equivalente shadcn) — light, dark in .dark === */
  --color-surface-hover: rgba(17, 17, 17, 0.05);
  --color-surface-active: rgba(17, 17, 17, 0.08);

  /* Chat bubble (theirs/noiiise): OPAQUE, not the translucent --secondary glass, so a
     bubble never lets the map/background bleed through (the chat sits over the
     full-bleed map). Colour = surface-secondary composited over --background. Dark
     override in .dark. The "mine" bubble uses bg-primary-light (opaque brand). */
  --color-chat-bubble: #F1F1EF;

  --color-text-tertiary: rgba(17, 17, 17, 0.35);
  --color-text-placeholder: rgba(17, 17, 17, 0.35);

  --color-border-strong: rgba(17, 17, 17, 0.16);

  --color-success: #1E7F34;
  --color-success-bg: #E8F5E9;

  --color-warning: #956600;
  --color-warning-bg: #FFF8E1;

  /* Favourite (star) — sempre giallo brillante, identico nei due temi */
  --color-favourite: #FFC15E;

  --color-danger-bg: #FFEBEE;

  --color-info: #0D6ED1;
  --color-info-bg: #E3F2FD;

  /* === Superficie "elevated" per controlli/card sopra lo sfondo (usata
     soprattutto in dark al posto degli hex #2E2E2E / #383838). === */
  --color-surface-elevated: #fafaf8;
  --color-surface-elevated-hover: rgba(17, 17, 17, 0.04);

  /* === Palette data-viz semantica (verdict semaphore -- salute, NON categorie.
     Verde/ambra/rosso = solo verdetto). radar/colors.ts e i grafici executive. */
  --color-chart-brand: var(--primary);
  --color-chart-ok: #5AD674;
  --color-chart-watch: #FFC15E;
  --color-chart-alert: #EF5E5E;
  --color-chart-info: #6AA8FF;

  /* === Palette data-viz CATEGORICA (serie). Rampe a 7 stop. Uso degli stop:
     serie/fill principale = 400, fill chiari = 100/200, bordo = 600, testo su
     sfondo colorato = 800. gray solo per assi/griglie, red solo per errori. === */
  --color-chart-blue-50: #E6F1FB;  --color-chart-blue-100: #B5D4F4;  --color-chart-blue-200: #85B7EB;
  --color-chart-blue-400: #378ADD; --color-chart-blue-600: #185FA5;  --color-chart-blue-800: #0C447C;  --color-chart-blue-900: #042C53;
  --color-chart-teal-50: #E1F5EE;  --color-chart-teal-100: #9FE1CB;  --color-chart-teal-200: #5DCAA5;
  --color-chart-teal-400: #1D9E75; --color-chart-teal-600: #0F6E56;  --color-chart-teal-800: #085041;  --color-chart-teal-900: #04342C;
  --color-chart-pink-50: #FBEAF0;  --color-chart-pink-100: #F4C0D1;  --color-chart-pink-200: #ED93B1;
  --color-chart-pink-400: #D4537E; --color-chart-pink-600: #993556;  --color-chart-pink-800: #72243E;  --color-chart-pink-900: #4B1528;
  --color-chart-green-50: #EAF3DE; --color-chart-green-100: #C0DD97; --color-chart-green-200: #97C459;
  --color-chart-green-400: #639922;--color-chart-green-600: #3B6D11; --color-chart-green-800: #27500A; --color-chart-green-900: #173404;
  --color-chart-amber-50: #FAEEDA; --color-chart-amber-100: #FAC775; --color-chart-amber-200: #EF9F27;
  --color-chart-amber-400: #BA7517;--color-chart-amber-600: #854F0B; --color-chart-amber-800: #633806; --color-chart-amber-900: #412402;
  --color-chart-purple-50: #EEEDFE;--color-chart-purple-100: #CECBF6;--color-chart-purple-200: #AFA9EC;
  --color-chart-purple-400: #7F77DD;--color-chart-purple-600: #534AB7;--color-chart-purple-800: #3C3489;--color-chart-purple-900: #26215C;
  --color-chart-coral-50: #FAECE7; --color-chart-coral-100: #F5C4B3; --color-chart-coral-200: #F0997B;
  --color-chart-coral-400: #D85A30;--color-chart-coral-600: #993C1D; --color-chart-coral-800: #712B13; --color-chart-coral-900: #4A1B0C;
  --color-chart-gray-50: #F1EFE8;  --color-chart-gray-100: #D3D1C7;  --color-chart-gray-200: #B4B2A9;
  --color-chart-gray-400: #888780; --color-chart-gray-600: #5F5E5A;  --color-chart-gray-800: #444441;  --color-chart-gray-900: #2C2C2A;
  --color-chart-red-50: #FCEBEB;   --color-chart-red-100: #F7C1C1;   --color-chart-red-200: #F09595;
  --color-chart-red-400: #E24B4A;  --color-chart-red-600: #A32D2D;   --color-chart-red-800: #791F1F;   --color-chart-red-900: #501313;

  /* Slot categorici -> hue (ordine di assegnazione delle serie; coral e viola
     in coda: coral collide col primary arancio, viola domina se assegnato presto). */
  --color-chart-cat-1: var(--color-chart-blue-400);
  --color-chart-cat-2: var(--color-chart-teal-400);
  --color-chart-cat-3: var(--color-chart-pink-400);
  --color-chart-cat-4: var(--color-chart-green-400);
  --color-chart-cat-5: var(--color-chart-amber-400);
  --color-chart-cat-6: var(--color-chart-purple-400);
  --color-chart-cat-7: var(--color-chart-coral-400);

  /* Group colours -- light values, in the order the database hands them out. The dark
     values are in .dark; the app receives these same values. */
  --color-group-blue: #0088FF;
  --color-group-indigo: #6155F5;
  --color-group-purple: #CB30E0;
  --color-group-mint: #00C8B3;
  --color-group-cyan: #00C0E8;
  --color-group-red: #FF383C;
  --color-group-orange: #FF8D28;
  --color-group-yellow: #FFCC00;
  --color-group-green: #34C759;
  --color-group-pink: #FF2D55;
  --color-group-crimson: #E93D82;
  --color-group-plum: #AB4ABA;

  /* neutral = gray-400 (assi/griglie), error = red-400 (solo stati di errore) */
  --color-chart-neutral: var(--color-chart-gray-400);
  --color-chart-error: var(--color-chart-red-400);

  /* Typography */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  --font-logotype: 'Noiiise Logotype', var(--font-sans);

  /* === Scala tipografica di base: display / title / body / label / caption, ognuno
     con dimensione, interlinea e peso insieme. Il testo dei componenti viene dai
     ruoli del registry (AppText variant); questa scala resta per i titoli di
     base.css (h1 e h2 title, da h3 a h6 body). Pesi quieti: il peso non fa
     gerarchia, la fa la dimensione + il colore. === */
  --text-display: 28px;
  --text-display--line-height: 1.1;
  --text-display--font-weight: 580;
  --text-title: 18px;
  --text-title--line-height: 1.3;
  --text-title--font-weight: 580;
  --text-body: 14px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 500;
  --text-label: 12px;
  --text-label--line-height: 1.35;
  --text-label--font-weight: 550;
  --text-caption: 11px;
  --text-caption--line-height: 1.35;
  --text-caption--font-weight: 500;

  /* Micro size fuori dal registry: i call site vivi sono nella baseline della
     lint, il codice nuovo usa i ruoli del registry. */
  --text-2xs: 11px;
  --text-3xs: 10px;
  --text-4xs: 9px;

  /* Spacing (4px grid) */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Shadows (minimal, Notion-style) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* Z-index layers */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-popover: 250;
  --z-toast: 300;

  /* Layout */
  --header-height: 48px;
  --content-max-width: 900px;
  --content-max-width-narrow: 720px;
  --content-max-width-wide: 1200px;

  /* ============================================
     APP LAYOUT SYSTEM
     Dashboard with side panel
     ============================================ */

  /* Shell grid columns: menu | list | content (.app-shell). The map is a
     full-bleed layer under everything, so column widths never resize it —
     only --command-menu-width animates (rail collapse). The list is a fixed
     rail; --side-panel-width narrows only when a drill-down opens (see
     .app-shell--stacked). Detail + drill-down slide in as fixed-width rails
     over the map (--detail-rail-width). */
  --command-menu-width: 200px;
  --side-panel-width: 400px;        /* LIST rail width */
  --detail-rail-width: 400px;       /* detail / drill-down rail width */
  --inbox-overlay-width: 360px;   /* inbox slide-over (notifications + messages) */
  --side-panel-bg: var(--card);
  --side-panel-border: var(--border);
  --side-panel-radius: 0;
  --side-panel-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);

  /* Z-index layers for app layout */
  --z-app-map: 0;
  --z-app-panel: 20;
  /* Header sits above panel cards (z 35 max) but below Radix portals (z-50:
     popover/dialog) so modals + popovers always cover the header. */
  --z-app-header: 40;
}

/* shadcn/ui theme inline mapping. Unica fonte dei radius.
   --color-border vive nel @theme non-inline perche'
   alcune regole CSS lo referenziano via var(--color-border). */
@theme inline {
  --radius-none: 0px;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* Nessun token per il raggio pieno: la geometria e' square o radius-sm, niente
     pill ne' cerchi. Il raggio pieno resta solo per switch e pallino di stato,
     dal default Tailwind. */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-primary-light: var(--primary-light);
  --color-primary-shade: var(--primary-shade);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

/* GENERATED MOBILE START — taglie mobile dei ruoli, rigenerato da $OPS type:apply */
@media (width < 48rem) {
  :root {
    --text-input-text: 16px;
    --text-input-text-empty: 16px;
    --text-input-text-prompt: 16px;
  }
}
/* GENERATED MOBILE END */