/* =========================================================================
   MEDIANA Design Tokens — v1.0 (12/08/2026)
   Standard: /root/develop/MEDIANA_DESIGN.md
   Dark-first. I componenti usano SOLO i token T2/T3, mai i primitivi T1.
   ========================================================================= */

:root {
  /* ---------------------------------------------------- T1 · PRIMITIVI ---
     Scala grezza, senza significato. Non usare mai direttamente nei componenti.
     Il blu di riferimento e' quello MEDIANA delle carte intestate e dei
     report Excel (navy-800 = #1F3864). */
  --navy-950: #070D18;
  --navy-900: #0B1220;
  --navy-850: #111A2B;
  --navy-800: #18243A;
  --navy-700: #1F3864;   /* blu MEDIANA */
  --navy-600: #2F5596;
  --navy-500: #4C7FC4;
  --navy-400: #7BA7DD;
  --navy-300: #A8C6EA;
  --navy-200: #D6E4F0;   /* azzurro chiaro MEDIANA */
  --navy-100: #EEF3FA;
  --navy-050: #F5F7FB;

  --white: #FFFFFF;
  --green-500: #2FA36B;
  --amber-500: #E0A526;
  --red-500:   #D9534F;

  /* --------------------------------------------------- T1 · GEOMETRIA ---
     Spaziatura su scala 4px. Nessun valore fuori scala e' ammesso. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  --radius-sm: 8px;    /* controlli  */
  --radius-md: 12px;   /* card       */
  --radius-lg: 20px;   /* sheet, modali */
  --radius-pill: 999px;

  /* ------------------------------------------------- T1 · TIPOGRAFIA ---
     Una sola famiglia. Font self-hosted: mai CDN esterne. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px;  --text-sm: 14px;  --text-md: 16px;  --text-lg: 20px;
  --text-xl: 24px;  --text-2xl: 32px; --text-3xl: 40px;
  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* ---------------------------------------------------- T1 · MOVIMENTO ---
     Si animano solo transform e opacity. */
  --motion-micro: 120ms;
  --motion-base: 200ms;
  --motion-enter: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================ T2 · SEMANTICI — TEMA SCURO (default) ===
     Il tema scuro e' quello progettato; il chiaro ne e' la derivazione.
     Nel dark l'elevazione si esprime col COLORE, non con l'ombra. */
  --color-bg:            var(--navy-900);
  --color-surface-1:     var(--navy-850);
  --color-surface-2:     var(--navy-800);
  --color-surface-sunken: var(--navy-950);

  --color-text-primary:   #E8EEF7;
  --color-text-secondary: #A3B2C9;
  --color-text-muted:     #6B7C96;
  --color-text-inverse:   var(--navy-900);

  --color-border:       #24334D;
  --color-border-strong:#33456580;

  --color-accent:          var(--navy-500);
  --color-accent-hover:    var(--navy-400);
  --color-accent-subtle:   #4C7FC41F;
  --color-on-accent:       var(--white);

  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);

  /* Vetro: SOLO per strati flottanti e temporanei (nav, sheet, modali, toast).
     Lo scrim opaco sotto il blur e' obbligatorio: garantisce il contrasto
     anche sopra un fondo chiaro. Il blur da solo non basta mai. */
  --glass-bg:     rgba(17, 26, 43, 0.55);
  --glass-scrim:  rgba(11, 18, 32, 0.30);
  --glass-border: rgba(168, 198, 234, 0.14);
  --glass-blur:   blur(24px) saturate(1.8);

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,.55);

  /* Filigrana: icona del significato della card, mai il logo. Piu' grande
     della card e tagliata dall'angolo: e' la sproporzione a darle peso. */
  --watermark-opacity: 0.10;

  /* Tinte dei badge: una per significato, mai decorative. Fondo tenue +
     testo della stessa famiglia cromatica. Le tre fonti hanno tinte proprie
     e stabili (AddLance blu, Addency viola, FreelanceDEV verde). */
  --h-blue-bg:   rgba(76,127,196,.18);  --h-blue-fg:   #8FBAE8;
  --h-violet-bg: rgba(150,116,220,.18); --h-violet-fg: #BCA4EE;
  --h-green-bg:  rgba(47,163,107,.18);  --h-green-fg:  #63CE9A;
  --h-amber-bg:  rgba(224,165,38,.20);  --h-amber-fg:  #EDC05C;
  --h-red-bg:    rgba(217,83,79,.18);   --h-red-fg:    #EE908C;

  color-scheme: dark;
}

