/* ==========================================================================
   VARIABLES — ABOGATOGA · Marca Jurídica Profesional
   Paleta alineada con el logo real (dorado) sobre base oscura.
   ========================================================================== */

:root {
  /* Color */
  --color-paper: #F6F1E7;
  --color-white: #FFFFFF;
  --color-ink: #100D08;
  --color-ink-deep: #070502;
  --color-text: #3B352E;
  --color-text-soft: #6E655A;
  --color-text-onDark: #E9E1CF;
  --color-text-onDark-soft: #AFA48A;
  --color-ember: #B8862E;
  --color-ember-bright: #E3B04B;
  --color-ember-dark: #7A5A1D;
  --color-sand: #D9CBB0;
  --color-line: rgba(23, 19, 15, 0.14);
  --color-line-onDark: rgba(233, 225, 207, 0.14);
  --color-line-soft: rgba(23, 19, 15, 0.07);
  --color-white-glass: rgba(246, 241, 231, 0.78);

  /* Tipografía */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-h1: clamp(2.8rem, 1.8rem + 4.4vw, 5.8rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  --fs-small: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);

  --lh-tight: 1.0;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  /* Espaciado fluido */
  --space-3xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
  --space-2xs: clamp(0.6rem, 0.5rem + 0.3vw, 0.85rem);
  --space-xs: clamp(0.9rem, 0.8rem + 0.4vw, 1.25rem);
  --space-sm: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem);
  --space-md: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
  --space-lg: clamp(3.2rem, 2.4rem + 3vw, 5.6rem);
  --space-xl: clamp(4.5rem, 3.4rem + 4.4vw, 8rem);
  --space-2xl: clamp(6rem, 4.5rem + 6vw, 11rem);

  /* Layout */
  --max-width: 1240px;
  --max-width-narrow: 760px;
  --gutter: clamp(1.25rem, 0.9rem + 1.4vw, 3rem);

  /* Bordes y radios */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-line);

  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(23, 19, 15, 0.05);
  --shadow-md: 0 14px 42px rgba(23, 19, 15, 0.1);
  --shadow-glow-ember: 0 10px 30px rgba(196, 67, 47, 0.3);

  /* Transiciones */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --duration-hero: 2200ms;

  /* Capas */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Alias de compatibilidad con la arquitectura común */
  --color-ivory: var(--color-paper);
  --color-graphite: var(--color-ink);
  --color-burgundy: var(--color-ember);
  --color-burgundy-dark: var(--color-ember-dark);
  --color-clay: var(--color-sand);
  --color-champagne: var(--color-ember);
  --shadow-glow-burgundy: var(--shadow-glow-ember);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-hero: 0ms;
  }
}