@font-face {
  font-family: 'Clash Display';
  src: url('/wp-content/themes/agencia-friday/assets/fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/wp-content/themes/agencia-friday/assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/wp-content/themes/agencia-friday/assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores */
  --color-bg:            #F9FAFB;
  --color-text:          #121316;
  --color-accent:        #00E676;
  --color-accent-hover:  #00C864;
  --color-champagne:     #DFBA6B;
  --color-surface:       #F1F3F5;
  --color-black:         #000000;
  --color-white:         #FFFFFF;

  /* Tipografia */
  --font-heading:        'Clash Display', Arial, sans-serif;
  --font-body:           'Satoshi', Inter, sans-serif;

  /* Escala tipografica (clamp: movil -> desktop) */
  --fs-display:          clamp(40px, 6vw, 72px);
  --fs-h1:               clamp(36px, 4.5vw, 56px);
  --fs-h2:               clamp(28px, 3.5vw, 40px);
  --fs-h3:               clamp(22px, 2.5vw, 28px);
  --fs-h4:               20px;
  --fs-body-lg:          20px;
  --fs-body:             16px;
  --fs-sm:               14px;
  --fs-xs:               12px;

  /* Line-height */
  --lh-heading:          1.1;
  --lh-body:             1.7;

  /* Letter-spacing */
  --ls-heading:          -0.03em;
  --ls-body:             normal;

  /* Grid */
  --container-max:       1200px;
  --gutter:              24px;
  --section-gap:         80px;
  --section-padding:     64px;

  /* Sombras */
  --shadow-none:         none;
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:           0 4px 16px rgba(0,0,0,0.10);

  /* Transiciones */
  --transition-base:     0.2s ease;
  --transition-slow:     0.3s ease;

  /* Border radius */
  --radius-btn:          4px;
  --radius-card:         8px;
  --radius-favicon:      12%;
}