/**
 * Port Capbreton — Design tokens
 *
 * Variables CSS exposées au :root. Aucun style appliqué directement par ce
 * fichier — il déclare uniquement les tokens utilisables par base.css,
 * components.css et templates.css.
 *
 * Référence : docs/design-system.md (sprint 1).
 * Version : 1.0 — 2026-05-14.
 */

:root {
  /* ────────────────────────────────────────────────────────────────────
   * Couleurs — palette principale (navy + saffron rafraîchis depuis l'existant)
   * ─────────────────────────────────────────────────────────────────── */
  --c-navy-900: #0d2b4d;
  --c-navy-700: #1a4570;
  --c-navy-500: #2f6699;
  --c-navy-100: #dfe9f3;

  --c-saffron-600: #c98a1d;
  --c-saffron-500: #e8a834;
  --c-saffron-300: #f4cb7a;
  --c-saffron-100: #fbeed1;

  /* Neutrals warm-tinted (éditorial) */
  --c-ink-900: #1a1d23;
  --c-ink-700: #2e3440;
  --c-ink-500: #525a6b;
  --c-ink-300: #9097a3;
  --c-ink-100: #d4d8dd;

  --c-paper-50: #fafaf7;
  --c-paper-100: #f4f3ee;
  --c-paper-200: #e8e6df;
  --c-white: #ffffff;

  /* Sémantique */
  --c-success: #2d8659;
  --c-warning: #d68b1d;
  --c-danger:  #b8312a;
  --c-info:    #2f6699;

  /* ────────────────────────────────────────────────────────────────────
   * Typographie
   * ─────────────────────────────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */
  --fs-6xl:  4.5rem;     /* 72px */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.015em;
  --ls-normal: 0;
  --ls-wide:    0.02em;

  /* ────────────────────────────────────────────────────────────────────
   * Espacement — base 4px
   * ─────────────────────────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.5rem;    /*  24px */
  --space-6:  2rem;      /*  32px */
  --space-8:  3rem;      /*  48px */
  --space-10: 4rem;      /*  64px */
  --space-12: 6rem;      /*  96px */
  --space-16: 8rem;      /* 128px */
  --space-20: 10rem;     /* 160px */

  /* ────────────────────────────────────────────────────────────────────
   * Layout
   * ─────────────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-narrow: 720px;          /* mesure lecture confortable */
  --container-padding-x: var(--space-4);

  /* ────────────────────────────────────────────────────────────────────
   * Rayons
   * ─────────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────────────────────────────────
   * Ombres — teinte navy plutôt que noire pour cohérence palette
   * ─────────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px 0 rgba(13, 43, 77, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(13, 43, 77, 0.08), 0 2px 4px -2px rgba(13, 43, 77, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(13, 43, 77, 0.08), 0 4px 6px -4px rgba(13, 43, 77, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(13, 43, 77, 0.1), 0 8px 10px -6px rgba(13, 43, 77, 0.05);
  --shadow-focus: 0 0 0 3px rgba(232, 168, 52, 0.4);

  /* ────────────────────────────────────────────────────────────────────
   * Transitions
   * ─────────────────────────────────────────────────────────────────── */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ────────────────────────────────────────────────────────────────────
   * Z-index — échelle modulaire
   * ─────────────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* Container padding scale */
@media (min-width: 768px) {
  :root { --container-padding-x: var(--space-6); }
}
@media (min-width: 1024px) {
  :root { --container-padding-x: var(--space-8); }
}

/* Respect prefers-reduced-motion (déclaré dans tokens pour cohérence) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}