/* ============================================================================
   AVISECO — CLAUDE STYLE (a doua temă, comutabilă peste aviseco-design)
   ----------------------------------------------------------------------------
   Copie 1:1 din skill-ul aviseco-claude-style (assets/aviseco-claude-style-tokens.css, v1.1, 30.09.2026).
   Nu redefinește nicio componentă. Redefinește DOAR tokens-urile de rol pe
   care aviseco-components.css le consumă deja (--avs-bg-app, --avs-text-
   primary etc.), sub selectorii [data-brand="claude"] / [data-brand="claude"]
   [data-theme="dark"]. Restul aplicației (butoane, carduri, tabele) se
   restilează automat, fără nicio modificare de componentă.

   Accentul de brand NU e un hex nou: e familia Sky din aviseco-tokens.css,
   calibrată pe temă (sky-700 în Light, sky-300 în Dark) — ambele deja
   validate acolo ca --avs-text-accent. Contrastele de mai jos sunt calculate
   (formula WCAG de luminanță relativă), nu estimate.

   v1.1 · 30.09.2026 — trei reparații, găsite la instalarea în Portal:
   (1) --avs-bg-subtle era egal cu --avs-bg-surface în ambele moduri, deci tot
       ce stă „subtil" pe un card dispărea (hover de buton ghost/secundar, câmp
       dezactivat, antet de tabel, casete de icon). Acum e tonul fundalului de
       aplicație: warm-25 în Light, warm-950 în Dark.
   (2) Zebra tabelului în Light era warm-50 = culoarea cardului, deci invizibilă.
       Acum e warm-25.
   (3) --avs-action-active nu era redefinit: butonul primar apăsat devenea
       navy-800 în Light și sărea două trepte în Dark. Acum e un pas mai închis
       decât baza, ca în Classic: navy-600 în Light, sky-400 în Dark.
   ============================================================================ */

:root {
  /* Scala de gri caldă — 12 trepte, de la aproape-alb la gri-cărbune cald.
     Generată prin interpolare între ancorele #FAF8F5 (cel mai deschis) și
     #1A1815 (cel mai închis, ales explicit ca "spre negru, dar cald, gen
     Claude.ai" — nu negru pur, nu navy). */
  --avc-warm-25:  #FAF8F5;
  --avc-warm-50:  #EFEDEA;
  --avc-warm-100: #DBD9D6;
  --avc-warm-200: #C0BEBB;
  --avc-warm-300: #A09E9B;
  --avc-warm-400: #7F7D7A;
  --avc-warm-500: #62605D;
  --avc-warm-600: #4B4946;
  --avc-warm-700: #393734;
  --avc-warm-800: #2A2825;
  --avc-warm-900: #201E1B;
  --avc-warm-950: #1A1815;  /* fundalul dark ales explicit de utilizator */
}

/* ============================================================================
   CLAUDE STYLE — LIGHT (implicit, cand [data-brand="claude"] fara data-theme)
   ============================================================================ */
[data-brand="claude"] {
  --avs-bg-app:        var(--avc-warm-25);
  --avs-bg-surface:    var(--avc-warm-50);
  --avs-bg-raised:      #FFFFFF;
  --avs-bg-subtle:     var(--avc-warm-25);    /* tonul fundalului de aplicație: 1.10:1 față de surface, cât navy-50 pe alb în Classic */
  --avs-bg-inverse:    var(--avc-warm-950);

  --avs-text-primary:   var(--avc-warm-900);   /* 15.69:1 pe bg-app */
  --avs-text-secondary: var(--avc-warm-600);   /*  8.46:1 pe bg-app */
  --avs-text-tertiary:  var(--avc-warm-500);   /*  5.91:1 pe bg-app */
  --avs-text-disabled:  var(--avc-warm-300);
  --avs-text-inverse:   var(--avc-warm-25);
  --avs-text-link:      var(--avs-sky-700);    /*  6.50:1 pe bg-app */
  --avs-text-accent:    var(--avs-sky-700);

  --avs-border:        var(--avc-warm-100);
  --avs-border-strong: var(--avc-warm-200);
  --avs-border-focus:  var(--avs-sky-600);

  --avs-action:         var(--avs-sky-700);
  --avs-action-hover:   var(--avs-sky-600);
  --avs-action-active:  var(--avs-navy-600);   /* un pas mai închis decât sky-700; alb pe el: 8.66:1 */
  --avs-action-text:    #FFFFFF;
}

/* ============================================================================
   CLAUDE STYLE — DARK
   ============================================================================ */
