/* Tokens de diseño: fuente única de las variables CSS, compartida por todas las páginas.
   Colores con light-dark(): un valor por modo según color-scheme (html.light / html.dark lo fijan; sin clase sigue al sistema). */

/* Fallback con las métricas de DM Sans: mientras llega la fuente (display=swap) el texto ocupa casi lo mismo
   y el cambio no recoloca el layout (medido: DM Sans ≈ 1,04× Arial a 400 y 1,01× a 600). */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 103%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%;
}


:root {
  color-scheme: light dark;

  /* Palette */
  --bg:        light-dark(#f4f4f2, #141414);
  --surface:   light-dark(#ffffff, #202020);
  --surface-2: light-dark(#f0f0ee, #292929);
  --border:    light-dark(#e2e2e0, #2e2e2e);
  --text:      light-dark(#111111, #f0f0f0);
  --text-2:    light-dark(#4f4f4f, #b4b4b4);
  --text-3:    light-dark(#6b6b6b, #909090);
  --accent:    light-dark(#2457f5, #4f80ff);   /* texto, enlaces y foco (AA sobre bg) */
  --accent-solid: light-dark(#2457f5, #3d6df0); /* fondos con texto blanco (CTA) */
  --accent-fg: #ffffff;

  --accent-tint:        color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-tint-border: color-mix(in srgb, var(--accent) 22%, transparent);

  /* 3D (botones pushable) */
  --edge:        light-dark(#cdcdc8, #0b0b0b);
  --edge-accent: light-dark(#1a3fb5, #2b4fb3);
  --push-shadow: light-dark(rgba(0,0,0,.20), rgba(0,0,0,.55));
  --brand-tint:  10%;   /* intensidad del color de marca al hover */
  --brand-tap:   13%;   /* intensidad en tap-to-confirm */

  /* Typography */
  --font:      'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;

  /* Type scale (documented — apply progressively to components) */
  --text-base:  0.9rem;
  --text-sm:    0.82rem;
  --text-xs:    0.72rem;
  --text-2xs:   0.65rem;
  --text-label: 0.7rem;

  /* Border radius scale */
  --r:     10px;  /* primary cards, link buttons */
  --r-xs:   6px;  /* badges, focus rings */
  --r-sm:   8px;  /* secondary buttons, back-nav, nav-btn (navbar + carril) */
  --r-lg:  14px;  /* avatar bubble, CTA section */
  --r-xl:  17px;  /* pill shapes, decorative elements */

  /* Spacing grid (4px base) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --tap-target: 44px;

  /* Layout (page-specific --max is set inline per page) */

  /* Noise texture */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

html.light { color-scheme: light; }

/* Solo lo que no es un color: ruido e intensidad de tinte */
html.dark {
  color-scheme: dark;
  --brand-tint: 14%;
  --brand-tap:  16%;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --brand-tint: 14%;
    --brand-tap:  16%;
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  }
}

/* FALLBACK: navegadores sin light-dark() (Safari < 17.5, Chrome < 123)
   Las custom properties no fallan al parsear: sin este bloque, var(--bg) sería
   inválido en uso y toda la paleta desaparecería. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f0f0ee; --border: #e2e2e0;
    --text: #111111; --text-2: #4f4f4f; --text-3: #6b6b6b;
    --accent: #2457f5; --accent-solid: #2457f5;
    --accent-tint: rgba(36,87,245,.10); --accent-tint-border: rgba(36,87,245,.22);
    --edge: #cdcdc8; --edge-accent: #1a3fb5; --push-shadow: rgba(0,0,0,.20);
  }
  html.dark {
    --bg: #141414; --surface: #202020; --surface-2: #292929; --border: #2e2e2e;
    --text: #f0f0f0; --text-2: #b4b4b4; --text-3: #909090;
    --accent: #4f80ff; --accent-solid: #3d6df0;
    --accent-tint: rgba(79,128,255,.10); --accent-tint-border: rgba(79,128,255,.22);
    --edge: #0b0b0b; --edge-accent: #2b4fb3; --push-shadow: rgba(0,0,0,.55);
  }
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --bg: #141414; --surface: #202020; --surface-2: #292929; --border: #2e2e2e;
      --text: #f0f0f0; --text-2: #b4b4b4; --text-3: #909090;
      --accent: #4f80ff; --accent-solid: #3d6df0;
      --accent-tint: rgba(79,128,255,.10); --accent-tint-border: rgba(79,128,255,.22);
      --edge: #0b0b0b; --edge-accent: #2b4fb3; --push-shadow: rgba(0,0,0,.55);
    }
  }
}