/* ==============================================================================
   KICKOFF - DESIGN TOKENS (CSS Custom Properties)
   Tema "Maglia N°9": campo/divisa da calcio — sage/verde muschio/ocra su base
   chiara, Archivo Black (titoli/numeri) + Work Sans (testo). Restyling
   puramente visivo (settembre 2026) — nessuna funzione nuova, nessuna
   modifica a markup/struttura, vedi CHANGELOG.
   ============================================================================== */

:root {
  /* Colori brand — palette "Maglia N°9" */
  --kx-bg: #e8ecdb;             /* Sfondo generale dell'app (sage/erba chiara) */
  --kx-surface: #f5f7ec;        /* Sfondo card, navbar, dialog */
  --kx-surface-subtle: #eef1e2; /* Sfondo hover / elementi secondari */
  --kx-border: rgba(34, 38, 27, 0.35);   /* Bordo separatore (tratteggiato di firma) */
  --kx-border-hover: rgba(34, 38, 27, 0.55); /* Bordo in evidenza (hover/focus card) */

  --kx-ink: #22261b;            /* Testo primario (verde-nero erba) */
  --kx-ink-muted: #5e6350;      /* Testo secondario / grigio-verde neutro */

  --kx-primary: #35693f;        /* Verde muschio — primario per bottoni/nav/link */
  --kx-primary-hover: #2b5433;
  --kx-primary-light: rgba(53, 105, 63, 0.14);
  --kx-primary-ink: #f5f7ec;    /* Testo chiaro su sfondo primario/accent pieno */
  --kx-secondary: #8c4a2e;      /* Terracotta — secondario, evidenze */
  --kx-secondary-light: rgba(140, 74, 46, 0.16);
  --kx-accent: #b4700f;         /* Ocra — badge punteggio, CTA, stati in evidenza */
  --kx-accent-hover: #995e0c;
  --kx-accent-light: rgba(180, 112, 15, 0.14);
  --kx-accent-ink: #2b1400;     /* Testo scuro su sfondo ocra acceso */

  --kx-gradient-primary: var(--kx-primary); /* Fill piatto, niente gradienti neon */

  /* Stato autorizzazione FIGC (adattati alla base chiara) */
  --kx-auth-ok: #35693f;        /* Verde: Autorizzato FIGC con CU */
  --kx-auth-pending: #b4700f;   /* Ocra: Richiesta inviata o da richiedere */
  --kx-auth-none: #5e6350;      /* Grigio-verde: Non autorizzato / attività libera */
  --kx-auth-rej: #a23b2e;       /* Rosso mattone: Respinto / non valido */

  /* Sfondi "soft" semantici (badge, pannelli info su base chiara) */
  --kx-success-soft-bg: rgba(53, 105, 63, 0.12);
  --kx-success-soft-border: rgba(53, 105, 63, 0.35);
  --kx-warning-soft-bg: rgba(180, 112, 15, 0.12);
  --kx-warning-soft-border: rgba(180, 112, 15, 0.35);
  --kx-danger-soft-bg: rgba(162, 59, 46, 0.12);
  --kx-danger-soft-border: rgba(162, 59, 46, 0.35);

  /* Tipografia */
  --kx-font-display: 'Archivo Black', 'Arial Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kx-font: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --kx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --kx-text-xs: 0.75rem;    /* 12px */
  --kx-text-sm: 0.844rem;   /* 13.5px */
  --kx-text-base: 0.938rem; /* 15px */
  --kx-text-lg: 1.125rem;   /* 18px */
  --kx-text-xl: 1.313rem;   /* 21px */
  --kx-text-2xl: 1.625rem;  /* 26px */

  /* Spaziature e dimensioni */
  --kx-space-1: 4px;
  --kx-space-2: 8px;
  --kx-space-3: 12px;
  --kx-space-4: 16px;
  --kx-space-5: 20px;
  --kx-space-6: 24px;
  --kx-space-8: 32px;

  --kx-radius-sm: 8px;
  --kx-radius: 12px;      /* Bottoni, input, elementi di controllo */
  --kx-radius-lg: 18px;   /* Card ed elementi di superficie più grandi */
  --kx-radius-full: 9999px;

  /* Elevazioni e ombre (tenui, coerenti con una base chiara) */
  --kx-shadow-sm: 0 1px 2px 0 rgba(34, 38, 27, 0.10);
  --kx-shadow-md: 0 6px 16px -4px rgba(34, 38, 27, 0.16), 0 0 0 1px rgba(34, 38, 27, 0.03);
  --kx-shadow-lg: 0 20px 40px -12px rgba(34, 38, 27, 0.22);
  --kx-glow-primary: 0 0 0 1px rgba(53, 105, 63, 0.30), 0 6px 16px rgba(180, 112, 15, 0.20);

  /* Layout & Navigation */
  --kx-nav-height: 64px;
  --kx-topbar-height: 56px;
  --kx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --kx-safe-top: env(safe-area-inset-top, 0px);

  /* Animazioni */
  --kx-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}