/* ============================================================
   ARTEKIOS — Variables CSS
   Tokens de design : couleurs, typo, espacements, ombres
   ============================================================ */

/* ── Fonts locales ── */
@font-face {
  font-family: 'Blinker';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/blinker-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Blinker';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/blinker-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

:root {
  /* ── Couleurs ── */
  --teal:         #008090;
  --teal-dark:    #006570;
  --teal-mid:     #007580;
  --teal-light:   #e8f5f7;
  --teal-subtle:  #f0f9fa;
  --navy:         #0f1b2d;
  --navy-mid:     #1e2e45;

  --gray-50:      #f8fafb;
  --gray-100:     #f1f4f6;
  --gray-200:     #e4eaef;
  --gray-300:     #c9d1d8;
  --gray-500:     #6b7a8d;
  --gray-700:     #374151;
  --white:        #ffffff;

  /* ── Typographie ── */
  --font-heading: 'Blinker', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Tailles de texte ── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* ── Espacements ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-width:      1320px;
  --max-width-text: 720px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(15,27,45,.08), 0 1px 2px rgba(15,27,45,.05);
  --shadow-md:  0 4px 12px rgba(15,27,45,.10), 0 2px 4px rgba(15,27,45,.06);
  --shadow-lg:  0 8px 24px rgba(15,27,45,.12), 0 4px 8px rgba(15,27,45,.06);
  --shadow-xl:  0 16px 40px rgba(15,27,45,.14);

  /* ── Transitions ── */
  --transition:      0.2s ease;
  --transition-slow: 0.35s ease;

  /* ── Z-index ── */
  --z-nav:    100;
  --z-modal:  200;
}