:root {
  --ink: #1A1917;
  --ink-2: #4A473F;
  --ink-3: #6E6B63;
  --rule: #D8D5CC;
  --rule-soft: #EFEDE6;
  --paper: #FFFFFF;
  --paper-2: #F4F3EF;
  --cyan: #29ABE2;
  --cyan-ink: #0B6D93;
  --magenta: #C8106F;
  --mod: #C8106F;
  --merma: #B4430E;
  --cancel: #7A766C;
  --amarillo: #D9A408;
  --azul: #3C6FD6;
  --blanco: #FFFFFF;
  --verde: #2E8B57;
  --morado: #7E5CE6;
  --gris-pago: #C9C5BC;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --disp: 'IBM Plex Sans', system-ui, sans-serif;
}

:root[data-tema="oscuro"] {
  --ink: #EDEBE4;
  --ink-2: #C5C0B4;
  --ink-3: #9B968A;
  --rule: #3B3931;
  --rule-soft: #2B2A25;
  --paper: #21201B;
  --paper-2: #171613;
  --cyan: #4FC3F0;
  --cyan-ink: #93DCFB;
  --magenta: #FF6BAE;
  --mod: #FF6BAE;
  --merma: #FF9560;
  --cancel: #8E8A7E;
  --amarillo: #E8BC42;
  --azul: #85A9F7;
  --blanco: #2E2C26;
  --verde: #6ACB94;
  --morado: #AE94FF;
  --gris-pago: #56524A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) {
    --ink: #EDEBE4;
    --ink-2: #C5C0B4;
    --ink-3: #9B968A;
    --rule: #3B3931;
    --rule-soft: #2B2A25;
    --paper: #21201B;
    --paper-2: #171613;
    --cyan: #4FC3F0;
    --cyan-ink: #93DCFB;
    --magenta: #FF6BAE;
    --mod: #FF6BAE;
    --merma: #FF9560;
    --cancel: #8E8A7E;
    --amarillo: #E8BC42;
    --azul: #85A9F7;
    --blanco: #2E2C26;
    --verde: #6ACB94;
    --morado: #AE94FF;
    --gris-pago: #56524A;
  }
}

html { font-size: 13px; }
html[data-fuente="grande"] { font-size: 15px; }
html[data-fuente="extragrande"] { font-size: 17px; }