/* ============================================================
   Jorge & Ari — Design Tokens & CSS Variables
   01 Agosto 2026 · Fundo Alto del Río · Arequipa
   Editables desde Admin → Configuración → Tema
   ============================================================ */

:root {

  /* ── Paleta Base (valores de marca) ─────────────────────── */
  --c-sage:        #5A6854;
  --c-terra:       #B36444;
  --c-blue:        #91A4B1;
  --c-rose:        #B79389;
  --c-ivory:       #F2EEE4;

  /* Derivados generados */
  --c-sage-dark:   #3D4839;
  --c-sage-mid:    #4E5E48;
  --c-sage-light:  #7A8A74;
  --c-sage-pale:   #E8EDE6;
  --c-terra-dark:  #8A4C33;
  --c-terra-light: #C87E60;
  --c-blue-light:  #B8C8D3;
  --c-rose-light:  #D4B8B2;
  --c-ivory-dark:  #E5DECE;
  --c-ivory-deeper:#D8D0C0;
  --c-dark:        #2D3229;
  --c-dark-mid:    #3D4538;
  --c-white:       #FFFFFF;
  --c-black:       #0A0C09;

  /* ── Semánticos (asignación funcional) ──────────────────── */
  --c-primary:       var(--c-sage);
  --c-primary-dark:  var(--c-sage-dark);
  --c-primary-light: var(--c-sage-pale);
  --c-secondary:     var(--c-terra);
  --c-accent:        var(--c-blue);
  --c-highlight:     var(--c-rose);

  --c-bg:            var(--c-ivory);
  --c-bg-alt:        #FAFAF6;
  --c-bg-dark:       var(--c-dark);
  --c-surface:       rgba(242, 238, 228, 0.9);
  --c-surface-dark:  rgba(45, 50, 41, 0.85);

  --c-text:          var(--c-dark);
  --c-text-light:    #5A6254;
  --c-text-muted:    #8A9485;
  --c-text-on-dark:  var(--c-ivory);
  --c-text-on-dark-muted: rgba(242, 238, 228, 0.7);

  --c-border:        rgba(90, 104, 84, 0.18);
  --c-border-light:  rgba(90, 104, 84, 0.08);
  --c-border-dark:   rgba(90, 104, 84, 0.40);

  --c-overlay:       rgba(45, 50, 41, 0.50);
  --c-overlay-light: rgba(242, 238, 228, 0.60);
  --c-overlay-heavy: rgba(45, 50, 41, 0.75);

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display:  'Aloha Magazine', Georgia, serif;
  --font-script:   'The Wedding Signature', cursive;
  --font-body:     'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:     'Courier New', monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Escala tipográfica fluida */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */
  --text-5xl:  6rem;       /* 96px */
  --text-6xl:  9rem;       /* 144px */

  /* Fuentes fluidas responsivas */
  --text-hero:    clamp(4.5rem, 10vw, 13rem);
  --text-section: clamp(2.5rem, 5vw, 7rem);
  --text-script:  clamp(2rem, 4vw, 5rem);

  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-base:     1.6;
  --lh-relaxed:  1.75;

  --ls-tight:    2px;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.15em;
  --ls-widest:   0.25em;

  /* ── Espaciado (escala 4px base) ─────────────────────────── */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */
  --sp-40:  10rem;     /* 160px */
  --sp-48:  12rem;     /* 192px */
  --sp-56:  14rem;     /* 224px */
  --sp-64:  16rem;     /* 256px */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-sm:   640px;
  --container:      1200px;
  --container-wide: 1440px;
  --container-full: 100%;

  --header-h:  72px;
  --nav-pill-h: 48px;

  --radius-xs:   3px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-2xl:  64px;
  --radius-pill: 9999px;

  /* ── Transiciones & Easing ───────────────────────────────── */
  --ease-linear: linear;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --t-fast:   150ms;
  --t-med:    350ms;
  --t-slow:   700ms;
  --t-xslow:  1200ms;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(45, 50, 41, 0.06), 0 1px 2px rgba(45, 50, 41, 0.04);
  --shadow-sm: 0 2px 8px rgba(45, 50, 41, 0.08), 0 1px 3px rgba(45, 50, 41, 0.05);
  --shadow-md: 0 8px 24px rgba(45, 50, 41, 0.12), 0 3px 8px rgba(45, 50, 41, 0.07);
  --shadow-lg: 0 24px 48px rgba(45, 50, 41, 0.16), 0 8px 16px rgba(45, 50, 41, 0.08);
  --shadow-xl: 0 48px 80px rgba(45, 50, 41, 0.20), 0 16px 32px rgba(45, 50, 41, 0.10);
  --shadow-inner: inset 0 2px 8px rgba(45, 50, 41, 0.08);

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      1;
  --z-float:    10;
  --z-sticky:   50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
  --z-cursor:  500;
  --z-top:     999;

  /* ── Layout Editorial ───────────────────────────────────────
     Contenedor universal + ritmo de sección fluido
     ─────────────────────────────────────────────────────────── */
  --container-max-width: 1100px;
  --container-padding:   clamp(20px, 5vw, 60px);
  --section-spacing:     clamp(60px, 10vw, 120px);

  /* ── Tipografía Fluida Editorial ─────────────────────────────
     Escala progresiva: script → display serif → sans
     ─────────────────────────────────────────────────────────── */
  --font-script-hero:    clamp(72px, 10vw, 120px);
  --font-script-section: clamp(48px, 6vw,  80px);
  --font-serif-display:  clamp(40px, 5vw,  56px);
  --font-serif-heading:  clamp(28px, 4vw,  40px);
  --font-serif-sub:      clamp(20px, 2.5vw, 24px);
  --font-sans-body:      1rem;        /* 16px — base del cuerpo */
  --font-sans-meta:      0.75rem;     /* 12px — etiquetas / overlines */

  /* ── Semánticos de contexto (aliases de conveniencia) ────────
     Usar en lugar de colores crudos para facilitar cambios de tema
     ─────────────────────────────────────────────────────────── */
  --bg-light:   var(--c-ivory);
  --bg-dark:    var(--c-dark);
  --text-dark:  var(--c-dark);
  --text-light: var(--c-ivory);
  --text-muted: var(--c-text-muted);
}

/* ── Dark mode placeholder (futuro) ──────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Intencional: no activar dark mode automáticamente */
  /* La versión dark se activa solo si el admin la configura */
}