/* ==========================================================================
   Design Tokens — FRSafe Concept
   Source: UX Design Specification v1.0
   ========================================================================== */

/* Font Faces — Plus Jakarta Sans (self-hosted, RGPD compliant) */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Custom Properties */

:root {
  /* ---- Colors ---- */

  /* Primary — Navy */
  --color-navy: #1a1a2e;
  --color-navy-light: #2d2d44;
  --color-navy-dark: #12121f;

  /* Accent — Sûreté (Blue) */
  --color-blue: #667eea;
  --color-blue-light: #8b9ef0;
  --color-blue-dark: #4a62d4;
  --color-blue-subtle: rgba(102, 126, 234, 0.1);

  /* Accent — GaiaFlow (Green) */
  --color-green: #27AE60;
  --color-green-light: #2ecc71;
  --color-green-dark: #1e8449;
  --color-green-subtle: rgba(39, 174, 96, 0.1);

  /* Neutrals */
  --color-white: #ffffff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #e9ecef;
  --color-gray-200: #dee2e6;
  --color-gray-300: #ced4da;
  --color-gray-500: #6c757d;
  --color-gray-700: #495057;
  --color-gray-900: #212529;

  /* Semantic */
  --color-text-primary: var(--color-navy);
  --color-text-secondary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-dark: var(--color-navy);
  --color-border: var(--color-gray-200);
  --color-red: #e74c3c;

  /* ---- Typography ---- */

  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scale (modular ratio 1.25) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Spacing (8px base grid) ---- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---- Effects ---- */

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Container ---- */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-padding: var(--space-4);
}

/* Tablet+ container padding */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }
}