/* ==========================================================================
   Orilyt Design System — Shared Tokens
   tokens.css — loaded on ALL pages before any other stylesheet.
   ========================================================================== */

/* ---------- @font-face — local fonts only, NO CDN ---------- */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces/fraunces-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces/fraunces-900-italic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces/fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces/fraunces-700-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans/dm-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans/dm-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans/dm-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- CSS Custom Properties ---------- */

:root {
  /* Palette principale (shell dark) */
  --navy:          #040C1C;
  --navy-mid:      #091628;
  --navy-card:     #0D1F3C;
  --navy-card2:    #102240;
  --border:        #1C3560;
  --border-soft:   #162B4A;
  --blue:          #2563EB;
  --blue-dark:     #1d4ed8;
  --blue-light:    #3B82F6;
  --blue-dim:      rgba(37,99,235,0.12);
  --teal:          #0EA5E9;

  /* Statuts */
  --green:         #10B981;
  --yellow:        #F59E0B;
  --red:           #EF4444;
  --orange:        #F97316;

  /* Texte (fond dark) */
  --text-primary:  #EFF6FF;
  --text-muted:    #a3c4e6;
  --text-muted2:   #94a3b8;

  /* Texte (fond clair, articles/docs) */
  --text-body:     #1A1A2E;
  --text-body-mid: #374151;
  --text-body-muted: #6B7280;

  /* Fonds clairs */
  --bg-light:      #FFFFFF;
  --bg-light-alt:  #F8FAFF;
  --bg-light-card: #EFF6FF;

  /* Typographie */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Rayons */
  --r-sm:  6px;   --r-md: 10px;
  --r-lg:  16px;  --r-xl: 20px;  --r-full: 100px;
}

/* ---------- Focus visible (WCAG 2.1.1 / 2.4.7) ---------- */

:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Shared badge component ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.3px; white-space: nowrap;
}
.badge-success { background:rgba(16,185,129,.12); color:#10B981; border:1px solid rgba(16,185,129,.25); }
.badge-warning { background:rgba(245,158,11,.12); color:#F59E0B; border:1px solid rgba(245,158,11,.25); }
.badge-error   { background:rgba(239,68,68,.12);  color:#EF4444; border:1px solid rgba(239,68,68,.25); }
.badge-info    { background:rgba(37,99,235,.12);  color:#3B82F6; border:1px solid rgba(37,99,235,.25); }
.badge-neutral { background:rgba(107,143,191,.1); color:#6B8FBF; border:1px solid rgba(107,143,191,.2); }

/* ---------- Toast notifications ---------- */

.toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:10px; z-index:9999;
}
.toast {
  padding:12px 18px; border-radius:var(--r-md);
  font-size:0.8125rem; font-weight:500;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
}
.toast--success { background:#ECFDF5; color:#064E3B; border-left:4px solid var(--green); }
.toast--error   { background:#FEF2F2; color:#7F1D1D; border-left:4px solid var(--red); }
.toast--info    { background:#EFF6FF; color:#1E3A6E; border-left:4px solid var(--blue); }
@keyframes toastIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}