/* U.A Auto Tallers: colores, letras, espacios y movimiento. Para cambiar un color, se cambia aquí. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Color: el fondo casi negro cálido, el blanco roto y un solo rojo, el del logo */
  --color-paper: oklch(13% 0.01 60);
  --color-paper-2: oklch(17% 0.011 60);
  --color-paper-3: oklch(21.5% 0.012 60);
  --color-ink: oklch(95% 0.014 85);
  --color-ink-2: oklch(85% 0.012 80);
  --color-muted: oklch(70% 0.014 70);
  --color-rule: oklch(30% 0.012 60);
  --color-rule-2: oklch(41% 0.014 62);
  --color-accent: oklch(56% 0.228 28);
  --color-accent-deep: oklch(49% 0.205 28);
  --color-accent-text: oklch(64% 0.218 28);
  --color-accent-ink: oklch(98.5% 0.004 90);
  --color-focus: oklch(70% 0.2 30);
  --color-error: oklch(75% 0.15 30);
  --color-success: oklch(80% 0.13 150);
  --color-smoke: oklch(92% 0.006 80);

  /* Letras: Barlow nació de las matrículas y las señales de carretera */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", ui-sans-serif, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --text-title: clamp(1.625rem, 1.32rem + 1.1vw, 2.25rem);
  --text-figure: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  --text-section: clamp(3rem, 1.95rem + 4.4vw, 5.75rem);
  --text-display: clamp(4.75rem, 2.4rem + 12.5vw, 10rem);
  --display-weight: 700;
  --tracking-display: 0;
  --lh-display: 0.92;

  /* Espacios */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* Retícula */
  --container: 1440px;
  --gutter: max(16px, env(safe-area-inset-left));
  --gap-columns: 16px;
  --section-gap: 88px;
  --section-gap-l: 112px;
  --nav-h: 64px;
  --dock-h: 64px;

  /* Superficies: esquinas rectas, líneas finas, sin sombras */
  --radius: 0;
  --rule-hair: 1px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-reveal: 950ms;

  /* Capas */
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
}

@media (min-width: 40rem) {
  :root { --gutter: max(24px, env(safe-area-inset-left)); --gap-columns: 24px; --section-gap: 112px; --section-gap-l: 144px; }
}
@media (min-width: 60rem) {
  :root { --gutter: 48px; --gap-columns: 32px; --section-gap: 144px; --section-gap-l: 176px; --nav-h: 88px; }
}
@media (min-width: 90rem) {
  :root { --gutter: 64px; }
}