@layer reset, base, components, utilities;

:root {
  /* Dichiarato esplicitamente perché il <dialog id="modal-dialog"> (top
     layer) usa i colori di sistema (Canvas/CanvasText) per il proprio
     background/testo di default: senza questa proprietà il browser li
     risolve in chiaro anche a tema scuro attivo, producendo testo chiaro
     su sfondo bianco dentro i modali. Ridichiarato dark nei blocchi tema
     scuro sotto. */
  color-scheme: light;

  /* Spacing */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Typography */
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* 2xs and 3xs only for uppercase micro labels: panel headings, column
     headings, the badges inside them. Never for running text. */
  --text-3xs:  0.625rem;
  --text-2xs:  0.6875rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.125rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.5625rem;
  --text-3xl:  1.9375rem;
  --text-4xl:  2.3125rem;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Colors — light mode
     Palette ricalcata sui valori reali di Tailwind CSS
     (github.com/tailwindlabs/tailwindcss, src/public/colors.js) — slate per
     i neutri, blue/red/green/amber/violet per gli accenti. Tailwind non è
     importato: sono solo questi valori hex come CSS custom property, vedi
     memoria "frontend-style-philosophy". */
  /* Attenuated light: page slate-200, cards slate-50. White cards on
     slate-100 separated from the page at 1.08:1 — a lot of light, little
     structure. Now 1.18:1, and no pure white on large areas. */
  --color-canvas:       #f8fafc;
  --color-surface:      #e2e8f0;
  --color-surface-alt:  #cbd5e1;

  --color-ink:          #0f172a;
  --color-ink-muted:    #475569;
  /* Same step as --color-ink-muted: slate-500 stays below 4.5:1 on the
     page surface, and the Tailwind scale has no step in between. The token
     keeps the intent (tertiary text), the value follows the contrast. */
  --color-ink-subtle:   #475569;
  --color-ink-faint:    #cbd5e1;
  --color-ink-inverted: #ffffff;

  --color-border:       #94a3b8;
  --color-border-light: #cbd5e1;
  /* Form field outline: a control must reach 3:1 against its background
     (WCAG 1.4.11); --color-border is decorative and does not. */
  --color-border-input: #64748b;

  --color-link:         #1d4ed8;
  --color-link-hover:   #1e40af;

  --color-primary:      #1d4ed8;
  --color-primary-dark: #1e40af;
  --color-primary-text: #ffffff;
  --color-primary-bg:   #eff6ff;
  --color-primary-border: #bfdbfe;

  /* Accents one step darker than the usual Tailwind pick, so that text
     stays above 4.5:1 on the slate-200 page: blue and violet 700, green and
     amber 800, red 700. */
  --color-positive:     #166534;
  --color-positive-bg:  #f0fdf4;
  --color-positive-border: #bbf7d0;

  --color-negative:     #b91c1c;
  --color-negative-text: #ffffff;
  --color-negative-bg:  #fef2f2;
  --color-negative-border: #fecaca;

  --color-warning:      #92400e;
  --color-warning-text: #ffffff;
  --color-warning-bg:   #fffbeb;
  --color-warning-border: #fde68a;

  --color-purple:       #6d28d9;
  --color-purple-bg:    #f5f3ff;
  --color-purple-border: #ddd6fe;

  /* Accento fisso per le barre scure (pv-panel__hd, rg-label, ecc.):
     non segue il tema — resta lo stesso navy con testo chiaro sia in
     chiaro che in scuro, è un tratto distintivo, non testo. */
  --color-accent-bar: #1a1a2e;
  --color-accent-bar-add: #4ade80;

  /* Colore del "timbro di protocollo" sul numero pratica (pv-stamp,
     vista dettaglio pratica). Volutamente diverso da --color-negative:
     qui non significa errore, richiama l'inchiostro dei timbri
     d'archivio su un fascicolo cartaceo. Ha una variante scura sotto. */
  --color-timbro: #9a3324;

  /* Borders & Radius */
  --border:            1px solid var(--color-border);
  --border-light:      1px solid var(--color-border-light);
  --border-input:      1px solid var(--color-border-input);
  --radius-sm:         0.25rem;
  --radius:            0.375rem;
  --radius-md:         0.5rem;
  --radius-lg:         0.75rem;
  --radius-full:       9999px;

  /* Single-column pages opened by people outside the studio */
  --width-narrow-page: 36rem;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(15 23 42 / 0.08);
  --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Focus */
  --focus-ring-color:  var(--color-primary);
  --focus-ring-size:   2px;
  --focus-ring-offset: 2px;

  /* Layout */
  --nav-height:     3.25rem;
  --content-width: 80rem;
  --sidebar-width: 13.5rem;
  --sidebar-width-collapsed: 3.5rem;
  --wizard-width: 56rem;
  --wizard-aside-width: 16rem;
  --main-padding:  clamp(var(--space-4), 3vw, var(--space-8));

  /* Density: component tokens, see the block at the end of this file. */
  --row-pad-y:     var(--space-3);
  --panel-pad-y:   var(--space-3);
  --control-pad-y: var(--space-2);
  --table-text:    var(--text-sm);

  /* Transitions */
  --transition-fast:   80ms ease-out;
  --transition-base:   150ms ease-out;
}

