/* ==========================================================================
   VERSA Studio · Design Tokens
   Sistema de diseño consolidado. Variables CSS reutilizables.
   ========================================================================== */

:root {
  /* ---------- Paleta · Base ---------- */
  --carbon:         #210f09;
  --carbon-lighter: #2c1a13;
  --carbon-deep:    #160a06;
  --crema:          #f9ebcf;
  --crema-warm:     #f7e6c4;
  --blanco:         #f3f3f1;

  /* ---------- Paleta · Acentos ---------- */
  --mostaza:        #eab978;
  --caramelo:       #ce965e;
  --durazno:        #f9cc9e;
  --terracota:      #be7e4e;
  --marron:         #926640;

  /* ---------- Estados ---------- */
  --error:          #c25a4a;
  --success:        #7a8c5e;

  /* ---------- Opacidades comunes ---------- */
  --crema-80:       rgba(249, 235, 207, 0.8);
  --crema-60:       rgba(249, 235, 207, 0.6);
  --crema-40:       rgba(249, 235, 207, 0.4);
  --crema-20:       rgba(249, 235, 207, 0.2);
  --crema-10:       rgba(249, 235, 207, 0.1);

  --carbon-80:      rgba(33, 15, 9, 0.8);
  --carbon-60:      rgba(33, 15, 9, 0.6);
  --carbon-40:      rgba(33, 15, 9, 0.4);

  /* ---------- Tipografía · Familias ---------- */
  --font-display: 'Acumin Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---------- Tipografía · Escala fluida ---------- */
  --fs-hero:    clamp(2.5rem, 8vw, 5.5rem);
  --fs-h1:      clamp(2.2rem, 6vw, 4rem);
  --fs-h2:      clamp(1.8rem, 4vw, 2.8rem);
  --fs-h3:      clamp(1.3rem, 2.5vw, 1.8rem);
  --fs-body-lg: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* ---------- Tipografía · Line heights ---------- */
  --lh-tight:   1;
  --lh-snug:    1.1;
  --lh-normal:  1.2;
  --lh-relaxed: 1.55;
  --lh-loose:   1.65;

  /* ---------- Tipografía · Tracking ---------- */
  --tracking-tighter: -0.045em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.28em;

  /* ---------- Spacing · 8pt grid ---------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  160px;

  /* ---------- Container ---------- */
  --container-max: 1440px;
  --container-padding: clamp(1.5rem, 5vw, 4rem);

  /* ---------- Breakpoints (referencia, usar en media queries) ---------- */
  /* sm:  640px  · md:  768px  · lg: 1024px  · xl: 1280px  · 2xl: 1536px */

  /* ---------- Animaciones ---------- */
  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:     200ms;
  --duration-medium:   350ms;
  --duration-slow:     700ms;
  --duration-entrance: 1100ms;

  /* ---------- Z-index escala ---------- */
  --z-base:      0;
  --z-elevated:  10;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* ---------- Bordes ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--crema-10);

  /* ---------- Arco (motivo de marca ∩) ---------- */
  /* Radio del arco superior en marcos de imagen y retratos. Un solo valor
     para que todos los arcos de la web tengan la misma curvatura. */
  --arch: clamp(2.5rem, 8vw, 5rem);

  /* ---------- Focus (accesibilidad, on-brand) ---------- */
  --focus-ring:   2px solid var(--mostaza);
  --focus-offset: 3px;

  /* ---------- Elevación ---------- */
  /* Sombras cálidas con tinte carbón (nunca negro puro). Elevación =
     hairline + estos dos escalones; no añadir más. */
  --shadow-sm: 0 2px 8px rgba(22, 10, 6, 0.18);
  --shadow-md: 0 8px 28px rgba(22, 10, 6, 0.28);
}