/* Prothesio: tokens de la web, copiados de frontend/src/styles/ds.css (acento "horno").
   Mismos canales RGB que la app para que web y producto se vean como uno. Si cambia ds.css, cambiar aquí. */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  --ds-canvas: 236 237 239;
  --ds-surface: 255 255 255;
  --ds-surface-subtle: 246 246 247;
  --ds-ink: 17 18 20;
  --ds-ink-muted: 102 107 115;
  --ds-ink-faint: 150 155 162;
  --ds-line: 226 227 230;
  --ds-line-strong: 206 208 212;
  --ds-brand: 232 89 12;
  --ds-brand-hover: 199 72 4;
  --ds-brand-soft: 253 236 224;
  --ds-on-brand: 255 255 255;
  --ds-ok: 21 128 61;
  --ds-ok-soft: 220 244 228;
  /* Texto verde sobre ok-soft: el --ds-ok de la app da 4,3:1 ahí; este tono da 6,2:1 */
  --ds-ok-ink: 22 101 52;
  --ds-alert: 205 32 38;
  --ds-warn: 161 98 7;

  /* Banda oscura (seguridad): carbón en claro, superficie elevada en oscuro */
  --band-bg: 17 18 20;
  --band-ink: 238 239 241;
  --band-muted: 160 164 171;
  --band-line: 52 54 58;

  /* Botón principal: el naranja de la app con texto blanco da 3,6:1; aquí se usa el tono hover (4,8:1).
     En oscuro, texto oscuro sobre naranja (6,8:1). */
  --cta-bg: var(--ds-brand-hover);
  --cta-bg-hover: 168 60 3;
  --cta-ink: 255 255 255;

  --font-display: "Urbanist", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-num: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-control: 10px;
  --radius-card: 18px;

  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --content-max: 1200px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-canvas: 12 13 14;
    --ds-surface: 24 25 27;
    --ds-surface-subtle: 33 34 37;
    --ds-ink: 238 239 241;
    --ds-ink-muted: 160 164 171;
    --ds-ink-faint: 112 116 123;
    --ds-line: 42 44 48;
    --ds-line-strong: 60 63 68;
    --ds-brand: 251 115 33;
    --ds-brand-hover: 253 140 70;
    --ds-brand-soft: 64 32 14;
    --ds-ok: 74 222 128;
    --ds-ok-soft: 16 52 30;
    --ds-ok-ink: var(--ds-ok);
    --ds-alert: 248 113 113;
    --band-bg: 24 25 27;
    --ds-warn: 250 204 21;
    --cta-bg: var(--ds-brand);
    --cta-bg-hover: var(--ds-brand-hover);
    --cta-ink: 17 18 20;
  }
}