/* ==========================================================================
   Coterya — tokens.css | Emerald Ledger Design System
   Source: DESIGN.md + stitch_coterya_design/tailwind.config
   Importé dans templates/base.html avant Tailwind CDN
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  /* ── Surfaces & Background ── */
  --color-surface: #f8f9ff;
  --color-surface-dim: #cbdbf5;
  --color-surface-bright: #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-surface-variant: #d3e4fe;
  --color-surface-tint: #2d6a48;
  --color-background: #f8f9ff;
  --color-on-background: #0b1c30;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #404942;
  --color-inverse-surface: #213145;
  --color-inverse-on-surface: #eaf1ff;
  --color-outline: #707971;
  --color-outline-variant: #c0c9c0;

  /* ── Primary / Brand ── */
  --color-primary: #003820;
  --color-on-primary: #ffffff;
  --color-primary-container: #0f5132;
  --color-on-primary-container: #84c39b;
  --color-inverse-primary: #95d4ac;
  --color-primary-fixed: #b0f1c7;
  --color-primary-fixed-dim: #95d4ac;
  --color-on-primary-fixed: #002111;
  --color-on-primary-fixed-variant: #0f5132;

  /* ── Secondary ── */
  --color-secondary: #565e74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #dae2fd;
  --color-on-secondary-container: #5c647a;
  --color-secondary-fixed: #dae2fd;
  --color-secondary-fixed-dim: #bec6e0;
  --color-on-secondary-fixed: #131b2e;
  --color-on-secondary-fixed-variant: #3f465c;

  /* ── Tertiary ── */
  --color-tertiary: #4d2600;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #6e3900;
  --color-on-tertiary-container: #ff9e47;
  --color-tertiary-fixed: #ffdcc3;
  --color-tertiary-fixed-dim: #ffb77d;
  --color-on-tertiary-fixed: #2f1500;
  --color-on-tertiary-fixed-variant: #6e3900;

  /* ── Error ── */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* ── Functional status (DESIGN.md § Colors) ── */
  --color-status-a-jour-solid: #198754;
  --color-status-a-jour-bg: #ecfdf5;
  --color-status-a-jour-border: #a7f3d0;
  --color-status-a-jour-text: #0f5132;
  --color-status-en-retard-solid: #dc2626;
  --color-status-en-retard-bg: #fef2f2;
  --color-status-en-retard-border: #fecaca;
  --color-status-en-retard-text: #991b1b;
  --color-status-a-avance-solid: #0284c7;
  --color-status-a-avance-bg: #f0f9ff;
  --color-status-a-avance-border: #bae6fd;
  --color-status-a-avance-text: #075985;
  --color-status-a-venir-solid: #64748b;
  --color-status-a-venir-bg: #f1f5f9;
  --color-status-a-venir-border: #cbd5e1;
  --color-status-a-venir-text: #475569;
  --color-status-alert-solid: #d97706;
  --color-status-alert-bg: #fffbeb;
  --color-status-alert-border: #fde68a;

  /* ── Neutrals / Slate ── */
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-500: #64748b;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;

  /* ── Typography tokens ── */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* ── Radius ── */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  /* Card-specific (DESIGN.md Shapes) */
  --radius-card: 1rem;
  --radius-input: 0.5rem;
  --radius-badge: 9999px;

  /* ── Spacing ── */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --gutter-mobile: 1rem;
  --gutter-tablet: 1.5rem;
  --margin-mobile: 1rem;
  --margin-tablet: 2rem;
  --nav-bottom-height: 4.25rem; /* 68px + safe-area handled in layout */

  /* ── Elevation (shadows) ── */
  --elevation-1: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  --elevation-2: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --elevation-3: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

  /* ── Canvas ── */
  --app-bg: #f8fafc; /* DESIGN.md Level 0 alt used in base.html body */
}

/* Base resets aligned with DESIGN.md */
* { scrollbar-width: thin; }
html { scroll-behavior: smooth; }

/* Utility: avoid Tailwind preflight conflict — keep native font vars */