/* BadgeBox v2 — design tokens
 * Mirror of design_handoff_badgebox_v2/src/tokens.jsx
 * Used as CSS custom properties for the whole v2 surface.
 */

:root {
    /* Brand blue — scala ricalibrata su #0080f6 (HSL 209/100/48). Allineata
     * al colore già visibile a video sui macro-icons del rail (risultato della
     * filter chain → ~#0080f6). Single source of truth con primitives. */
    --bbx-blue-50:  #ebf5ff;
    --bbx-blue-100: #cce5ff;
    --bbx-blue-200: #99ccff;
    --bbx-blue-300: #5cb3ff;
    --bbx-blue-400: #2999fa;
    --bbx-blue-500: #0080f6;
    --bbx-blue-600: #0069cc;
    --bbx-blue-700: #0055a3;
    --bbx-blue-800: #003f7a;
    --bbx-blue-900: #002952;

    /* Neutrals (cool tilt) */
    --bbx-gray-0:   #ffffff;
    --bbx-gray-25:  #fbfcfd;
    --bbx-gray-50:  #f6f8fa;
    --bbx-gray-100: #eef1f5;
    --bbx-gray-150: #e4e8ee;
    --bbx-gray-200: #d6dbe3;
    --bbx-gray-300: #b7bfcb;
    --bbx-gray-400: #8b95a4;
    --bbx-gray-500: #616b7b;
    --bbx-gray-600: #434b59;
    --bbx-gray-700: #2f3642;
    --bbx-gray-800: #1f2530;
    --bbx-gray-900: #141920;

    /* Accents */
    --bbx-yellow: #F5B824;
    --bbx-yellow-soft: #FEF3C7;
    --bbx-green: #10A77A;
    --bbx-green-soft: #DCFCE7;
    --bbx-red: #DC2948;
    --bbx-red-soft: #FEE2E2;

    /* Sidebar palette */
    --bbx-sidebar-dark: #0F1A2E;
    --bbx-sidebar-dark-alt: #18243D;
    --bbx-sidebar-dark-text: #B8C2D1;
    --bbx-sidebar-dark-active: #0080f6;

    /* Radii — canonical scale (aligned with style_bbx_primitives.css) */
    --bbx-r-sm: 4px;
    --bbx-r-md: 6px;
    --bbx-r-lg: 8px;
    --bbx-r-xl: 12px;
    --bbx-r-full: 999px;

    /* Shadows */
    --bbx-shadow-sm: 0 1px 2px rgba(15, 26, 46, 0.05);
    --bbx-shadow-md: 0 2px 6px rgba(15, 26, 46, 0.06), 0 1px 2px rgba(15, 26, 46, 0.04);
    --bbx-shadow-lg: 0 8px 24px rgba(15, 26, 46, 0.08), 0 2px 6px rgba(15, 26, 46, 0.04);

    /* Typography */
    --bbx-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bbx-mono: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Alias verso i nomi usati dai CSS dell'app (style_bbx_primitives.css e
     * main-v2.css). Questo set e' piu' piccolo di quello dell'app: finche' le
     * pagine fuori dalla shell caricavano solo i propri file la differenza non
     * si vedeva, ma da quando il popup canonico (main-v2.css) gira anche qui i
     * suoi var() cadevano nel vuoto — e un `border: var(--bbx-input-border)`
     * non risolto vale `border: none`, cioe' campi bianchi su bianco. Stessi
     * valori della sorgente, non varianti. */
    --bbx-input-border: 1px solid var(--bbx-gray-300);
    --bbx-focus-ring: 0 0 0 3px rgba(0, 128, 246, 0.22);
    --bbx-font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
    --bbx-font-mono: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

    /* Layout constants */
    --bbx-sidebar-w: 232px;
    --bbx-sidebar-w-collapsed: 64px;
    --bbx-topbar-h: 56px;

    /* ------------------------------------------------------------------
     * STRATO SEMANTICO — allineato a style_bbx_primitives.css §STRATO
     * SEMANTICO. Serve QUI perche' le pagine di accesso (index, join,
     * reset, attivazione) caricano un set CSS diverso: tokens.css al posto
     * di style_bbx_primitives.css. Senza, `main-v2.css`, `auth.css` e
     * `primitives.css` — che consumano questi token — avrebbero var() non
     * risolte proprio sulla pagina di login: dichiarazione invalida, cioe'
     * fondi trasparenti e bordi spariti, in silenzio.
     * Stessi valori della sorgente, non varianti.
     * ------------------------------------------------------------------ */
    --bbx-surface:        #ffffff;
    --bbx-surface-rgb:    255, 255, 255;
    --bbx-ink-inverse:    #ffffff;
    --bbx-success-ink:    #0a6e52;
    --bbx-warn-ink:       #8a6206;
    --bbx-warn-strong:    #e0a820;
    --bbx-danger-ink:     #9b1c30;
    --bbx-danger-border:  #f5c2c7;
    --bbx-amber-700:      #a97a00;
    --bbx-ai-500:         #7c56d4;
    --bbx-accent-fill:    #0080f6;
    --bbx-accent-hover:   #0069cc;
    --bbx-accent-surface:      #0055a3;
    --bbx-accent-surface-deep: #002952;
    --bbx-color-3-border:      #a8e4c9;
    --bbx-color-5:             #d946a8;
    --bbx-danger-muted-ink:    #a83229;
    --bbx-warn-soft:           #fef5e0;
    /* La ricetta della card: `main-v2.css` la usa anche sul set di accesso,
     * dove finora non era definita — quindi bordo, raggio e ombra erano
     * dichiarazioni invalide e sparivano in silenzio. Stessi valori della
     * sorgente (style_bbx_primitives.css §CARD). */
    --bbx-card-border:  1px solid var(--bbx-gray-200);
    --bbx-card-radius:  var(--bbx-r-lg);
    --bbx-card-shadow:  var(--bbx-shadow-sm);
    --bbx-sheet-radius: 18px;
    --bbx-color-3:        #16a34a;
}


