/* =============================================================
   DIGITA11Y — Sistema di colori
   Struttura:
   1. Scala cromatica (valori fissi)
   2. Variabili semantiche (light — default)
   3. Variabili semantiche (dark — prefers-color-scheme)
   4. Variabili semantiche (forced colors / high contrast)
   5. Utility classes
   ============================================================= */


/* -------------------------------------------------------------
   1. SCALA CROMATICA
   Valori fissi, mai usati direttamente nell'UI.
   Usare sempre le variabili semantiche sotto.
   ------------------------------------------------------------- */
:root {
  --blu-50:  #ebebfa;
  --blu-200: #a6a6ef;
  --blu-500: #3e3ede;
  --blu-600: #3838ca;
  --blu-700: #2c2c9e;
  --blu-800: #22227a;
  --blu-900: #1c1c64;

  --grigio-100: #f5f5f5;
  --grigio-400: #989898;
  --grigio-600: #666666;
  --grigio-900: #1a1a1a;

  --bianco: #ffffff;
  --nero:   #000000;
}


/* -------------------------------------------------------------
   2. VARIABILI SEMANTICHE — Light (default)
   ------------------------------------------------------------- */
:root {
  /* Brand */
  --color-brand:        var(--blu-500);
  --color-brand-hover:  var(--blu-600);
  --color-brand-dark:   var(--blu-800);

  /* Superficie */
  --color-bg:           var(--bianco);
  --color-bg-subtle:    var(--grigio-100);
  --color-bg-inverse:   var(--blu-800);

  /* Testo */
  --color-text:         var(--grigio-900);
  --color-text-subtle:  var(--grigio-600);
  --color-text-inverse: var(--bianco);
  --color-text-link:    var(--blu-500);

  /* Bordi */
  --color-border:       var(--grigio-400);
  --color-border-focus: var(--blu-500);

  /* Componenti ricorrenti */
  --color-header-bg:    var(--bianco);
  --color-footer-bg:    var(--blu-800);
  --color-footer-text:  var(--bianco);
  --color-nav-link:     var(--blu-500);

  /* Sezioni di pagina (.bg-a … .bg-f) */
  --color-section-a:    var(--blu-500);
  --color-section-b:    var(--blu-600);
  --color-section-c:    var(--blu-700);
  --color-section-d:    var(--blu-800);
  --color-section-e:    var(--blu-700);
  --color-section-f:    var(--blu-600);
}


/* -------------------------------------------------------------
   3. VARIABILI SEMANTICHE — Dark
   Solo le variabili che cambiano significato in dark mode.
   ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Brand — scala leggermente più luminosa per contrasto su scuro */
    --color-brand:        #5a5af0;
    --color-brand-hover:  #6b6bff;
    --color-brand-dark:   #b3b3ff;

    /* Superficie */
    --color-bg:           #121212;
    --color-bg-subtle:    #1e1e1e;
    --color-bg-inverse:   #000000;

    /* Testo */
    --color-text:         #f0f0f0;
    --color-text-subtle:  #c2c2c2;
    --color-text-inverse: #121212;
    --color-text-link:    #8c8cff;

    /* Bordi */
    --color-border:       #555555;
    --color-border-focus: #8c8cff;

    /* Componenti */
    --color-header-bg:    #000000;
    --color-footer-bg:    #141414;
    --color-footer-text:  #f0f0f0;
    --color-nav-link:     #f0f0f0;

    /* Sezioni di pagina — si scuriscono progressivamente */
    --color-section-a:    #3838ca;
    --color-section-b:    #2c2c9e;
    --color-section-c:    #22227a;
    --color-section-d:    #1c1c64;
    --color-section-e:    #151530;
    --color-section-f:    #000000;
  }
}


/* -------------------------------------------------------------
   4. VARIABILI SEMANTICHE — Forced colors / High contrast
   I colori di sistema sovrascrivono tutto. Usiamo le keyword
   CSS standard: Canvas, CanvasText, ButtonText, Highlight,
   HighlightText, LinkText, GrayText.
   ------------------------------------------------------------- */
