/* ==========================================================================
   BeGroup — Design tokens

   Tre regole:
   1. Nessun serif possibile: system-ui è il PRIMO della catena, così su ogni
      sistema si prende il sans nativo (SF Pro, Segoe UI Variable, Roboto).
   2. Nessuna sfumatura decorativa e nessun riflesso lucido: superfici piatte,
      bordi netti, ombre corte.
   3. Il colore del marchio non coincide con nessuno stato operativo, così
      "in preparazione" non si confonde mai con un pulsante.
   ========================================================================== */

:root {
  /* --- Tipografia ---------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-md:  0.875rem;   /* 14 */
  --fs-base:0.9375rem;  /* 15 */
  --fs-lg:  1.0625rem;  /* 17 */
  --fs-xl:  1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 2rem;       /* 32 */
  --fs-4xl: 2.625rem;   /* 42 */
  --fs-5xl: 3.5rem;     /* 56 */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  /* Titoli stretti: è ciò che dà l'aria contemporanea senza font esterni */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.016em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* --- Spazio (4px) -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px;

  /* --- Raggi ---------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* --- Neutri (quasi neutri, leggermente freddi) ---------------------- */
  --c-ink-950: #0A0B0E;
  --c-ink-900: #14161B;
  --c-ink-800: #1E2128;
  --c-ink-700: #2C303A;
  --c-ink-600: #454A57;
  --c-ink-500: #646A79;
  --c-ink-400: #8A90A0;
  --c-ink-300: #B3B8C4;
  --c-ink-200: #D5D9E1;
  --c-ink-100: #E7EAEF;
  --c-ink-50:  #F2F4F7;
  --c-white:   #FFFFFF;
  --c-canvas:  #F7F8FA;

  /* --- Marchio: indaco. Non è nessuno stato, quindi non confonde. ----- */
  --c-brand-700: #3A2CC7;
  --c-brand-600: #4837E0;
  --c-brand-500: #5A4AF5;
  --c-brand-400: #8175FF;
  --c-brand-200: #C7C1FF;
  --c-brand-100: #E4E1FF;
  --c-brand-50:  #F1F0FF;

  /* --- Stati operativi ------------------------------------------------ */
  --c-sky-700:  #1D4ED8;  --c-sky-500: #3B82F6;  --c-sky-100: #DEEAFE;  --c-sky-50: #EFF5FF;
  --c-amber-700:#9A5B00;  --c-amber-500:#E08700; --c-amber-100:#FCEBCB; --c-amber-50:#FFF7EA;
  --c-green-700:#06795A;  --c-green-500:#0E9F6E; --c-green-100:#D6F3E6; --c-green-50:#EDFAF4;
  --c-red-700:  #BE2C36;  --c-red-500:  #E5484D; --c-red-100:  #FBDEDF; --c-red-50:  #FEF1F1;
  --c-teal-700: #0B7A70;  --c-teal-500: #0D9488; --c-teal-100: #D3F0ED; --c-teal-50: #ECFAF8;

  /* --- Semantica (chiaro) --------------------------------------------- */
  --bg-canvas:  var(--c-canvas);
  --bg-surface: var(--c-white);
  --bg-raised:  var(--c-white);
  --bg-sunken:  #FAFBFC;
  --bg-inset:   var(--c-ink-50);
  --bg-rail:    #101216;
  --bg-hover:   rgba(69, 74, 87, 0.055);
  --bg-active:  rgba(69, 74, 87, 0.095);
  --bg-scrim:   rgba(10, 11, 14, 0.44);

  --text-primary:   var(--c-ink-900);
  --text-secondary: var(--c-ink-600);
  --text-tertiary:  var(--c-ink-400);
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--c-brand-600);

  --border-subtle:  rgba(44, 48, 58, 0.09);
  --border-default: rgba(44, 48, 58, 0.16);
  --border-strong:  rgba(44, 48, 58, 0.30);

  --brand:        var(--c-brand-500);
  --brand-strong: var(--c-brand-600);
  --brand-soft:   var(--c-brand-100);
  --brand-faint:  var(--c-brand-50);
  --brand-ring:   rgba(90, 74, 245, 0.28);

  --st-new-fg: var(--c-sky-700);    --st-new-bg: var(--c-sky-50);    --st-new-line: var(--c-sky-500);
  --st-prep-fg: var(--c-amber-700); --st-prep-bg: var(--c-amber-50); --st-prep-line: var(--c-amber-500);
  --st-ready-fg: var(--c-green-700);--st-ready-bg: var(--c-green-50);--st-ready-line: var(--c-green-500);
  --st-done-fg: var(--c-ink-600);   --st-done-bg: var(--c-ink-50);   --st-done-line: var(--c-ink-300);
  --st-alert-fg: var(--c-red-700);  --st-alert-bg: var(--c-red-50);  --st-alert-line: var(--c-red-500);
  --st-plum-fg: var(--c-teal-700);  --st-plum-bg: var(--c-teal-50);  --st-plum-line: var(--c-teal-500);

  /* --- Ombre: corte e neutre, mai diffuse ----------------------------- */
  --sh-xs: 0 1px 2px rgba(16, 18, 22, 0.05);
  --sh-sm: 0 1px 2px rgba(16, 18, 22, 0.05), 0 1px 3px rgba(16, 18, 22, 0.06);
  --sh-md: 0 2px 4px rgba(16, 18, 22, 0.05), 0 6px 14px rgba(16, 18, 22, 0.07);
  --sh-lg: 0 4px 8px rgba(16, 18, 22, 0.06), 0 14px 32px rgba(16, 18, 22, 0.10);
  --sh-xl: 0 8px 16px rgba(16, 18, 22, 0.07), 0 28px 60px rgba(16, 18, 22, 0.14);
  --sh-ring: 0 0 0 3px var(--brand-ring);

  /* --- Layout ---------------------------------------------------------- */
  --rail-w: 244px;
  --rail-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1560px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
}

