/* ============================================================
   Aberturas Chajarí — Design Tokens (OKLCH + Dark mode)
   ============================================================ */

:root {
  color-scheme: light dark;

  /* --- Marca (invariable light/dark) ---
     brand-500 = naranja oficial #E95229 (logo, hero badges, branded elements grandes).
     brand-text = versión más oscura para texto/links sobre blanco (WCAG AA ≥ 4.5:1).
     Esta separación evita degradar la marca y a la vez cumple contraste. */
  --hue-brand: 30;                                   /* naranja-rojo marca #E95229 */
  --brand-500: oklch(59% 0.20 var(--hue-brand));     /* #E95229 — uso branded */
  --brand-600: oklch(50% 0.20 var(--hue-brand));     /* hover oscuro */
  --brand-text: oklch(48% 0.18 var(--hue-brand));    /* texto/links sobre claro · contraste ≥ 4.5:1 */
  --brand-400: oklch(68% 0.17 var(--hue-brand));     /* sobre fondo oscuro */
  --brand-100: oklch(96% 0.04 var(--hue-brand));     /* fondo suave */
  --brand-200: oklch(91% 0.08 var(--hue-brand));     /* borde suave */

  /* --- Colores semánticos: LIGHT por defecto --- */
  --color-bg:             oklch(98% 0 0);            /* neutro puro */
  --color-bg-alt:         oklch(96.5% 0 0);
  --color-surface:        oklch(100% 0 0);
  --color-surface-raised: oklch(99% 0 0);
  --color-surface-2:      oklch(97% 0 0);            /* ≈ #F2F2F2 gris claro manual */

  --color-text:           oklch(18% 0 0);            /* ≈ #1F1F1F grafito manual */
  --color-text-muted:     oklch(48% 0 0);
  --color-text-subtle:    oklch(63% 0 0);
  --color-heading:        oklch(14% 0 0);

  --color-border:         oklch(90% 0 0);            /* neutro puro */
  --color-border-strong:  oklch(75% 0 0);            /* ≈ #B5B5B5 gris medio manual */

  --color-primary:          var(--brand-500);             /* fondos, botones, elementos branded */
  --color-primary-text:     var(--brand-text);            /* texto/links sobre claro (cumple AA) */
  --color-primary-hover:    var(--brand-600);
  --color-primary-soft:     var(--brand-100);
  --color-primary-border:   var(--brand-200);
  --color-primary-contrast: oklch(100% 0 0);

  --color-success:        oklch(55% 0.14 150);
  --color-success-text:   oklch(45% 0.15 145);
  --color-warning:        oklch(75% 0.16 80);
  --color-danger:         oklch(58% 0.18 28);

  --color-whatsapp:       oklch(70% 0.17 145);
  --color-whatsapp-text:  oklch(20% 0.02 145);
  /* El ámbar #f59e0b da 2,02:1 sobre blanco. Las estrellas son gráficos con
     significado (WCAG 1.4.11 pide 3:1); este valor da 3,75:1. */
  --color-star:           oklch(62% 0.15 70);
  --color-whatsapp-hover: oklch(62% 0.17 145);
  --color-primary-on-dark: var(--brand-400);

  --color-dark-bg:        oklch(18% 0.01 60);        /* footer en light mode */
  --color-dark-surface:   oklch(24% 0.01 60);

  --color-focus:          var(--brand-500);
  --focus-ring:           0 0 0 3px oklch(59% 0.20 var(--hue-brand) / 0.35);

  /* --- Legado (compat) --- */
  --color-primary-dark:   var(--color-primary-hover);
  --color-primary-light:  var(--color-primary-soft);
  --color-whatsapp-dark:  var(--color-whatsapp-hover);
  --color-text-light:     var(--color-text-subtle);

  /* --- Tipografía ---
     Onest (body): variable, humanista cálida — fuera del reflex list de fuentes AI default.
     Bricolage Grotesque (display): variable con optical sizing — industrial-humanista,
     refleja precisión + calidez ("vecino del barrio que es el mejor en lo suyo"). */
  --font-sans:    'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Onest', system-ui, sans-serif;

  /* Escala fluida con clamp — ratio 1.25 */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1.0625rem;                           /* 17px */
  --text-lg:     1.1875rem;
  --text-xl:     clamp(1.25rem, 0.9vw + 1rem, 1.5rem);
  --text-2xl:    clamp(1.5rem, 1.2vw + 1.1rem, 1.875rem);
  --text-3xl:    clamp(1.875rem, 1.8vw + 1.25rem, 2.5rem);
  --text-4xl:    clamp(2.25rem, 2.5vw + 1.5rem, 3.25rem);
  --text-5xl:    clamp(2.75rem, 4vw + 1.5rem, 4.5rem);

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* --- Espaciado (4px) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Border radius --- */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-2xl:  2.5rem;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm:   0 2px 8px   oklch(0% 0 0 / 0.04);
  --shadow-md:   0 8px 24px  oklch(0% 0 0 / 0.06);
  --shadow-lg:   0 16px 40px oklch(0% 0 0 / 0.08);
  --shadow-xl:   0 24px 64px oklch(0% 0 0 / 0.10);
  --shadow-card: 0 4px 16px  oklch(59% 0.20 var(--hue-brand) / 0.08);

  /* --- Easings & Transiciones --- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);

  /* --- Layout --- */
  --container-max:    1280px;
  --container-prose:  760px;
  --container-narrow: 900px;
  --header-height:    68px;
}

