@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root {
  --scalar-font: 'Libre Franklin', system-ui, sans-serif;
}

.light-mode {
  --scalar-color-accent: #007A54;
  --scalar-background-1: #FFFFFF;
  --scalar-background-2: #F4F6F7;
  --scalar-background-3: #E9EDEF;
  --scalar-border-color: #D8DDE3;
  --scalar-color-1: #13201D;
  --scalar-color-2: #4A5652;
  --scalar-color-3: #6B7773;
  /* Scalar deja links, menú y botón del header en negro en modo claro: se pasan al verde de marca */
  --scalar-link-color: #007A54;
  --scalar-link-color-hover: #005C3F;
  --scalar-sidebar-color-active: #007A54;
  --scalar-sidebar-item-active-background: #E6F2ED;
  --scalar-sidebar-indent-border-active: #007A54;
  --scalar-button-1: #007A54;
  --scalar-button-1-color: #FFFFFF;
  --scalar-button-1-hover: #005C3F;
}

.dark-mode {
  --scalar-color-accent: #00BE81;
  --scalar-background-1: #0E1B18;
  --scalar-background-2: #172623;
  --scalar-background-3: #20302C;
  --scalar-border-color: #2A3B37;
  --scalar-color-1: #F2F5F4;
  --scalar-color-2: #B9C4C0;
  --scalar-color-3: #8A9692;
}

/* La grilla de <scalar-grid> trae las columnas como estilo inline y no colapsa en el teléfono.
   Clase interna de Scalar: revisar en cada upgrade. */
@media (max-width: 720px) {
  .t-editor__grid-element { grid-template-columns: 1fr !important; }
}