/*
 * Tema scuro — due condizioni che portano alla stessa palette:
 *  1. il sistema operativo preferisce lo scuro (prefers-color-scheme)
 *     e l'utente non ha scelto esplicitamente il chiaro (data-theme="light"
 *     esclude questo blocco tramite :not, così il chiaro vince sempre
 *     se scelto a mano anche con OS in dark mode);
 *  2. l'utente ha scelto esplicitamente lo scuro (data-theme="dark" sulla
 *     radice, indipendentemente dalla preferenza dell'OS).
 * --color-accent-bar e --color-ink-inverted restano fissi (vedi sopra):
 * non fanno parte di questo blocco.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-canvas:       #0f172a;
    --color-surface:      #020617;
    --color-surface-alt:  #1e293b;

    --color-ink:          #e2e8f0;
    --color-ink-muted:    #94a3b8;
    --color-ink-subtle:   #94a3b8;
    --color-ink-faint:    #334155;

    --color-border:       #334155;
    --color-border-light: #1e293b;

    --color-link:         #60a5fa;
    --color-link-hover:   #93c5fd;

    --color-primary:      #60a5fa;
    --color-primary-dark: #93c5fd;
    --color-primary-text: #0f172a;
    --color-primary-bg:   #172554;
    --color-primary-border: #1e40af;

    --color-positive:     #4ade80;
    --color-positive-bg:  #052e16;
    --color-positive-border: #166534;

    --color-negative:     #f87171;
    --color-negative-text: #0f172a;
    --color-negative-bg:  #450a0a;
    --color-negative-border: #991b1b;

    --color-warning:      #fbbf24;
    --color-warning-text: #0f172a;
    --color-warning-bg:   #451a03;
    --color-warning-border: #92400e;

    --color-purple:       #a78bfa;
    --color-purple-bg:    #2e1065;
    --color-purple-border: #5b21b6;

    --color-timbro:       #c17a5c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas:       #0f172a;
  --color-surface:      #020617;
  --color-surface-alt:  #1e293b;

  --color-ink:          #e2e8f0;
  --color-ink-muted:    #94a3b8;
  --color-ink-subtle:   #94a3b8;
  --color-ink-faint:    #334155;

  --color-border:       #334155;
  --color-border-light: #1e293b;

  --color-link:         #60a5fa;
  --color-link-hover:   #93c5fd;

  --color-primary:      #60a5fa;
  --color-primary-dark: #93c5fd;
  --color-primary-text: #0f172a;
  --color-primary-bg:   #172554;
  --color-primary-border: #1e40af;

  --color-positive:     #4ade80;
  --color-positive-bg:  #052e16;
  --color-positive-border: #166534;

  --color-negative:     #f87171;
  --color-negative-text: #0f172a;
  --color-negative-bg:  #450a0a;
  --color-negative-border: #991b1b;

  --color-warning:      #fbbf24;
  --color-warning-text: #0f172a;
  --color-warning-bg:   #451a03;
  --color-warning-border: #92400e;

  --color-purple:       #a78bfa;
  --color-purple-bg:    #2e1065;
  --color-purple-border: #5b21b6;

  --color-timbro:       #c17a5c;
}

/*
 * Density (docs/plans/interfaccia-di-lavoro.md, §5 Fase 1).
 *
 * Components never read the --space-* scale for the padding of rows,
 * panels and controls: they read the four tokens above. Each page sets its
 * own default with a class on <main> (AppearanceHelper#page_density), a
 * component can set its own with the same class (the timeline is a list
 * inside a medium page). The user's preference, data-density on <html>,
 * moves every context one step towards more air.
 *
 * Outside any @layer on purpose, like :root: these declarations sit on the
 * containers, so they win over the :root defaults by inheritance whatever
 * the layer of the components that use them.
 */
.density-compact {
  --row-pad-y:     var(--space-2);
  --panel-pad-y:   var(--space-2);
  --control-pad-y: var(--space-1-5);
  --table-text:    var(--text-sm);
}

.density-medium,
[data-density="comfortable"] .density-compact {
  --row-pad-y:     var(--space-3);
  --panel-pad-y:   var(--space-3);
  --control-pad-y: var(--space-2);
  --table-text:    var(--text-sm);
}

.density-comfortable,
[data-density="comfortable"] .density-medium {
  --row-pad-y:     var(--space-4);
  --panel-pad-y:   var(--space-5);
  --control-pad-y: calc(var(--space-2) + var(--space-0-5));
  --table-text:    var(--text-base);
}