/* ══════════════════════════════════════════════
   DESIGN TOKENS — hybrid-teams.es
   Fuente: Digital Brandbook v0.1 (brandbook.html)
   ══════════════════════════════════════════════ */

/* ── FONT FACES ── */
@font-face {
  font-family: 'Airport Neue';
  src: url('/assets/fonts/AirportNeue-Thin.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Airport Neue';
  src: url('/assets/fonts/AirportNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Airport Neue';
  src: url('/assets/fonts/AirportNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Airport Neue';
  src: url('/assets/fonts/AirportNeue-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Airport Neue';
  src: url('/assets/fonts/AirportNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── CUSTOM PROPERTIES ── */
:root {
  /* Colors */
  --color-dark:       #202213;
  --color-white:      #F8F8F8;
  --color-accent:     #A8E402;
  --color-gray-100:   #EEF0E9;
  --color-gray-200:   #DBDED3;
  --color-gray-300:   #B9BDAD;
  --color-gray-400:   #898D7E;
  --color-gray-500:   #585B46;
  --gradient-brand:   linear-gradient(135deg, #A8E402 0%, #FCFF59 100%);

  /* Semantic colors */
  --color-success:    #557200;
  --color-warning:    #7A6A10;
  --color-error:      #8A3A2A;
  --color-info:       #4A6A5A;
  --color-success-bg: #E8EDD8;
  --color-warning-bg: #EDE8D0;
  --color-error-bg:   #EDDBDB;
  --color-info-bg:    #DBE8E0;

  /* Typography — base scale */
  --font-family:      'Airport Neue', 'Helvetica Neue', Arial, sans-serif;
  --text-caption:     12px;
  --text-small:       14px;
  --text-label:       19px;   /* Section labels, kickers */
  --text-body:        18px;
  --text-lg:          20px;   /* Nav panel links, hero footer, btn--secondary */
  --text-xl:          24px;   /* Emphasized body, hybrid-team core */
  --text-2xl:         32px;   /* Responsive headings */
  --text-h4:          18px;
  --text-h3:          22px;
  --text-h2:          28px;
  --text-h1:          36px;
  --text-statement:   40px;
  --text-3xl:         48px;   /* Section headings (how-it-works) */
  --text-display:     56px;
  --text-hero:        88px;   /* Full-screen hero headline */

  /* Font weights */
  --fw-thin:          200;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* Line heights */
  --lh-tight:         1.05;
  --lh-display:       1.1;
  --lh-snug:          1.2;
  --lh-normal:        1.35;
  --lh-relaxed:       1.5;
  --lh-body:          1.6;

  /* Letter spacing */
  --ls-tight:         0.005em;
  --ls-body:          0.012em;
  --ls-wide:          0.05em;

  /* Spacing */
  --space-2xs:        4px;
  --space-xs:         8px;
  --space-sm:         16px;
  --space-md:         32px;
  --space-lg:         48px;
  --space-xl:         64px;
  --space-2xl:        96px;
  --space-3xl:        128px;
  --nav-height:       80px;   /* ~48px nav + 32px offset inferior */

  /* Layout */
  --content-width:    1120px;
  --article-width:    680px;
  --grid-gap:         32px;
  --section-padding-h: 120px; /* Padding horizontal para secciones full-bleed */
  --section-padding-v:  80px; /* Padding vertical para secciones full-bleed */

  /* Radii */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        16px;
  --radius-full:      9999px;

  /* Transitions */
  --duration-fast:    0.2s;
  --duration-normal:  0.3s;
  --duration-medium:  0.4s;
  --duration-slow:    0.6s;
  --ease-standard:    ease;
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers */
  --z-base:           0;
  --z-content:        1;
  --z-nav:            100;
  --z-overlay:        200;
}