/* ============================================================
   Dark mode (prefers-color-scheme)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             oklch(16% 0.012 60);
    --color-bg-alt:         oklch(19% 0.012 60);
    --color-surface:        oklch(21% 0.012 60);
    --color-surface-raised: oklch(24% 0.014 60);
    --color-surface-2:      oklch(23% 0.012 60);

    --color-text:           oklch(94% 0.008 70);
    --color-text-muted:     oklch(72% 0.01 70);
    --color-text-subtle:    oklch(58% 0.008 70);
    --color-heading:        oklch(98% 0.005 70);

    --color-border:         oklch(30% 0.012 60);
    --color-border-strong:  oklch(42% 0.015 60);

    --color-primary:          var(--brand-400);
    --color-primary-hover:    var(--brand-500);
    --color-primary-soft:     oklch(28% 0.06 var(--hue-brand));
    --color-primary-border:   oklch(38% 0.1 var(--hue-brand));
    --color-primary-contrast: oklch(15% 0.01 60);
    --color-primary-on-dark:  var(--brand-400);
    /* Sin esta línea el token hereda --brand-text (#ac1c0f), que es el rojo
       oscuro pensado para fondos claros: sobre el fondo oscuro da 2,71:1.
       Con brand-400 da 6,28:1. Afecta a .btn-outline, .u-brand-link-strong
       y todo lo que use texto de marca. */
    --color-primary-text:     var(--brand-400);
    /* Sobre fondo oscuro el ámbar original ya contrasta de sobra */
    --color-star:             oklch(75% 0.15 70);
    /* El verde de éxito estaba pensado para fondo blanco: sobre la superficie
       oscura daba 2,56:1. Este da 7,02:1. */
    --color-success-text:     oklch(70% 0.15 145);

    --color-dark-bg:        oklch(11% 0.008 60);
    --color-dark-surface:   oklch(17% 0.012 60);

    --color-primary-light:  var(--color-primary-soft);
    --color-primary-dark:   var(--color-primary-hover);

    --shadow-sm:   0 2px 8px   oklch(0% 0 0 / 0.35);
    --shadow-md:   0 8px 24px  oklch(0% 0 0 / 0.45);
    --shadow-lg:   0 16px 40px oklch(0% 0 0 / 0.55);
    --shadow-xl:   0 24px 64px oklch(0% 0 0 / 0.65);
    --shadow-card: 0 4px 16px  oklch(0% 0 0 / 0.4);

    --focus-ring: 0 0 0 3px oklch(76% 0.14 var(--hue-brand) / 0.5);
  }
}

/* ============================================================
   Accesibilidad global — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}