[data-brand="claude"][data-theme="dark"] {
  --avs-bg-app:        var(--avc-warm-950);   /* #1A1815 */
  --avs-bg-surface:    var(--avc-warm-900);
  --avs-bg-raised:     var(--avc-warm-800);
  --avs-bg-subtle:     var(--avc-warm-950);   /* tonul fundalului de aplicație: 1.07:1 față de surface */
  --avs-bg-inverse:    var(--avc-warm-25);

  --avs-text-primary:   var(--avc-warm-25);    /* 16.71:1 pe bg-app */
  --avs-text-secondary: var(--avc-warm-200);   /*  9.55:1 pe bg-app */
  --avs-text-tertiary:  var(--avc-warm-300);   /*  6.63:1 pe bg-app */
  --avs-text-disabled:  var(--avc-warm-600);
  --avs-text-inverse:   var(--avc-warm-950);
  --avs-text-link:      var(--avs-sky-300);    /* 10.52:1 pe bg-app */
  --avs-text-accent:    var(--avs-sky-300);

  --avs-border:        var(--avc-warm-700);
  --avs-border-strong: var(--avc-warm-600);
  --avs-border-focus:  var(--avs-sky-400);

  --avs-action:         var(--avs-sky-300);
  --avs-action-hover:   var(--avs-sky-200);
  --avs-action-active:  var(--avs-sky-400);    /* un pas mai închis decât sky-300; warm-950 pe el: 8.12:1 */
  --avs-action-text:    var(--avc-warm-950);
}

/* ============================================================================
   EXCEPȚII DE COMPONENTĂ — necesare, nu opționale
   ----------------------------------------------------------------------------
   aviseco-components.css NU respectă peste tot "regula zero": câteva
   componente sunt legate direct de scala navy/ink brută (var(--avs-navy-700)
   etc.), nu de tokens de rol — deci NU se restilează automat doar prin
   redefinirea tokens-urilor de mai sus. Verificat vizual (Playwright) la
   construirea acestui skill: fără blocul de mai jos, sidebar-ul rămâne navy
   în ambele moduri Claude Style, checkbox-urile, badge-ul implicit, hover-ul
   de tabel, tab-ul activ și tooltip-ul la fel. Astea sunt SINGURELE cazuri
   găsite — restul componentelor chiar respectă tokens de rol și se
   restilează fără nicio linie în plus.
   ============================================================================ */
[data-brand="claude"] .avs-sidebar {
  background: var(--avc-warm-950);   /* siret intotdeauna inchis, ca in original (navy in Classic) */
}
[data-brand="claude"][data-theme="dark"] .avs-sidebar {
  background: var(--avc-warm-950);
  border-right: 1px solid var(--avs-border);
}
[data-brand="claude"] .avs-btn--secondary:hover:not(:disabled) { border-color: var(--avc-warm-300); }
[data-brand="claude"] .avs-input:hover,
[data-brand="claude"] .avs-select:hover,
[data-brand="claude"] .avs-textarea:hover { border-color: var(--avc-warm-300); }
[data-brand="claude"] .avs-check input { accent-color: var(--avs-action); }
/* Zebra, hover si badge-uri implicite: in dark, aviseco-components.css are
   deja variante proprii pe bază de rgba (transparente, deci se adaptează
   corect la ORICE fundal — nu doar navy). Suprascriem doar în Light, ca sa
   nu calcam peste acele reguli deja corecte din dark si sa stricam
   lizibilitatea (verificat — fara acest ":not", textul deschis din dark
   devine aproape invizibil pe fundal warm-50/100, prea deschis).
   Zebra e warm-25, NU warm-50: warm-50 e chiar culoarea cardului (bg-surface),
   deci rândurile pare nu s-ar distinge de cele impare. */
[data-brand="claude"]:not([data-theme="dark"]) .avs-table tbody tr:nth-child(even) td { background: var(--avc-warm-25); }
[data-brand="claude"]:not([data-theme="dark"]) .avs-table tbody tr:hover td { background: var(--avc-warm-100); }
[data-brand="claude"]:not([data-theme="dark"]) .avs-table tfoot td { border-top-color: var(--avs-action); }
[data-brand="claude"]:not([data-theme="dark"]) .avs-badge:not([class*="avs-badge--"]) {
  background: var(--avc-warm-100); color: var(--avc-warm-800);
}
[data-brand="claude"]:not([data-theme="dark"]) .avs-badge--neutral { background: var(--avc-warm-100); color: var(--avc-warm-700); }
[data-brand="claude"][data-theme="dark"] .avs-table tfoot td { border-top-color: var(--avs-sky-400); }
[data-brand="claude"] .avs-tab[aria-selected="true"] { border-bottom-color: var(--avs-action); }
[data-brand="claude"] .avs-toast { background: var(--avc-warm-800); }

/* ============================================================================
   Tranziție lină la comutare (respectă prefers-reduced-motion, ca in
   aviseco-tokens.css)
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html[data-brand] body,
  html[data-brand] .avs-card,
  html[data-brand] .avs-button {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }
}