/* ============================================
   Typography System
   ============================================ */

/* Caractères Font Face Declarations */
/* Note: You need to obtain the Caractères font files (.woff2, .woff, or .ttf) 
   and place them in a /fonts/ directory. The font is proprietary and used for 
   French road signs. Ensure you have legal rights to use it. */

@font-face {
  font-family: 'Caractères';
  src: url('../fonts/Caracteres%20L1.ttf') format('truetype');
  font-weight: 700; /* Bold - L1 variant */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caractères';
  src: url('../fonts/Caracteres%20L2.ttf') format('truetype');
  font-weight: 500; /* Medium - L2 variant */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caractères';
  src: url('../fonts/Caracteres%20L4.ttf') format('truetype');
  font-weight: 400; /* Normal - L4 variant (italic) */
  font-style: italic;
  font-display: swap;
}

/* L5 variant - using L2 as fallback if L5 is not available */
@font-face {
  font-family: 'Caractères';
  src: url('../fonts/Caracteres%20L2.ttf') format('truetype');
  font-weight: 400; /* Normal - L5 variant (upright) - using L2 as fallback */
  font-style: normal;
  font-display: swap;
}

/* Font Definitions */
:root {
  /* Primary font stack - Caractères with fallbacks */
  --font-primary: 'Caractères', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Font sizes - modular scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.5rem;       /* 24px */
  --font-size-xl: 2rem;         /* 32px */
  --font-size-xxl: 3rem;        /* 48px */
  --font-size-xxxl: 4rem;       /* 64px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
}

/* ============================================
   Headings
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

h1 {
  font-size: var(--font-size-xxxl);
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: var(--font-size-xxl);
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

h5 {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
}

/* ============================================
   Body Text
   ============================================ */

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-normal);
}

p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Links
   ============================================ */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing);
}

a:hover {
  color: var(--color-accent);
}

a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   Lists
   ============================================ */

ul, ol {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-md);
}

li {
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-normal);
}

/* ============================================
   Utility Classes
   ============================================ */

.text-light {
  font-weight: var(--font-weight-light);
}

.text-normal {
  font-weight: var(--font-weight-normal);
}

.text-medium {
  font-weight: var(--font-weight-medium);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-center {
  text-align: center;
}

/* ============================================
   Responsive Typography
   ============================================ */

/* Tablet and below */
@media (max-width: 1024px) {
  :root {
    --font-size-xxxl: 3rem;    /* 48px */
    --font-size-xxl: 2.5rem;   /* 40px */
    --font-size-xl: 1.75rem;   /* 28px */
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --font-size-xxxl: 2.5rem;  /* 40px */
    --font-size-xxl: 2rem;     /* 32px */
    --font-size-xl: 1.5rem;    /* 24px */
  }
  
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  :root {
    --font-size-xxxl: 2rem;    /* 32px */
    --font-size-xxl: 1.75rem;  /* 28px */
    --font-size-xl: 1.25rem;   /* 20px */
  }
}