/* ==========================================================================
   Farizon Auto Argentina · Design tokens
   Paleta armonizada: una escala de verdes (marca), una de neutros y alphas
   reutilizables. Ningún otro archivo CSS debe usar colores hexadecimales
   sueltos: todo sale de acá.
   Referencias: docs/diseno-referencia/stitch/farizon_auto_argentina/DESIGN.md
   y farizonauto.co.uk (tipografía Space Grotesk, fotografía real, sage green).
   ========================================================================== */

:root {
  /* --- Escala de marca (verde bosque → sage) --------------------------- */
  --green-950: #0a110e;
  --green-900: #0d1411;   /* header, footer */
  --green-850: #111a15;   /* tarjetas oscuras */
  --green-800: #15231c;   /* franja, paneles */
  --green-700: #1b2d24;   /* hover de paneles */
  --green-600: #2a503b;   /* texto verde profundo */
  --green-500: #4b6456;   /* secundario, iconos */
  --green-400: #60796a;   /* acento */
  --green-300: #8cbda0;   /* acento claro sobre oscuro */
  --green-200: #b2cdbb;
  --green-100: #cbe6d4;   /* contenedores suaves */
  --green-50: #e8f0ea;

  /* --- Neutros ---------------------------------------------------------- */
  --neutral-950: #0f1713; /* tinta principal (verde-negro) */
  --neutral-900: #191c1c;
  --neutral-800: #2e3131;
  --neutral-700: #434845;
  --neutral-600: #434845;
  --neutral-500: #6b736f;
  --neutral-400: #747874;
  --neutral-300: #9ca3af;
  --neutral-200: #c3c8c3;
  --neutral-150: #d8dad9;
  --neutral-100: #e1e3e2;
  --neutral-75: #eceeed;
  --neutral-50: #f2f4f3;
  --neutral-25: #f8faf9;
  --white: #ffffff;

  /* --- Semánticos ------------------------------------------------------- */
  /* Un solo color de texto, un solo gris secundario y un solo verde de acento
     en toda la web. Los alias de abajo existen para que los componentes no
     cambien: todos apuntan al mismo valor. */
  --ink: var(--neutral-950);      /* títulos, cuerpo, valores */
  --ink-muted: var(--neutral-700); /* descripciones, etiquetas, texto de apoyo */
  --accent: var(--green-500);      /* verde único sobre fondo claro */
  --accent-light: var(--green-300); /* verde único sobre fondo oscuro */

  --color-surface: var(--neutral-25);
  --color-surface-low: var(--neutral-50);
  --color-surface-container: var(--neutral-75);
  --color-surface-high: #e6e9e8;
  --color-surface-highest: var(--neutral-100);
  --color-white: var(--white);

  --color-ink: var(--ink);
  --color-ink-2: var(--ink);
  --color-muted: var(--ink-muted);
  --color-muted-2: var(--ink-muted);
  --color-muted-3: var(--ink-muted);
  --color-outline: var(--ink-muted);
  --color-outline-variant: var(--neutral-200);
  --color-border: #e5e7eb;
  --color-border-soft: #f1f5f9;
  --color-border-faint: #f3f4f6;

  --color-header: var(--green-900);
  --color-green: var(--green-800);
  --color-green-2: var(--green-800);
  --color-green-3: var(--green-850);
  --color-accent: var(--accent);
  --color-subtle: var(--accent-light);
  --color-deep: var(--accent);
  --color-secondary: var(--accent);
  --color-secondary-container: var(--green-100);
  --color-on-secondary-container: var(--accent);
  --color-secondary-fixed: var(--accent-light);
  --color-secondary-dark: var(--green-600);
  --color-tertiary-container: var(--green-800);
  --color-emerald: var(--accent-light);
  --color-emerald-border: var(--accent-a40);

  /* --- Estado ----------------------------------------------------------- */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-ok-container: var(--green-100);
  --color-on-ok-container: #082015;

  /* --- Alphas reutilizables -------------------------------------------- */
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a80: rgba(255, 255, 255, 0.8);
  --white-a90: rgba(255, 255, 255, 0.9);
  --white-a95: rgba(255, 255, 255, 0.95);
  --black-a05: rgba(0, 0, 0, 0.05);
  --black-a10: rgba(0, 0, 0, 0.1);
  --black-a20: rgba(0, 0, 0, 0.2);
  --black-a50: rgba(0, 0, 0, 0.5);
  --black-a80: rgba(0, 0, 0, 0.8);
  --accent-a10: rgba(96, 121, 106, 0.1);
  --accent-a15: rgba(96, 121, 106, 0.15);
  --accent-a20: rgba(96, 121, 106, 0.2);
  --accent-a30: rgba(96, 121, 106, 0.3);
  --accent-a40: rgba(96, 121, 106, 0.4);
  --accent-a50: rgba(96, 121, 106, 0.5);
  --accent-a60: rgba(96, 121, 106, 0.6);
  --header-a95: rgba(13, 20, 17, 0.95);
  --header-a98: rgba(13, 20, 17, 0.98);
  --green-950-a90: rgba(10, 17, 14, 0.9);
  --green-800-a85: rgba(21, 29, 25, 0.85);
  --tertiary-a85: rgba(14, 31, 22, 0.85);
  --border-a80: rgba(229, 231, 235, 0.8);
  --secondary-container-a50: rgba(203, 230, 212, 0.5);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Radios ------------------------------------------------------------ */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px var(--black-a05);
  --shadow-md: 0 4px 6px -1px var(--black-a10), 0 2px 4px -2px var(--black-a10);
  --shadow-lg: 0 10px 15px -3px var(--black-a10), 0 4px 6px -4px var(--black-a10);
  --shadow-xl: 0 20px 25px -5px var(--black-a10), 0 8px 10px -6px var(--black-a10);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.04);
  --shadow-tab: 0 4px 12px rgba(15, 23, 19, 0.15);
  --shadow-header: 0 12px 32px -12px var(--black-a50);

  /* --- Layout ------------------------------------------------------------ */
  --header-h: 80px;
  --container: 72rem;
  --container-wide: 80rem;
  --container-xl: 90rem;
  --gutter: 1rem;
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
  }
}