/*
 * CAIRN — Design Tokens officiels (Acte III, 0.5.0)
 * Voir docs/DESIGN_SYSTEM.md pour la documentation complète et la justification
 * de chaque choix. Source UNIQUE de vérité pour les couleurs, la typographie,
 * les espacements, les rayons, les ombres et les animations — aucune page ne
 * doit redéfinir ces valeurs à la main (même principe d'enrichissement
 * centralisé qu'ADR-008, appliqué ici au design plutôt qu'au code).
 *
 * Chargé par toutes les pages via <link rel="stylesheet" href="/static/css/cairn-tokens.css">.
 * Chaque page peut ensuite mapper ses propres variables historiques (--bg,
 * --card, --text...) sur ces tokens, le temps de la migration progressive
 * vers une bibliothèque de composants entièrement CAIRN (voir docs/
 * COMPONENT_LIBRARY.md pour l'état exact de cette migration).
 */

:root {
  /* ── Couleurs — la palette est volontairement restreinte. Le vert est
     réservé aux éléments importants ; l'ivoire et le blanc dominent. ── */
  --cairn-green: #234437;           /* Vert anglais — actions, accents importants */
  --cairn-bg: #F7F5F0;              /* Ivoire — fond principal, très lumineux */
  --cairn-stone: #ECE8E1;           /* Pierre — fond secondaire, cartes */
  --cairn-graphite: #1E2421;        /* Graphite — texte principal */
  --cairn-green-secondary: #6E8B79; /* Vert secondaire — texte de soutien, icônes */
  --cairn-terracotta: #B66A4B;      /* Accent discret — jamais dominant, jamais alarmant */

  /* Alias sémantiques — ce que chaque couleur SIGNIFIE, pas seulement sa valeur.
     Un futur changement de teinte ne doit jamais nécessiter de retoucher le HTML. */
  --cairn-surface: var(--cairn-bg);
  --cairn-surface-raised: #FFFFFF;
  --cairn-surface-subtle: var(--cairn-stone);
  --cairn-text-primary: var(--cairn-graphite);
  --cairn-text-secondary: color-mix(in srgb, var(--cairn-graphite) 65%, transparent);
  --cairn-text-muted: color-mix(in srgb, var(--cairn-graphite) 42%, transparent);
  --cairn-action: var(--cairn-green);
  --cairn-action-hover: color-mix(in srgb, var(--cairn-green) 88%, black);
  --cairn-accent: var(--cairn-terracotta);
  --cairn-border: color-mix(in srgb, var(--cairn-graphite) 10%, transparent);

  /* ── Typographie — le produit doit se lire comme un ouvrage, pas un logiciel ── */
  --cairn-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; /* titres, la phrase de compréhension */
  --cairn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;   /* sous-titres, texte, annotations */
  --cairn-font-numeric: 'IBM Plex Sans', 'Inter', -apple-system, sans-serif;   /* chiffres uniquement */

  --cairn-weight-light: 300;
  --cairn-weight-regular: 400;
  --cairn-weight-medium: 500;

  --cairn-text-display-lg: 2.75rem;  /* grand titre, "Avant de commencer" */
  --cairn-text-display: 2rem;        /* titre de section */
  --cairn-text-subtitle: 1.125rem;   /* sous-titre */
  --cairn-text-body: 1rem;           /* texte courant */
  --cairn-text-annotation: 0.8125rem; /* annotation, texte discret */
  --cairn-line-height-display: 1.25;
  --cairn-line-height-body: 1.65;    /* généreux — donne le temps de lire */

  /* ── Espacements — privilégier les grands espaces, ne jamais chercher à
     remplir l'écran. Le vide fait partie du design. ── */
  --cairn-space-3xs: 4px;
  --cairn-space-2xs: 8px;
  --cairn-space-xs: 12px;
  --cairn-space-sm: 20px;
  --cairn-space-md: 32px;
  --cairn-space-lg: 48px;
  --cairn-space-xl: 72px;
  --cairn-space-2xl: 104px;

  /* ── Rayons — légèrement arrondis, jamais anguleux ni trop ronds ── */
  --cairn-radius-sm: 10px;
  --cairn-radius-md: 16px;
  --cairn-radius-lg: 28px;
  --cairn-radius-full: 999px;

  /* ── Ombres — très discrètes, jamais spectaculaires ── */
  --cairn-shadow-card: 0 1px 2px rgba(30, 36, 33, 0.03), 0 6px 20px rgba(30, 36, 33, 0.05);
  --cairn-shadow-raised: 0 2px 4px rgba(30, 36, 33, 0.04), 0 12px 32px rgba(30, 36, 33, 0.08);

  /* ── Animations — très lentes, très douces, jamais démonstratives.
     Le calme est une fonctionnalité (voir docs/UI_PRINCIPLES.md). ── */
  --cairn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cairn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cairn-duration-fast: 260ms;
  --cairn-duration-normal: 520ms;
  --cairn-duration-slow: 900ms;
}

