/* ============================================================
   4A CERÁMICA — Variables & Design Tokens
   Paleta: fondos café oscuro, arena, terracota
   ============================================================ */
:root {
  /* Fondos */
  --bg-deep:   #16100C;
  --bg-dark:   #221A14;
  --bg-mid:    #2E2218;
  --bg-warm:   #3A2C1E;

  /* Texto */
  --text-pale:  #EDE7DC;
  --text-arena: #D4B896;
  --text-muted: #7A6A58;
  --text-smoke: #5C4F42;

  /* Acento */
  --titulo:     #8B4E2F;  /* Terracota profunda — títulos y subtítulos de sección */
  --terra:      #B86C2A;
  --terra-lt:   #D4956A;
  --gold:       #C8A96E;
  --terra-glow: rgba(184,108,42,0.12);

  /* Bordes */
  --border:      rgba(200,169,110,0.12);
  --border-warm: rgba(200,169,110,0.25);
  --border-terra:rgba(184,108,42,0.3);

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sub:     'EB Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  /* Escala */
  --text-xs:   clamp(0.68rem, 1vw,   0.78rem);
  --text-sm:   clamp(0.78rem, 1.2vw, 0.88rem);
  --text-base: clamp(0.88rem, 1.4vw, 0.95rem);
  --text-md:   clamp(1rem,    1.6vw, 1.1rem);
  --text-lg:   clamp(1.1rem,  2vw,   1.35rem);
  --text-xl:   clamp(1.3rem,  2.5vw, 1.7rem);
  --text-2xl:  clamp(1.7rem,  3.5vw, 2.4rem);
  --text-3xl:  clamp(2.2rem,  5vw,   3.2rem);
  --text-hero: clamp(3rem,    8vw,   6rem);

  /* Layout */
  --max-w: 1200px;
  --gutter: clamp(1.2rem, 4vw, 3rem);

  /* Transiciones */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emerger: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-arcilla: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-breath:  cubic-bezier(0.37, 0, 0.63, 1);
  --dur-fast: 200ms;
  --dur-mid:  380ms;
  --dur-slow: 650ms;

  /* Tokens semánticos de marca */
  --c-terracota: #c66b4d;
  --c-cafe:      #2a201a;
  --c-crema:     #ece1cd;

  /* Radio */
  --radius: 2px;

  /* Sombras */
  --shadow: 0 8px 48px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 80px rgba(0,0,0,0.7);
}