/*
 * StreamLinePro — Design System Tokens
 * ======================================
 * SOURCE OF TRUTH per tutti i CSS del progetto.
 * Ogni area (Atleta, Coach) usa queste variabili.
 * NON definire :root altrove.
 *
 * Sezioni:
 *   1. Brand colors (condivisi)
 *   2. Atleta area tokens
 *   3. Coach area tokens
 *   4. Spacing & radius (condivisi)
 *   5. Typography scale (condivisa)
 *   6. Shadows (condivise)
 *   7. Dark mode overrides
 */

/* =============================================================
   1. BRAND COLORS — condivisi tra tutte le aree
============================================================= */
:root {
  /* Colori brand StreamLinePro */
  --sl-blue:        #004aad;
  --sl-blue-2:      #0b63d1;
  --sl-blue-hover:  #0060e0;
  --sl-orange:      #fd5a00;
  --sl-orange-2:    #ff7b2d;
  --sl-green:       #22a348;
  --sl-red:         #dc3545;
  --sl-yellow:      #fd7e14;
  --sl-purple:      #6d28d9;
  --sl-purple-2:    #7c3aed;

  /* Azioni semantiche condivise */
  --sl-action-neutral: var(--sl-blue);
  --sl-action-neutral-strong: var(--sl-blue-2);
  --sl-action-success: var(--sl-green);
  --sl-action-edit:    #0284c7;
  --sl-action-danger:  var(--sl-red);

  /* Accento contestuale: fallback Coach/Admin. Il mapping per area e centralizzato. */
  --sl-area-accent:        var(--sl-blue);
  --sl-area-accent-strong: var(--sl-blue-2);
  --sl-area-accent-soft:   color-mix(in srgb, var(--sl-area-accent) 14%, transparent);
  --sl-area-accent-border: color-mix(in srgb, var(--sl-area-accent) 42%, transparent);
  --sl-area-accent-text:   color-mix(in srgb, var(--sl-area-accent) 58%, white);
  --sl-area-accent-glow:   color-mix(in srgb, var(--sl-area-accent) 22%, transparent);
  --sl-area-accent-on:     white;
}

/* =============================================================
   2. ATLETA AREA TOKENS
   Usati da: Atleta/css/*, Atleta/js/*
============================================================= */
:root {
  /* Superfici */
  --bg-main:          #f0f4fb;
  --bg-card:          #ffffff;
  --bg-soft:          #f8fafc;

  /* Testo */
  --text-main:        #1f2937;
  --text-muted:       #6b7280;

  /* Bordi */
  --border-color:     #e5e7eb;

  /* Alias brand → Atleta */
  --accent-blue:      var(--sl-blue);
  --accent-orange:    var(--sl-orange);

  /* Ombre */
  --shadow-soft:      0 10px 24px rgba(15,23,42,.055);
  --shadow-card:      0 6px 18px rgba(0,0,0,.06);

  /* Gradiente sfondo atleta */
  --bg-gradient: linear-gradient(
    to top,
    #deeeff 0%,
    #eef4fb 28%,
    #f6f8fc 55%,
    #fef3ec 78%,
    #fde9d8 100%
  );
}

