/* ============================================================
   Four Square Partners — Design Tokens v2 · Warm Editorial
   Fuente: docs/websites/foursquare/identity/brand-identity-v2.md
   Paleta "Warm Editorial" · arco "calidez → propósito" · mobile-first
   ============================================================ */

:root {
  /* --- Paleta núcleo v2 --- */
  --c-cream:          #FAF8F4;  /* superficie primaria (light-ground dominante) */
  --c-paper-warm:     #FFFDF8;  /* superficie elevada / cards en secciones claras */
  --c-ink:            #1C1832;  /* texto principal sobre claro (~15:1 sobre cream) */
  --c-slate-warm:     #5E5770;  /* texto secundario sobre claro (~6.3:1) */
  --c-slate:          #1A3E6E;  /* acento acción · CTAs · links — navy medio (~9.8:1 sobre cream) */
  --c-violet:         #B060CC;  /* highlight decorativo · borders · fills icon · CTA en oscuro (~3.5:1 cream decorativo / ~4:1 dark UI) */
  --c-violet-text:    #7B2D8E;  /* violeta para uso como texto (~7.6:1 sobre cream ✅ AAA) */
  --c-warm-deep:      #0D2244;  /* fondo secciones oscuras — navy profundo */
  --c-warm-deep-elev: #112D58;  /* fondo elevado dentro de secciones oscuras */  /* fondo elevado dentro de secciones oscuras */
  --c-offwhite:       #F5F7FA;  /* texto sobre secciones oscuras */

  /* --- Neutros (sobre claro) --- */
  --c-line:        #E8E3DE;              /* divisores sobre claro (tono más cálido) */
  --c-line-dark:   rgba(245,247,250,.14);/* divisores sobre oscuro */

  /* --- Tipografía (idéntica a v1 — ver brand-identity-v2 §4) --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-hero:    clamp(30px, 5vw, 50px);          /* TÍTULO de hero — base: list-building.html */
  --fs-h2:      clamp(1.75rem, 3vw, 2rem);       /* nivelado con el H2 de list-building.html (32px tope) */
  --fs-h3:      clamp(1.4rem, 2.5vw, 1.9rem);
  --fs-stat:    clamp(2.8rem, 6vw, 4rem);
  --fs-lead:    clamp(0.95rem, 1.3vw, 1rem);      /* nivelado con el lead de list-building.html (15-16px) */
  --fs-body:    1rem;
  --fs-ui:      0.95rem;
  --fs-caption: 0.75rem;

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --measure:    65ch;
  --content-w:  1200px;
  --text-w:     760px;

  /* --- Espaciado (grid 8px — idéntico a v1) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section-y: clamp(4rem, 8vw, 6.5rem);

  /* --- Radios --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Sombra --- */
  --shadow-soft: 0 8px 30px rgba(13, 34, 68, .10);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  400ms;

  /* --- Foco ---
     Violet sobre claro (8:1 ✅) / offwhite sobre oscuro (14:1 ✅)
     El violeta #B060CC (3.5:1) NO cumple WCAG 2.2 §2.4.11 como foco sobre cream */
  --focus-ring:   2px solid var(--c-slate);
  --focus-offset: 2px;

  /* --- Header sticky --- */
  --header-h: 64px;
  --rail-h:   56px;  /* in-page section rail (owners) */
}

/* ============================================================
   Temas de sección v2
   dark-warm = secciones oscuras (hero, authorities, contact, footer)
   light      = secciones claras dominantes (owners, how-it-works, FAQ)
   ============================================================ */

[data-theme="dark"] {
  --bg:          var(--c-warm-deep);
  --bg-elevated: var(--c-warm-deep-elev);
  --text:        var(--c-offwhite);
  --text-muted:  rgba(245, 247, 250, .72);
  --line:        var(--c-line-dark);
  --action:      var(--c-violet);  /* CTA/link sobre oscuro */
  --action-text: #FFFFFF;
  --accent:      var(--c-violet);
  --focus-ring:  2px solid var(--c-offwhite);
}

[data-theme="light"] {
  --bg:          var(--c-cream);
  --bg-elevated: var(--c-paper-warm);
  --text:        var(--c-ink);
  --text-muted:  var(--c-slate-warm);
  --line:        var(--c-line);
  --action:      var(--c-slate);
  --action-text: #FFFFFF;
  --accent:      var(--c-slate);
  --focus-ring:  2px solid var(--c-slate);
}

/* Default = claro */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}