/* Dark Mode — préparé (voir la demande d'accessibilité), pas encore la valeur
   par défaut du produit. S'active via [data-theme="dark"] sur <html>, le même
   mécanisme déjà utilisé par toutes les pages existantes. */
:root[data-theme="dark"] {
  --cairn-surface: #141815;
  --cairn-surface-raised: #1B211D;
  --cairn-surface-subtle: #202722;
  --cairn-text-primary: #F2F0EA;
  --cairn-text-secondary: color-mix(in srgb, #F2F0EA 70%, transparent);
  --cairn-text-muted: color-mix(in srgb, #F2F0EA 45%, transparent);
  --cairn-action: #6E8B79;
  --cairn-action-hover: #86A392;
  --cairn-accent: #C98266;
  --cairn-border: color-mix(in srgb, #F2F0EA 12%, transparent);
}

/* Respect du système : réduit les animations si l'utilisateur le demande
   (accessibilité — voir docs/UI_PRINCIPLES.md, §Accessibilité). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Breakpoints — documentés ici (les media queries CSS ne peuvent pas lire
   de variable), à respecter par toute page qui adopte ce système :
     mobile  : jusqu'à 640px
     tablette: 641px – 1024px
     desktop : 1025px et plus
   ── */

/* ── Composants de base — un point de départ minimal et documenté (voir
   docs/COMPONENT_LIBRARY.md pour la bibliothèque complète et son état de
   migration). Classes préfixées `cairn-` pour ne jamais entrer en conflit
   avec les classes existantes pendant la migration progressive. ── */

.cairn-card {
  background: var(--cairn-surface-raised);
  border-radius: var(--cairn-radius-md);
  border: 1px solid var(--cairn-border);
  box-shadow: var(--cairn-shadow-card);
  padding: var(--cairn-space-md);
}

.cairn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cairn-space-2xs);
  padding: 14px 28px;
  border-radius: var(--cairn-radius-full);
  border: none;
  font-family: var(--cairn-font-sans);
  font-weight: var(--cairn-weight-medium);
  font-size: var(--cairn-text-body);
  cursor: pointer;
  transition: background-color var(--cairn-duration-fast) var(--cairn-ease),
              transform var(--cairn-duration-fast) var(--cairn-ease);
}
.cairn-btn-primary {
  background: var(--cairn-action);
  color: var(--cairn-surface);
}
.cairn-btn-primary:hover { background: var(--cairn-action-hover); }
.cairn-btn-secondary {
  background: transparent;
  color: var(--cairn-text-primary);
  border: 1px solid var(--cairn-border);
}

.cairn-display {
  font-family: var(--cairn-font-display);
  font-weight: var(--cairn-weight-regular);
  line-height: var(--cairn-line-height-display);
  color: var(--cairn-text-primary);
}
.cairn-body {
  font-family: var(--cairn-font-sans);
  font-weight: var(--cairn-weight-regular);
  line-height: var(--cairn-line-height-body);
  color: var(--cairn-text-secondary);
}
.cairn-annotation {
  font-family: var(--cairn-font-sans);
  font-weight: var(--cairn-weight-light);
  font-size: var(--cairn-text-annotation);
  color: var(--cairn-text-muted);
}
.cairn-numeric {
  font-family: var(--cairn-font-numeric);
}