/*
  Design tokens — De Este Lado | Growth & Ads
  Paleta extraída del sitio actual (theme: wens-creative-studios).
*/
:root {
  /* ─── Color: surface ─── */
  --color-bg:            #0d0d0d;          /* base global */
  --color-surface-1:     #141414;          /* cards principales */
  --color-surface-2:     #1a1a1a;          /* cards elevadas */
  --color-surface-3:     #242424;          /* hover */
  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.16);

  /* ─── Color: text ─── */
  --color-text:          #fafafa;
  --color-text-soft:     #c4c4c4;
  --color-text-muted:    #8a8a8a;
  --color-text-dim:      #6e6e6e;

  /* ─── Color: brand ─── */
  --color-accent:        #c9ff3a;          /* verde lima — identidad */
  --color-accent-hover:  #b4e835;
  --color-accent-deep:   #88b820;          /* para gradients */
  --color-data:          #a2d2ff;          /* sub-acento solo métricas */

  /* ─── Color: signals ─── */
  --color-on-accent:     #0a0a0a;          /* texto sobre verde */

  /* ─── Typography ─── */
  --font-display: 'Bricolage Grotesque', 'Clash Display', system-ui, sans-serif;
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid via clamp */
  --fs-eyebrow:    clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body-sm:    clamp(0.875rem, 0.82rem + 0.2vw, 0.95rem);
  --fs-body:       clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-body-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h6:         clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-h5:         clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h4:         clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h3:         clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h2:         clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h1:         clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
  --fs-display:    clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem);

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-tight:    -0.03em;
  --ls-tighter:  -0.045em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.16em;

  /* ─── Spacing scale ─── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;
  --space-4xl: 11rem;

  /* Section padding (responsive) */
  --section-py: clamp(4rem, 7vw, 8rem);

  /* ─── Layout ─── */
  --max-content:  1240px;
  --max-narrow:   880px;
  --max-wide:     1440px;
  --gutter:       clamp(1.25rem, 3vw, 2.25rem);

  /* ─── Radius ─── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ─── Shadows ─── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px rgba(201,255,58,0.4), 0 0 40px -8px rgba(201,255,58,0.5);

  /* ─── Motion ─── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   180ms;
  --t-med:    320ms;
  --t-slow:   600ms;
}