@media (forced-colors: active) {
  :root {
    --color-brand:        LinkText;
    --color-brand-hover:  LinkText;
    --color-brand-dark:   LinkText;

    --color-bg:           Canvas;
    --color-bg-subtle:    Canvas;
    --color-bg-inverse:   Canvas;

    --color-text:         CanvasText;
    --color-text-subtle:  GrayText;
    --color-text-inverse: Canvas;
    --color-text-link:    LinkText;

    --color-border:       ButtonText;
    --color-border-focus: Highlight;

    --color-header-bg:    Canvas;
    --color-footer-bg:    Canvas;
    --color-footer-text:  CanvasText;
    --color-nav-link:     LinkText;

    --color-section-a:    Canvas;
    --color-section-b:    Canvas;
    --color-section-c:    Canvas;
    --color-section-d:    Canvas;
    --color-section-e:    Canvas;
    --color-section-f:    Canvas;
  }

  /* Bordi sempre visibili in high contrast */
  .bg-a, .bg-b, .bg-c, .bg-d, .bg-e, .bg-f,
  .bg-blu-50, .bg-blu-200, .bg-blu-500,
  .bg-blu-600, .bg-blu-700, .bg-blu-800 {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

  :focus,
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 4px;
  }
}


/* -------------------------------------------------------------
   5. UTILITY CLASSES
   Usano le variabili semantiche dove ha senso,
   la scala cromatica per le classi numeriche precise.
   ------------------------------------------------------------- */

/* Scala blu */
.bg-blu-50    { background-color: var(--blu-50); }
.bg-blu-200   { background-color: var(--blu-200); }
.bg-blu-500   { background-color: var(--blu-500); }
.bg-blu-600   { background-color: var(--blu-600); }
.bg-blu-700   { background-color: var(--blu-700); }
.bg-blu-800   { background-color: var(--blu-800); }

.text-blu-50  { color: var(--blu-50); }
.text-blu-200 { color: var(--blu-200); }
.text-blu-500 { color: var(--blu-500); }
.text-blu-600 { color: var(--blu-600); }
.text-blu-700 { color: var(--blu-700); }
.text-blu-800 { color: var(--blu-800); }

.border-blu-50  { border-color: var(--blu-50); }
.border-blu-200 { border-color: var(--blu-200); }
.border-blu-500 { border-color: var(--blu-500); }
.border-blu-600 { border-color: var(--blu-600); }
.border-blu-700 { border-color: var(--blu-700); }
.border-blu-800 { border-color: var(--blu-800); }

/* Grigi */
.bg-grigio-400   { background-color: var(--grigio-400); }
.bg-grigio-600   { background-color: var(--grigio-600); }
.bg-grigio-900   { background-color: var(--grigio-900); }
.bg-bianco       { background-color: var(--bianco); }
.bg-nero         { background-color: var(--nero); }

.text-grigio-400 { color: var(--grigio-400); }
.text-grigio-600 { color: var(--grigio-600); }
.text-grigio-900 { color: var(--grigio-900); }
.text-bianco     { color: var(--bianco); }
.text-nero       { color: var(--nero); }

/* Sezioni semantiche */
.bg-a { background-color: var(--color-section-a) !important; }
.bg-b { background-color: var(--color-section-b) !important; }
.bg-c { background-color: var(--color-section-c) !important; }
.bg-d { background-color: var(--color-section-d) !important; }
.bg-e { background-color: var(--color-section-e) !important; }
.bg-f { background-color: var(--color-section-f) !important; }

/* Primary alias */
.bg-primary     { background-color: var(--color-brand) !important; }
.text-primary   { color: var(--color-brand); }
.border-primary { border-color: var(--color-brand); }

.bg-primary:hover  { background-color: var(--color-brand-hover); }
.text-primary:hover { color: var(--color-brand-hover); }