:root {

  /* =========================
     PALETA BASE
  ========================= */

  --white: #ffffff;
  --black: #000000;

  --gray-100: #f6f6f6;
  --gray-150: #eeeeee;
  --gray-200: #ebebeb;
  --gray-220: #eaeaea;
  --gray-230: #e8e8e8;
  --gray-250: #e6e6e6;
  --gray-300: #e1e1e1;
  --gray-350: #dddddd;
  --gray-400: #d0d0d0;
  --gray-500: #c5c2c2;
  --gray-600: #b9b9b9;
  --gray-700: #a8a8a8;
  --gray-800: #979797;
  --gray-850: #6b7280;
  --gray-860: #6b6b6b;
  --gray-870: #616161;
  --gray-900: #555555;
  --gray-920: #505050;
  --gray-950: #3d3c3c;

  --dark-100: #252f38;
  --dark-800: #1a1f25;
  --dark-900: #111419;
  --dark-950: #0f1216;

  /* rojos */
  --red-500: #f13737;
  --red-600: #ff8c8c;
  --red-650: #ff4a4a;
  --red-700: #ff6b6b;
  --red-750: #e7000b;
  --red-soft: #f3b5b5;

  /* azules */
  --blue-300: #90adfd;
  --blue-500: #587ee1;
  --blue-600: #4d70d3;
  --blue-700: #2f57c9;
  --blue-750: #7da2ff;
  --blue-soft: #bfd0ff;

  /* azules CARBROKER*/
  --blue-carbroker-300: #90adfd;
  --blue-carbroker-500: #587ee1;
  --blue-carbroker-600: #122039;
  --blue-carbroker-700: #2f57c9;
  --blue-carbroker-750: #7da2ff;
  --blue-carbroker-soft: #bfd0ff;

  /* orange CARBROKER*/
  --orange-carbroker: #ee8031;
  --orange-carbroker-light: #f1e3d9f7;
  --orange-carbroker-soft: #e99050f7;

  /* verdes */
  --green-500: #35a635;
  --green-600: #25d366;
  --green-700: #1a9a49;
  --green-750: #52de7e;
  --green-800: #187618;
  --green-soft: #b9ebc8;

  /* negros / copper / gold opcionales */
  --gold-500: #c07a00;
  --gold-600: #cc7a16;
  --gold-650: #db9c16;
  --gold-700: #eb9500;
  --gold-750: #ff8c00;
  --gold-soft: #dbbf8f;

  --yellow-400: #f9f954;
  --yellow-600: #cbcb3e;

  /* =========================
     ALPHAS
  ========================= */

  --alpha-black-0: rgba(0,0,0,0);
  --alpha-black-015: rgba(0,0,0,0.015);
  --alpha-black-04: rgba(0,0,0,0.04);

  --alpha-white-02: rgba(255,255,255,0.02);
  --alpha-white-06: rgba(255,255,255,0.06);
  --alpha-white-07: rgba(255,255,255,0.07);
  --alpha-white-30: rgba(255,255,255,0.3);
  --alpha-white-69: #ffffff69;
  --alpha-white-92: rgba(255,255,255,0.92);

  --alpha-shadow-10: rgba(0,0,0,0.1);
  --alpha-shadow-12: rgba(0,0,0,0.12);
  --alpha-shadow-15: rgba(0,0,0,0.15);
  --alpha-shadow-16: rgba(0,0,0,0.16);
  --alpha-shadow-45: rgba(0,0,0,0.45);

  --alpha-field-border: rgba(17,24,39,.21);
  --alpha-field-focus-border: rgba(199,0,0,.55);
  --alpha-field-focus-shadow: rgba(199,0,0,.18);

  /* =========================
     TEMA ACTIVO
     cambia solo estas 5 variables
  ========================= */

  --theme-primary: var(--blue-carbroker-600);
  --theme-primary-light: var(--blue-carbroker-650);
  --theme-primary-strong: var(--blue-carbroker-750);
  --theme-primary-soft: var(--blue-carbroker-soft);
  --theme-secondary: var(--orange-carbroker);
  --theme-secondary-soft: var(--orange-carbroker-soft);
  --theme-secondary-light: var(--orange-carbroker-light);

  /* =========================
     BRAND
  ========================= */

  --brand-primary: var(--theme-primary);
  --brand-primary-light: var(--theme-primary-light);
  --brand-primary-strong: var(--theme-secondary);
  --brand-primary-soft: var(--theme-primary-soft);
  --brand-secondary: var(--theme-secondary);

  /* =========================
     TEXT
  ========================= */

  --text-main: var(--gray-950);
  --text-body: var(--gray-920);
  --text-soft: var(--gray-900);
  --text-muted: var(--gray-860);
  --text-label: var(--gray-850);
  --text-white: var(--white);
  --text-black: var(--black);
  --text-link-muted: var(--gray-870);
  --text-strike: var(--gray-220);
  --text-blockquote: var(--dark-100);
  --text-field: var(--gray-850);

  /* =========================
     PAGE BG
  ========================= */

  --page-bg-top: var(--gray-100);
  --page-bg-middle: var(--gray-150);
  --page-bg-bottom: var(--gray-250);
  --page-bg-radial-overlay: var(--alpha-black-04);
  --page-bg-line-overlay: var(--alpha-black-015);

  /* =========================
     SURFACES
  ========================= */

  --surface-white: var(--white);
  --surface-black: var(--black);
  --surface-dark-1: var(--dark-800);
  --surface-dark-2: var(--dark-900);
  --surface-dark-3: var(--dark-950);
  --surface-gray-1: var(--gray-300);
  --surface-gray-2: var(--gray-400);
  --surface-gray-3: var(--gray-500);
  --surface-gray-4: var(--gray-800);
  --surface-border-soft: var(--gray-200);
  --surface-border-soft-2: var(--gray-230);
  --surface-border-image: var(--gray-600);
  --surface-border-tab: var(--gray-350);

  /* =========================
     SHADOWS
  ========================= */

  --card-auto-bg: var(--gray-300);
  --shadow-card: 0 2px 5px 0 var(--alpha-shadow-16), 0 2px 10px 0 var(--alpha-shadow-12);
  --shadow-card-hover: 0 12px 28px var(--alpha-shadow-45);
  --shadow-button-hover: 0 5px 11px 0 var(--alpha-shadow-10), 0 4px 15px 0 var(--alpha-shadow-10);
  --shadow-pill: 0 6px 12px var(--alpha-shadow-15);

  /* =========================
     FOCUS
  ========================= */

  --field-border: var(--alpha-field-border);
  --field-focus-border: var(--alpha-field-focus-border);
  --field-focus-shadow: var(--alpha-field-focus-shadow);

  /* =========================
     HEADER / TITLES
  ========================= */

  --ficha-title-color: var(--black);
  --ficha-subtitle-accent: var(--theme-secondary);
  --ficha-heading-color: var(--text-main);
  --ficha-meta-color: var(--text-soft);

  /* =========================
     FORM
  ========================= */

  --ficha-form-icon-color: var(--theme-secondary-soft);
  --ficha-form-bg-top: var(--alpha-white-07);
  --ficha-form-bg-mid: var(--alpha-white-02);
  --ficha-form-bg-end: var(--alpha-black-0);
  --ficha-form-bg-dark-top: var(--surface-dark-1);
  --ficha-form-bg-dark-bottom: var(--surface-dark-2);

  /* =========================
     BUTTONS
  ========================= */

  --btn-primary-text: var(--text-white);
  --btn-primary-bg-top: var(--theme-secondary-soft);
  --btn-primary-bg-bottom: var(--theme-secondary);
  --btn-primary-bg-hover-top: var(--theme-secondary);
  --btn-primary-bg-hover-bottom: var(--theme-secondary-soft);

  --btn-whatsapp-text: var(--text-white);
  --btn-whatsapp-bg-top: var(--green-600);
  --btn-whatsapp-bg-bottom: var(--green-700);
  --btn-whatsapp-bg-hover-top: var(--green-700);
  --btn-whatsapp-bg-hover-bottom: var(--green-600);

  --btn-alt-bg-top: var(--blue-300);
  --btn-alt-bg-bottom: var(--blue-600);
  --btn-alt-bg-hover-top: var(--blue-600);
  --btn-alt-bg-hover-bottom: var(--blue-300);

  /* =========================
     PRICE BOX
  ========================= */

  --ficha-pricebox-bg-top: var(--gray-950);
  --ficha-pricebox-bg-bottom: var(--gray-850);
  --ficha-price-text: var(--text-white);
  --ficha-price-old-text: var(--text-strike);
  --ficha-bono-text: var(--text-white);
  --ficha-bono-legend: var(--text-strike);

  /* =========================
     TABS
  ========================= */

  --ficha-tabs-bg: var(--surface-gray-4);
  --ficha-tabs-hover-bg: var(--surface-gray-3);
  --ficha-tabs-active-bg: var(--surface-gray-2);
  --ficha-tabs-text: var(--ficha-subtitle-accent);
  --ficha-tab-content-bg: var(--surface-white);
  --ficha-tab-content-border: var(--surface-border-soft);

  /* =========================
     SIMILARES
  ========================= */

  --similares-bg-top-overlay: var(--alpha-white-06);
  --similares-bg-mid-overlay: var(--alpha-white-02);
  --similares-bg-end-overlay: var(--alpha-black-0);
  --similares-bg-top: var(--surface-dark-1);
  --similares-bg-bottom: var(--surface-dark-3);
  --similares-border-top: var(--brand-primary);
  --similares-title-color: var(--text-white);

  /* =========================
     BADGES
  ========================= */

  --badge-virtual-top: var(--green-500);
  --badge-virtual-bottom: var(--green-800);
  --badge-virtual-text: var(--white);

  --badge-nuevo-top: var(--yellow-400);
  --badge-nuevo-bottom: var(--yellow-600);
  --badge-nuevo-text: var(--black);

  --badge-vendido-top: var(--red-500);
  --badge-vendido-bottom: var(--red-600);
  --badge-vendido-text: var(--white);

  --badge-atributo-top: var(--blue-500);
  --badge-atributo-bottom: var(--blue-700);
  --badge-atributo-text: var(--white);

  --badge-destacado-border: var(--brand-primary);
  --badge-destacado-bg: var(--brand-primary);
  --badge-destacado-text: var(--white);

  /* =========================
     CARRUSEL
  ========================= */

  --carousel-bg: var(--surface-black);
  --carousel-arrow: var(--alpha-white-69);

  /* =========================
     NAV / HEADER
  ========================= */

  --header-topbar-bg-top: var(--brand-primary-light);
  --header-topbar-bg-bottom: var(--brand-primary);
  --header-topbar-text: var(--text-white);
  --header-navbar-border: transparent;
  --header-navbar-text: var(--text-white);
  --header-navbar-hover: var(--surface-gray-4);
  --header-navbar-mobile-bg: var(--surface-black);
  --header-toggle-bg: var(--brand-primary-strong);
}