/* RB Componentes — brand palette + type. Static asset, served per domain at
 * /static/theme.css (fonts at /static/fonts/). One seed (the brand color);
 * hover/muted/selected DERIVE from it via color-mix. `:root:root` (specificity 0,2,0)
 * so the brand always wins over the base skin regardless of injection order. */

/* Montserrat — the client's corporate typeface. Self-hosted variable font (one woff2
 * per subset covers 100–900), so no external dependency. woff2 downloaded from Google
 * Fonts v31. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root:root {
  /* Brand typeface (html reads --sui-font-sans). */
  --sui-font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --sui-color-accent: #a6201f;
  --sui-color-accent-hover: color-mix(in srgb, var(--sui-color-accent) 85%, black);
  /* Tints mix with the PAGE background, not with white: on the light theme that is
     white anyway; on the dark one a white-mixed tint was a pale pink slab. */
  --sui-color-accent-muted: color-mix(in srgb, var(--sui-color-accent) 12%, var(--sui-color-bg));
  --sui-color-focus-ring: var(--sui-color-accent);
  --sui-color-item-selected-bg: color-mix(in srgb, var(--sui-color-accent) 10%, var(--sui-color-bg));
  --sui-color-item-selected-fg: var(--sui-color-accent-hover);
  --sui-color-row-selected-bg: color-mix(in srgb, var(--sui-color-accent) 16%, var(--sui-color-bg));

  /* RB brand casing: UPPERCASE section headings + button labels. Content stays in
     natural case (readable, translatable); the display casing is this style seam. */
  --sui-btn-transform: uppercase;
  --app-heading-transform: uppercase;
}

/* Dark theme (OS preference by default, `data-theme` as the override — sorolla's
 * convention). RB's red is a SURFACE color on dark: buttons and bands keep it, but as
 * ink (headings, prices, links, selected edges) it sinks into gray-12 — the ink goes
 * white (M, 2026-08-23: "casi todo el rojo debería ser blanco"). The hover on a
 * surface lightens instead of darkening, for the same reason. */
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme='light']) {
    --app-ink-accent: var(--sui-color-fg);
    --sui-color-accent-hover: color-mix(in srgb, var(--sui-color-accent) 85%, white);
    --sui-color-item-selected-fg: var(--sui-color-fg);
    --sui-color-focus-ring: var(--sui-color-fg);
  }
}
:root:root[data-theme='dark'] {
  --app-ink-accent: var(--sui-color-fg);
  --sui-color-accent-hover: color-mix(in srgb, var(--sui-color-accent) 85%, white);
  --sui-color-item-selected-fg: var(--sui-color-fg);
  --sui-color-focus-ring: var(--sui-color-fg);
}