/* ==========================================================================
   Scuro — near-black neutro, pensato per la console durante il servizio
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas:  #0D0E12;
  --bg-surface: #16181E;
  --bg-raised:  #1C1F26;
  --bg-sunken:  #101217;
  --bg-inset:   #22252D;
  --bg-rail:    #08090C;
  --bg-hover:   rgba(255, 255, 255, 0.055);
  --bg-active:  rgba(255, 255, 255, 0.10);
  --bg-scrim:   rgba(4, 5, 7, 0.68);

  --text-primary:   #F2F4F8;
  --text-secondary: #A8AEBC;
  --text-tertiary:  #757C8B;
  --text-inverse:   #14161B;
  --text-brand:     var(--c-brand-400);

  --border-subtle:  rgba(255, 255, 255, 0.075);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.28);

  --brand:        var(--c-brand-500);
  --brand-strong: var(--c-brand-400);
  --brand-soft:   rgba(90, 74, 245, 0.22);
  --brand-faint:  rgba(90, 74, 245, 0.11);
  --brand-ring:   rgba(129, 117, 255, 0.36);

  --st-new-fg: #7FAEFF;   --st-new-bg: rgba(59, 130, 246, 0.14);  --st-new-line: #3B82F6;
  --st-prep-fg: #F2B657;  --st-prep-bg: rgba(224, 135, 0, 0.15);  --st-prep-line: #E08700;
  --st-ready-fg: #46D6A0; --st-ready-bg: rgba(14, 159, 110, 0.15);--st-ready-line: #0E9F6E;
  --st-done-fg: #9BA2B1;  --st-done-bg: rgba(255, 255, 255, 0.06);--st-done-line: #4A505C;
  --st-alert-fg: #FF8085; --st-alert-bg: rgba(229, 72, 77, 0.15); --st-alert-line: #E5484D;
  --st-plum-fg: #3FC7BA;  --st-plum-bg: rgba(13, 148, 136, 0.15); --st-plum-line: #0D9488;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.55);
  --sh-xl: 0 8px 16px rgba(0, 0, 0, 0.55), 0 28px 60px rgba(0, 0, 0, 0.6);
}

/* Densità "servizio": tutto più grande, per leggere a distanza */
[data-density="service"] {
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
}