/* ============================================================
 *  TEMA SCURO per il set di accesso
 *
 *  Stesso principio del blocco in style_bbx_primitives.css (la scala dei
 *  grigi si ribalta, i `-soft` diventano fondi scuri e gli `-ink` testi
 *  chiari), ma qui vive a parte perche' le pagine di accesso caricano
 *  tokens.css e NON primitives. I valori sono gli stessi: se si toccano
 *  di la', si toccano anche qui.
 *
 *  L'attributo lo scrive `commons.js` §TEMA, che su queste pagine e'
 *  caricato (verificato su index.php).
 * ============================================================ */
:root[data-bbx-theme-resolved="dark"] {
    color-scheme: dark;

    --bbx-gray-0:   #171e28;
    --bbx-gray-25:  #10151c;
    --bbx-gray-50:  #151b24;
    --bbx-gray-100: #1b2230;
    --bbx-gray-150: #232b3a;
    --bbx-gray-200: #2d3646;
    --bbx-gray-300: #4d5a6e;
    --bbx-gray-400: #8b98ad;
    --bbx-gray-500: #a3aec0;
    --bbx-gray-600: #b4bfcf;
    --bbx-gray-700: #d0d8e3;
    --bbx-gray-800: #e6ecf3;
    --bbx-gray-900: #f3f7fb;

    --bbx-blue-50:  #0f2233;
    --bbx-blue-100: #14304a;
    --bbx-blue-200: #1b4570;
    --bbx-blue-300: #2f74b8;
    --bbx-blue-400: #3f9df2;
    --bbx-blue-500: #2b90f8;
    --bbx-blue-600: #5aaeff;
    --bbx-blue-700: #8ac7ff;
    --bbx-blue-800: #b5dcff;
    --bbx-blue-900: #dcefff;

    --bbx-yellow:      #f5b824;
    --bbx-yellow-soft: #2a2210;
    --bbx-green:       #1cc48f;
    --bbx-green-soft:  #0f2a20;
    --bbx-red:         #f2536b;
    --bbx-red-soft:    #2e1418;

    --bbx-surface:       #171e28;
    --bbx-surface-rgb:   23, 30, 40;
    /* --bbx-ink-inverse resta bianco: e' il testo DENTRO un bottone blu */
    --bbx-success-ink:   #5ed0a0;
    --bbx-warn-ink:      #f0c164;
    --bbx-warn-strong:   #ffc94a;
    --bbx-danger-ink:    #f08a92;
    --bbx-danger-border: #5c2028;
    --bbx-amber-700:     #e0aa3c;
    --bbx-ai-500:        #9b79ea;
    --bbx-accent-fill:   #1272d0;
    --bbx-accent-hover:  #1268c4;
    --bbx-accent-surface:      #0a4478;
    --bbx-accent-surface-deep: #06294b;
    --bbx-color-3-border:      #2a5c46;
    --bbx-color-5:             #e05fbc;
    --bbx-danger-muted-ink:    #ec8b84;
    --bbx-warn-soft:           #2a2210;
    --bbx-color-3:       #22b866;

    --bbx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --bbx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --bbx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --bbx-focus-ring: 0 0 0 3px rgba(63, 157, 242, 0.38);
}

@media (prefers-color-scheme: dark) {
    :root[data-bbx-theme="system"]:not([data-bbx-theme-resolved="light"]) {
        color-scheme: dark;
        --bbx-gray-0:   #171e28;
        --bbx-surface:  #171e28;
        --bbx-gray-800: #e6ecf3;
    }
}