/* ======================= T2 · SEMANTICI — TEMA CHIARO (derivato) =========
   Cambiano SOLO i token semantici: nessun componente sa in che tema si trova. */
:root[data-theme="light"] {
  --color-bg:            var(--navy-050);
  --color-surface-1:     var(--white);
  --color-surface-2:     var(--navy-100);
  --color-surface-sunken: var(--navy-200);

  --color-text-primary:   #0F1D33;
  --color-text-secondary: #3E5171;
  --color-text-muted:     #6B7C96;
  --color-text-inverse:   var(--white);

  --color-border:       #D3DEEC;
  --color-border-strong:#B4C6E7;

  --color-accent:        var(--navy-700);
  --color-accent-hover:  var(--navy-600);
  --color-accent-subtle: #1F386414;
  --color-on-accent:     var(--white);

  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-scrim:  rgba(245, 247, 251, 0.32);
  --glass-border: rgba(31, 56, 100, 0.12);

  --shadow-1: 0 1px 2px rgba(15,29,51,.08);
  --shadow-2: 0 8px 24px rgba(15,29,51,.12);
  --shadow-3: 0 24px 64px rgba(15,29,51,.16);

  --watermark-opacity: 0.09;

  --h-blue-bg:   #E3EDF9; --h-blue-fg:   #1F3864;
  --h-violet-bg: #EEE8FA; --h-violet-fg: #54329B;
  --h-green-bg:  #DDF2E8; --h-green-fg:  #1B6B45;
  --h-amber-bg:  #FBF0D8; --h-amber-fg:  #7A5608;
  --h-red-bg:    #FBE3E2; --h-red-fg:    #8E2B28;
  color-scheme: light;
}

/* Rispetta la preferenza di sistema quando l'utente non ha scelto. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: var(--navy-050);
    --color-surface-1: var(--white);
    --color-surface-2: var(--navy-100);
    --color-text-primary: #0F1D33;
    --color-text-secondary: #3E5171;
    --color-border: #D3DEEC;
    --color-accent: var(--navy-700);
    --glass-bg: rgba(255,255,255,.55);
    --glass-scrim: rgba(245,247,251,.32);
    --glass-border: rgba(31,56,100,.12);
    --watermark-opacity: 0.09;

    --h-blue-bg:   #E3EDF9; --h-blue-fg:   #1F3864;
    --h-violet-bg: #EEE8FA; --h-violet-fg: #54329B;
    --h-green-bg:  #DDF2E8; --h-green-fg:  #1B6B45;
    --h-amber-bg:  #FBF0D8; --h-amber-fg:  #7A5608;
    --h-red-bg:    #FBE3E2; --h-red-fg:    #8E2B28;
    color-scheme: light;
  }
}

/* ============================================ T3 · COMPONENTE (esempi) ===
   I componenti leggono questi, mai i primitivi. */
:root {
  --card-bg: var(--color-surface-1);
  --card-border: var(--color-border);
  --card-radius: var(--radius-md);
  --card-padding: var(--space-4);

  --nav-bg: var(--glass-bg);
  --nav-border: var(--glass-border);
  --nav-height: 64px;

  --sheet-bg: var(--glass-bg);
  --sheet-radius: var(--radius-lg);

  --tile-bg: var(--color-surface-1);
  --tile-radius: var(--radius-md);
}

/* ------------------------------------------------------------- utility ---
   Il vetro e' uno strato, non una skin: applicare .glass SOLO a nav, toolbar,
   sheet, modali, toast e menu. Mai a card di contenuto o righe di lista.
   Budget: massimo 2 superfici glass simultanee visibili. */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  position: relative;
}
.glass::before {           /* scrim: garantisce il contrasto sotto il blur */
  content: "";
  position: absolute; inset: 0;
  background: var(--glass-scrim);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
/* Fallback dove backdrop-filter non e' supportato: superficie opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--color-surface-1); }
}

.tabular { font-variant-numeric: tabular-nums; }

/* Accessibilita': non e' un extra. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Safe area: senza questo su iPhone l'app sembra rotta. */
.safe-top    { padding-top:    env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }