/**
 * NIXIE Wireframe — Design Tokens (B&W lo-fi)
 *
 * Replica in scala di grigi del design system blendX FE (blendx_theme / blendx_website).
 * Le custom property usano i NOMI REALI (--bx-*) così il reskin a colori = swap dei valori,
 * e il porting su Odoo mantiene la stessa semantica.
 *
 * Mapping colore reale → B&W:
 *   #025159 (primary dark)    → #1a1a1a
 *   #E8F6F7 (primary light)   → #f2f2f2
 *   #18A1AF (secondary)       → #4d4d4d
 *   #00EBAD (accent 1)        → #bfbfbf
 *   #E6FDF7 (accent 1 light)  → #f7f7f7
 *   #491AF3 (accent 2 / AI)   → #2b2b2b
 */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

:root {
  /* ============ Palette runtime blendX (ir.config_parameter blendx_theme.*) ============ */
  --bx-primary-color:        #1a1a1a;
  --bx-primary-color-light:  #f2f2f2;
  --bx-primary-font-color:   #1a1a1a;
  --bx-secondary-color:      #4d4d4d;
  --bx-secondary-font-color: #4d4d4d;
  --bx-accent-1-color:       #bfbfbf;
  --bx-accent-1-color-light: #f7f7f7;
  --bx-accent-2-color:       #2b2b2b;
  --bx-accent-2-color-light: #f4f4f4;
  --bx-smart-color:          #4d4d4d;
  --gradient-color-one:      #1a1a1a;
  --gradient-color-two:      #4d4d4d;
  --neutrals-dark-hover:     #6d6d6d;
  --neutrals-normal:         #b5b5b5;
  --neutrals-light:          #f8f8f8;

  /* Costanti fisse di style.scss (già neutre o rese neutre) */
  --dark-grey:        #757575;
  --light-grey:       #f9f9f9;
  --light-sky-grey:   #e8ebf0;
  --extra-light-grey: #e0e0e0;
  --danger-red:       #8a8a8a;   /* era #FF7A50 — in B&W: grigio + underline */
  --success-green:    #6d6d6d;   /* era verde */

  /* ============ Gradienti pre-composti ============ */
  --btn-gradiant-green: linear-gradient(180deg, var(--gradient-color-one) 0%, var(--gradient-color-two) 100%);
  --btn-gradiant-green-hover: linear-gradient(178.94deg, var(--gradient-color-one) 0.91%, var(--gradient-color-two) 221.82%);
  --header-gradiant: linear-gradient(269.59deg, var(--gradient-color-two) -0.06%, #2e2e2e 58.28%, #232323 74.92%, var(--gradient-color-one) 113.72%);

  /* ============ Font ============ */
  --font-ubuntu: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nunito: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ============ Layout ============ */
  --header-height: 80px;
  --container-max: 1320px;

  /* ============ Radius (scala reale: 8/10/16/20/24/40 + pill 30) ============ */
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 30px;

  /* ============ Ombre (style.scss) ============ */
  --box-shadow: 0 4px 18.7px #00000014;      /* .box_shadow_list */
  --box-shadow-4: 4px 4px 4px #00000040;
  --shadow-soft: 0 2px 8px rgba(0,0,0,.06);

  /* ============ Motion ============ */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-ease: cubic-bezier(.4,0,.2,1);

  /* ============ Z-index ============ */
  --z-header: 100;
  --z-panel: 500;
  --z-modal: 1000;
}

/* Reset minimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-nunito);
  font-size: 16px;
  line-height: 1.5;
  color: var(--bx-primary-font-color);
  background: #ffffff;
}
img, svg { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ============ Tipografia — scala nominale reale blendX ============
   Regola richiesta: Ubuntu per i titoli, Nunito Sans per i testi. */
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-ubuntu); }
.title1 { font-size: 24px; font-weight: 600; }
.title5 { font-size: 20px; font-weight: 700; }
.title6 { font-size: 24px; font-weight: 700; }
.title7 { font-size: 28px; font-weight: 700; }
.body1 { font-size: 16px; font-weight: 600; }
.body2 { font-size: 16px; font-weight: 400; }
.body3 { font-size: 14px; font-weight: 400; }
.body5 { font-size: 36px; font-weight: 700; }
.caption1 { font-size: 13px; font-weight: 600; }
.caption2 { font-size: 13px; font-weight: 400; }
.caption3 { font-size: 12px; font-weight: 400; color: var(--dark-grey); }
.caption4 { font-size: 12px; font-weight: 600; }