/* =============================================================
   3. COACH AREA TOKENS
   Usati da: Admin/Coaching/css/*, Admin/css/*
   Prefisso --coach- per evitare collisioni
============================================================= */
:root {
  /* Superfici coach */
  --coach-bg:              #f4f7fb;
  --coach-surface:         #ffffff;
  --coach-surface-2:       #f8fafc;
  --coach-surface-3:       #eef3f9;

  /* Testo coach */
  --coach-text:            #172033;
  --coach-muted:           #6b7280;

  /* Bordi coach */
  --coach-border:          #e6ebf2;
  --coach-border-strong:   #d7e0ec;

  /* Colori alias → brand */
  --coach-blue:            var(--sl-blue);
  --coach-blue-2:          var(--sl-blue-2);
  --coach-blue-soft:       #eef4ff;
  --coach-orange:          var(--sl-orange);
  --coach-orange-soft:     #fff3eb;
  --coach-green:           var(--sl-green);
  --coach-green-soft:      #eaf8ef;
  --coach-red:             var(--sl-red);
  --coach-red-soft:        #fff0f2;
  --coach-yellow:          var(--sl-yellow);
  --coach-yellow-soft:     #fff7eb;
  --coach-purple:          var(--sl-purple);
  --coach-purple-2:        var(--sl-purple-2);
  --coach-purple-soft:     rgba(109,40,217,.10);
  --coach-purple-border:   rgba(109,40,217,.25);

  /* Accent teal + indigo (dashboard home, gare, eventi) */
  --coach-teal:            #0ea5e9;
  --coach-teal-soft:       rgba(14,165,233,.12);
  --coach-indigo:          #6366f1;
  --coach-indigo-soft:     rgba(99,102,241,.12);

  /* Yellow foreground (eventi in scadenza) */
  --coach-yellow-fg:       #856404;

  /* Pagamenti alert background */
  --coach-pay-scaduto-bg:  rgba(220,53,69,.06);
  --coach-pay-urgente-bg:  rgba(253,90,0,.05);

  /* Ombre coach */
  --coach-shadow:          0 18px 40px rgba(15,23,42,.08);
  --coach-shadow-soft:     0 10px 24px rgba(15,23,42,.055);

  /* Admin chrome (sidebar background blend) */
  --admin-chrome-bg: color-mix(in srgb, var(--coach-surface) 64%, var(--coach-surface-2));
  --coach-nav-surface: rgba(0,74,173,.08);
  /* Superficie operativa dei filtri Admin: blu, distinta dalle card. */
  --admin-filter-surface: linear-gradient(135deg, #08458f 0%, #0870c5 100%);
  --admin-operational-surface: rgba(10,18,38,.65);
  --plans-input: #071b3b;
  --admin-filter-control-bg: rgba(255,255,255,.11);
  --admin-filter-control-hover: rgba(255,255,255,.19);
  --admin-filter-border: rgba(151,207,255,.52);
  --admin-operational-control-bg: #0c315e;
  --admin-operational-control-hover: #12487f;
  --admin-operational-control-border: #2e76b7;
  --admin-operational-active-start: #0074e8;
  --admin-operational-active-end: #00a6e8;
  --admin-dropdown-surface: #020d2d;
  --admin-dropdown-hover: #f76210;

  /* Layout coach */
  --coach-sidebar-w:           250px;
  --coach-sidebar-collapsed-w: 76px;
  --coach-inspector-w:         360px;
  --coach-topbar-h:            64px;
  --coach-chrome-bg:           var(--coach-surface);
  --coach-chrome-bg-strong:    var(--coach-surface);
  --coach-mobile-drawer-bg:    var(--coach-surface);
}

/* =============================================================
   4. SPACING & RADIUS — condivisi
============================================================= */
:root {
  --space-0:      4px;
  --space-1:      8px;
  --space-2:      12px;
  --space-3:      16px;
  --space-4:      20px;
  --space-5:      28px;
  --space-6:      32px;

  --radius-card:  14px;
  --radius-ctrl:  10px;
  --radius-sm:    8px;
  --radius-panel: 18px;
  --radius-pill:  999px;

  /* Coach radius (più arrotondato) */
  --coach-radius: var(--radius-panel);

  --sl-border-width:       1px;
  --sl-control-height:     44px;
  --sl-control-height-sm:  40px;
  --sl-control-height-lg:  48px;
  --sl-touch-target:       44px;
  --sl-icon-sm:            14px;
  --sl-icon-md:            18px;
  --sl-icon-lg:            24px;
  --sl-page-gutter:        12px;
  --sl-content-max:        1600px;
  --sl-drawer-max:         560px;
}

/* =============================================================
   5. TYPOGRAPHY SCALE — condivisa
============================================================= */
:root {
  --font-primary: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sl-font-page-title:       22px;
  --sl-line-page-title:       28px;
  --sl-font-topbar-title:     18px;
  --sl-line-topbar-title:     24px;
  --sl-font-section-title:    16px;
  --sl-line-section-title:    22px;
  --sl-font-card-title:       14px;
  --sl-line-card-title:       20px;
  --sl-font-body:             14px;
  --sl-line-body:             20px;
  --sl-font-secondary:        13px;
  --sl-line-secondary:        18px;
  --sl-font-caption:          12px;
  --sl-line-caption:          16px;
  --sl-font-label:            12px;
  --sl-line-label:            16px;
  --sl-font-table-header:     11px;
  --sl-line-table-header:     16px;
  --sl-font-kpi:              24px;
  --sl-line-kpi:              28px;
  --sl-font-button:           14px;
  --sl-line-button:           20px;
  --sl-font-button-sm:        13px;
  --sl-line-button-sm:        18px;

  --fz-title: var(--sl-font-page-title);
  --fz-h2:    var(--sl-font-topbar-title);
  --fz-body:  var(--sl-font-body);
  --fz-meta:  var(--sl-font-caption);
  --fz-small: var(--sl-font-secondary);

  /* Scala responsive (da typography.css) */
  --text-xs:   clamp(0.72rem, 0.7rem  + 0.10vw, 0.78rem);
  --text-sm:   clamp(0.82rem, 0.8rem  + 0.12vw, 0.90rem);
  --text-md:   clamp(0.92rem, 0.9rem  + 0.18vw, 1.00rem);
  --text-lg:   clamp(1.00rem, 0.98rem + 0.30vw, 1.12rem);

  --h1:  clamp(1.80rem, 1.70rem + 0.80vw, 2.20rem);
  --h2:  clamp(1.40rem, 1.30rem + 0.50vw, 1.80rem);
  --h3:  clamp(1.15rem, 1.10rem + 0.30vw, 1.40rem);
}

/* =============================================================
   6. SHADOWS — condivise
============================================================= */
:root {
  --shadow-xs:   0 1px  3px rgba(15,23,42,.06);
  --shadow-sm:   0 4px  10px rgba(15,23,42,.07);
  --shadow-md:   0 10px 24px rgba(15,23,42,.055);
  --shadow-lg:   0 18px 40px rgba(15,23,42,.08);
  --shadow-xl:   0 24px 50px rgba(15,23,42,.12);

  --sl-overlay-bg: rgba(2,8,23,.72);
  --sl-motion-fast: 140ms;
  --sl-motion-base: 220ms;
  --sl-motion-slow: 300ms;
}

:root {
  --sl-bp-small: 480px;
  --sl-bp-tablet: 768px;
  --sl-bp-compact: 1024px;
  --sl-bp-shell: 1200px;
  --sl-bp-wide: 1440px;
}

/* =============================================================
   7b. Z-INDEX HIERARCHY — gerarchia overlay condivisa
   Fonte canonica: usare SOLO questi valori in tutto il progetto.
   NON usare valori hardcoded diversi da queste variabili.
============================================================= */
:root {
  /* Livello 1 — elementi floating nel layout */
  --z-dropdown:       200;   /* autocomplete, period picker, notify dropdown */
  --z-sticky:          10;   /* sticky header interni ai panel */

  /* Livello 2 — sidebar mobile */
  --z-mobile-overlay: 1400;  /* backdrop sidebar mobile */
  --z-mobile-sidebar: 1500;  /* ds-left panel, coach-sidebar mobile */

  /* Livello 3 — navigazione persistente */
  --z-bottom-nav:     2000;  /* bottom navigation bar */

  /* Livello 4 — pannelli focus (slide panel atleta, cal sidebar v2) */
  --z-panel-backdrop: 8000;  /* backdrop condiviso per i panel focus */
  --z-panel:          8001;  /* pannelli laterali applicativi */
  --z-panel-raised:   8002;  /* secondo panel aperto sopra il primo */

  /* Livello 5 — pannelli full overlay (cal-panel principale) */
  --z-overlay-backdrop: 8900; /* backdrop per overlay full */
  --z-overlay:          8901; /* cal-panel, drawer add-atleta */

  /* Livello 6 — sistema */
  --z-toast:          9500;  /* toast/notifiche */
  --z-confirm:        9900;  /* dialog di conferma */
}

/* =============================================================
   7. DARK MODE — overrides Atleta (body.dark-mode)
============================================================= */
body.dark-mode {
  --bg-main:        #080f1e;
  --bg-card:        #0f172a;
  --bg-soft:        #162336;

  --text-main:      #dce8f8;
  --text-muted:     #526b88;

  --border-color:   rgba(255,255,255,.11);
  --shadow-soft:    0 14px 30px rgba(0,0,0,.35);

  --bg-gradient: linear-gradient(
    to bottom,
    #080f1e 0%,
    #0b1426 60%,
    #080f1e 100%
  );
}

/* Dark mode — overrides Coach (html[data-theme="dark"]) */
html[data-theme="dark"] {
  --sl-action-neutral: #1677ff;
  --sl-action-neutral-strong: #0b63d1;
  --sl-action-success: #22c55e;
  --sl-action-edit:    #38bdf8;
  --sl-action-danger:  #f43f5e;
  --coach-bg:              #080d1a;
  --coach-surface:         #0f1623;   /* card principale — dark navy neutro */
  --coach-surface-2:       #172030;   /* header card, secondary surface */
  --coach-surface-3:       #1d2a3f;   /* hover, input, tertiary */
  --coach-text:            #eef2f8;
  --coach-muted:           #8da0b8;
  --coach-border:          rgba(255,255,255,.10);
  --coach-border-strong:   rgba(255,255,255,.18);
  --coach-blue-soft:       rgba(0,74,173,.24);
  --coach-orange-soft:     rgba(253,90,0,.16);
  --coach-green-soft:      rgba(34,163,72,.14);
  --coach-red-soft:        rgba(220,53,69,.14);
  --coach-yellow-soft:     rgba(253,126,20,.14);
  --coach-purple:          #a78bfa;
  --coach-purple-2:        #8b5cf6;
  --coach-purple-soft:     rgba(167,139,250,.14);
  --coach-purple-border:   rgba(167,139,250,.30);
  --coach-teal:            #9ddfff;
  --coach-teal-soft:       rgba(14,165,233,.22);
  --coach-indigo:          #b9b7ff;
  --coach-indigo-soft:     rgba(99,102,241,.22);
  --coach-yellow-fg:       #ffd79b;
  --coach-pay-scaduto-bg:  rgba(220,53,69,.14);
  --coach-pay-urgente-bg:  rgba(253,90,0,.12);
  --coach-shadow:          0 22px 46px rgba(0,0,0,.36);
  --coach-shadow-soft:     0 14px 30px rgba(0,0,0,.24);
  --admin-chrome-bg:       var(--coach-chrome-bg-strong, rgba(2,8,32,.88));
  --coach-nav-surface:     rgba(0,74,173,.12);
  --admin-filter-surface:  linear-gradient(135deg, #08458f 0%, #0870c5 100%);
  --admin-operational-surface: rgba(10,18,38,.65);
  --plans-input:           #071b3b;
  --admin-filter-control-bg: rgba(255,255,255,.11);
  --admin-filter-control-hover: rgba(255,255,255,.19);
  --admin-filter-border:   rgba(151,207,255,.52);
  --admin-operational-control-bg: #0c315e;
  --admin-operational-control-hover: #12487f;
  --admin-operational-control-border: #2e76b7;
  --admin-operational-active-start: #0074e8;
  --admin-operational-active-end: #00a6e8;
  --admin-dropdown-surface: #020d2d;
  --admin-dropdown-hover: #f76210;
  --coach-chrome-bg:           rgba(2,8,32,.80);
  --coach-chrome-bg-strong:    rgba(2,8,32,.88);
  --coach-mobile-drawer-bg:    rgba(4,10,28,.72);
}