/* Scala esplicita .f_s{px}_w_{weight} (subset usato nel wireframe) */
.f_s10_w_700 { font-size: 10px; font-weight: 700; }
.f_s12_w_400 { font-size: 12px; font-weight: 400; }
.f_s12_w_600 { font-size: 12px; font-weight: 600; }
.f_s12_w_700 { font-size: 12px; font-weight: 700; }
.f_s14_w_400 { font-size: 14px; font-weight: 400; }
.f_s14_w_600 { font-size: 14px; font-weight: 600; }
.f_s14_w_700 { font-size: 14px; font-weight: 700; }
.f_s16_w_600 { font-size: 16px; font-weight: 600; }
.f_s16_w_700 { font-size: 16px; font-weight: 700; }
.f_s18_w_700 { font-size: 18px; font-weight: 700; }
.f_s20_w_700 { font-size: 20px; font-weight: 700; }
.f_s24_w_700 { font-size: 24px; font-weight: 700; }
.f_s32_w_700 { font-size: 32px; font-weight: 700; font-family: var(--font-ubuntu); }
.f_s40_w_700 { font-size: 40px; font-weight: 700; font-family: var(--font-ubuntu); }
.ff_ubuntu { font-family: var(--font-ubuntu); }
.ff_nunito { font-family: var(--font-nunito); }
.lh_100 { line-height: 1; }
.lh_120 { line-height: 1.2; }
.lh_150 { line-height: 1.5; }

/* ============ Colori testo/sfondo/bordo (nomi reali) ============ */
.fc_primary_font_color { color: var(--bx-primary-font-color); }
.fc_secondary_font_color { color: var(--bx-secondary-font-color); }
.fc_accent_1_color { color: var(--bx-accent-1-color); }
.fc_dark_grey { color: var(--dark-grey); }
.fc_light_black { color: #272727; }
.fc_white { color: #fff; }
.bg_primary_color { background: var(--bx-primary-color); }
.bg_secondary_color { background: var(--bx-secondary-color); }
.bg_accent_1_color_light { background: var(--bx-accent-1-color-light); }
.bg_light_grey { background: var(--light-grey); }
.bg_light_sky_grey { background: var(--light-sky-grey); }
.border_primary_color { border: 1px solid var(--bx-primary-color); }
.border_secondary_color { border: 1px solid var(--bx-secondary-color); }
.border_color_extra_light_grey { border: 1px solid var(--extra-light-grey); }

/* ============ Raggi / ombre ============ */
.border_radius_8 { border-radius: var(--radius-8); }
.border_radius_10 { border-radius: var(--radius-10); }
.border_radius_16 { border-radius: var(--radius-16); }
.border_radius_20 { border-radius: var(--radius-20); }
.border_radius_pill { border-radius: var(--radius-pill); }
.circular_square { border-radius: 50%; }
.box_shadow_list { box-shadow: var(--box-shadow); }

/* ============ Troncamento (nomi reali, typo incluso) ============ */
.eclispse_custom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.eclipse_line_1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.eclipse_line_2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ============ Helper layout minimi (equivalenti BS usati nei template) ============ */
.d-flex { display: flex; }
.d-none { display: none; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.flex-grow-1 { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.me-2 { margin-right: 8px; } .ms-auto { margin-left: auto; }
.p-3 { padding: 12px; } .p-4 { padding: 16px; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.pointer_cursor { cursor: pointer; }
.position-relative { position: relative; }

.bx_container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* ============ Scrollbar custom (.blendx_scrollbar) ============ */
.blendx_scrollbar { scrollbar-width: thin; scrollbar-color: var(--neutrals-normal) transparent; }
.blendx_scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.blendx_scrollbar::-webkit-scrollbar-thumb { background: var(--neutrals-normal); border-radius: 3px; }
.blendx_scrollbar::-webkit-scrollbar-track { background: transparent; }

/* Wireframe annotation chip (solo per il wireframe, non esiste in blendX) */
.wf_note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #8a8a8a; background: #f4f4f4; border: 1px dashed #c9c9c9;
  border-radius: 4px; padding: 3px 8px;
}