/**
 * Design Tokens — Civic Authority Theme (FCDDV Central)
 * Architecture en 3 couches : Core -> Semantic -> Component (alignee sur Lenoir)
 *
 * Identite : registre national, ton institutionnel, autorite. Distinct de Lenoir
 * Notarial (qui est Editorial Refined burgundy/gold) pour eviter la confusion
 * de marque quand un cabinet utilise les 2 outils en parallele.
 *
 * Regles d'usage (R1) :
 *   - Modules CSS : utiliser UNIQUEMENT la couche semantique (--color-primary, etc.)
 *   - Couche core (--color-indigo-500, etc.) : reservee a la definition de la couche semantique
 *   - Couche component : surcharge specifique par composant
 */

/* ============================================
   LAYER 1 : CORE TOKENS (Primitives)
   ============================================ */

:root {
  /* === INDIGO SCALE (PRIMARY) ===
     Institutionnel, autorite, civic. */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #3730a3;  /* PRIMARY */
  --color-indigo-800: #312e81;
  --color-indigo-900: #1e1b4b;

  /* === SAFFRON SCALE (SECONDARY) ===
     Accent chaud, resonance Cote d'Ivoire (orange du drapeau). */
  --color-saffron-50: #fff7ed;
  --color-saffron-100: #ffedd5;
  --color-saffron-200: #fed7aa;
  --color-saffron-300: #fdba74;
  --color-saffron-400: #fb923c;
  --color-saffron-500: #f97316;
  --color-saffron-600: #ea580c;
  --color-saffron-700: #c2410c;  /* SECONDARY */
  --color-saffron-800: #9a3412;
  --color-saffron-900: #7c2d12;

  /* === EMERALD (4ème couleur de marque) ===
     Vocation sémantique : positif, validé, actif, complété.
     Distinct de la simple couleur d'état "success" — fait partie de la palette
     de marque (avec indigo, saffron, slate). Évite l'orange+vert+blanc cote-à-cote
     pour ne pas évoquer le drapeau CI hors contexte officiel. */
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-600-rgb: 5, 150, 105;
  --color-emerald-700-rgb: 4, 120, 87;

  /* SUCCESS = alias historique d'EMERALD (compat tokens existants) */
  --color-success-50: var(--color-emerald-50);
  --color-success-100: var(--color-emerald-100);
  --color-success-200: var(--color-emerald-200);
  --color-success-300: var(--color-emerald-300);
  --color-success-400: var(--color-emerald-400);
  --color-success-500: var(--color-emerald-500);
  --color-success-600: var(--color-emerald-600);
  --color-success-700: var(--color-emerald-700);
  --color-success-800: var(--color-emerald-800);
  --color-success-900: var(--color-emerald-900);
  --color-success-600-rgb: var(--color-emerald-600-rgb);

  /* === DANGER (RED) === */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;

  /* === WARNING (AMBER) === */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* === INFO (SKY) ===
     Distinct du primary (indigo) pour eviter la confusion. */
  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-900: #0c4a6e;

  /* === SLATE (NEUTRALS) ===
     Cool, institutionnel. Distinct du gray Lenoir (warm). */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* === BASE COLORS === */
  --color-white: #ffffff;
  --color-black: #000000;

  /* === RGB DECOMPOSITIONS (pour rgba en overlays/shadows) === */
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;
  --color-indigo-700-rgb: 55, 48, 163;
  --color-saffron-700-rgb: 194, 65, 12;
  /* --color-success-600-rgb : déjà aliasé sur emerald-700-rgb plus haut */
  --color-danger-600-rgb: 220, 38, 38;
  --color-warning-600-rgb: 217, 119, 6;
  --color-info-600-rgb: 2, 132, 199;
  --color-slate-900-rgb: 15, 23, 42;
  --color-slate-50-rgb: 248, 250, 252;

  /* ============================================
     LAYER 2 : SEMANTIC TOKENS
     Usage des modules CSS : ces tokens uniquement
     ============================================ */

  /* === BRAND (Primary / Secondary) === */
  --color-primary: var(--color-indigo-700);
  --color-primary-hover: var(--color-indigo-800);
  --color-primary-active: var(--color-indigo-900);
  --color-primary-emphasis: var(--color-indigo-800);
  --color-primary-subtle: var(--color-indigo-100);
  --color-primary-muted: var(--color-indigo-200);

  --color-secondary: var(--color-saffron-700);
  --color-secondary-hover: var(--color-saffron-800);
  --color-secondary-subtle: var(--color-saffron-100);

  /* === TERTIARY (EMERALD) — 4ème couleur de marque ===
     Voix sémantique : positif, validé, actif, complété.
     À utiliser ponctuellement pour marquer les états bénéfiques —
     pas comme accent décoratif partout. */
  --color-tertiary: var(--color-emerald-700);
  --color-tertiary-hover: var(--color-emerald-800);
  --color-tertiary-subtle: var(--color-emerald-100);
  --color-tertiary-muted: var(--color-emerald-200);
  --color-tertiary-rgb: var(--color-emerald-700-rgb);

  --color-positive: var(--color-emerald-700);
  --color-validated: var(--color-emerald-700);
  --color-active-mark: var(--color-emerald-600);

  /* === MODULE ACCENT ===
     Defaut : saffron (registre, public-facing). Modules futurs (admin staff,
     dashboards reporting) pourront overrider via [data-module="..."]. */
  --color-module-accent: var(--color-saffron-700);
  --color-module-accent-hover: var(--color-saffron-800);
  --color-module-accent-subtle: var(--color-saffron-100);
  --color-module-accent-rgb: var(--color-saffron-700-rgb);

  /* === STATUS === */
  --color-success: var(--color-success-700);
  --color-success-light: var(--color-success-500);
  --color-danger: var(--color-danger-700);
  --color-danger-light: var(--color-danger-500);
  --color-warning: var(--color-warning-700);
  --color-warning-light: var(--color-warning-500);
  --color-info: var(--color-info-700);
  --color-info-light: var(--color-info-500);

  /* === SURFACES === */
  --surface-base: var(--color-slate-50);
  --surface-elevated: #ffffff;
  --surface-secondary: var(--color-slate-100);
  --surface-hover: var(--color-slate-100);
  --surface-active: var(--color-slate-200);
  --surface-disabled: var(--color-slate-100);
  --surface-overlay: rgba(var(--color-slate-900-rgb), 0.85);
  --surface-primary-subtle: var(--color-indigo-50);
  --surface-primary-muted: var(--color-indigo-100);
  --surface-module-subtle: var(--color-module-accent-subtle);
  --overlay-blur: blur(8px);

  /* === TEXT === */
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-600);
  --text-tertiary: var(--color-slate-400);
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-on-accent: #ffffff;

  /* === BORDERS === */
  --border-default: var(--color-slate-200);
  --border-subtle: var(--color-slate-100);
  --border-primary: var(--color-indigo-200);
  --border-primary-subtle: var(--color-indigo-100);
  --border-primary-strong: var(--color-indigo-400);
  --border-hover: var(--color-slate-300);
  --border-focus: var(--color-primary);
  --border-input: var(--color-slate-300);
  --border-error: var(--color-danger-600);
  --border-success: var(--color-success-600);
  --border-accent-width: 3px;

  /* ============================================
     LAYER 3 : SPACING / TYPOGRAPHY / RADIUS / SHADOWS / MOTION
     ============================================ */

  /* === SPACING === */
  --spacing-3xs: 0.0625rem;
  --spacing-2xs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-xs-sm: 0.375rem;
  --spacing-sm: 0.5rem;
  --spacing-sm-md: 0.75rem;
  --spacing-md: 1rem;
  --spacing-md-lg: 1.25rem;
  --spacing-lg: 1.5rem;
  --spacing-lg-xl: 1.75rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;
  --spacing-5xl: 5rem;

  /* === TYPOGRAPHY ===
     Distinction Lenoir : Playfair Display (vs Cormorant) pour le display.
     Inter en commun pour la coherence developpeur. */
  --font-primary: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", monospace;
  --font-body: var(--font-primary);

  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-xs-sm: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-xl-2xl: 1.375rem;
  --text-2xl: 1.5rem;
  --text-2xl-3xl: 1.75rem;
  --text-3xl: 1.875rem;
  --text-3xl-4xl: 2rem;
  --text-4xl: 2.25rem;
  --text-4xl-5xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-display: 3rem;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === BORDER RADIUS === */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 3px rgba(var(--color-black-rgb), 0.08);
  --shadow-md: 0 4px 12px rgba(var(--color-black-rgb), 0.1);
  --shadow-lg: 0 8px 24px rgba(var(--color-black-rgb), 0.12);
  --shadow-xl: 0 12px 32px rgba(var(--color-black-rgb), 0.16);
  --shadow-card: 0 2px 8px rgba(var(--color-black-rgb), 0.08);
  --shadow-card-hover: 0 4px 16px rgba(var(--color-black-rgb), 0.12);
  --shadow-indigo: 0 4px 12px rgba(var(--color-indigo-700-rgb), 0.18);
  --shadow-saffron: 0 4px 12px rgba(var(--color-saffron-700-rgb), 0.18);
  --shadow-focus-ring: 0 0 0 3px rgba(var(--color-indigo-700-rgb), 0.25);

  /* === MOTION === */
  --duration-short: 150ms;
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-base: 250ms;
  --duration-long: 500ms;
  --duration-slow: 400ms;

  --ease-snappy: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base: var(--duration-base) var(--easing-default);
  --transition-fast: var(--duration-fast) var(--easing-default);

  /* === EFFECTS === */
  --blur-md: blur(8px);

  /* === Z-INDEX === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-overlay: 400;
  --z-toast: 500;

  /* === CONTAINERS === */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* === LAYOUT (app-shell + portal-shell structurels) === */
  --layout-sidebar-width: 240px;
  --layout-header-height: 64px;
  --layout-mobile-breakpoint: 768px;  /* @media ne supporte pas custom props, usage doc */

  /* ============================================
     LAYER 4 : COMPONENT TOKENS
     ============================================ */

  /* --- Buttons --- */
  --btn-padding-y: var(--spacing-sm-md);
  --btn-padding-x: var(--spacing-lg);
  --btn-padding-sm-y: var(--spacing-sm);
  --btn-padding-sm-x: var(--spacing-md);
  --btn-padding-lg-y: var(--spacing-md);
  --btn-padding-lg-x: var(--spacing-xl);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-sm);
  --btn-font-weight: var(--font-semibold);
  --btn-transition: all var(--duration-base) var(--easing-default);

  /* --- Cards --- */
  --card-bg: var(--surface-elevated);
  --card-border: 1px solid var(--border-default);
  --card-radius: var(--radius-lg);
  --card-padding: var(--spacing-xl);
  --card-padding-compact: var(--spacing-lg);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  /* --- Inputs / Forms --- */
  --input-bg: var(--surface-elevated);
  --input-border: 1px solid var(--border-input);
  --input-radius: var(--radius-md);
  --input-padding-y: var(--spacing-sm-md);
  --input-padding-x: var(--spacing-md);
  --input-font-size: var(--text-sm);
  --input-focus-ring: 0 0 0 3px rgba(var(--color-indigo-700-rgb), 0.12);
  --input-focus-border: var(--color-primary);

  /* --- Badges --- */
  --badge-padding-y: var(--spacing-xs);
  --badge-padding-x: var(--spacing-sm-md);
  --badge-radius: var(--radius-md);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-semibold);

  /* --- Tables --- */
  --table-radius: var(--radius-lg);
  --table-header-bg: var(--surface-secondary);
  --table-header-border: 1px solid var(--border-default);
  --table-row-border: 1px solid var(--border-subtle);
  --table-row-hover: var(--surface-hover);
}

/* ============================================
   MODULE ACCENTS — scoped via <body data-module="...">
   Permettent a chaque module de redefinir son accent secondaire
   sans toucher au primary indigo (qui reste cross-module).
   ============================================ */

[data-module="staff"] {
  /* Back-office Association : accent indigo profond pour souligner l'autorite. */
  --color-module-accent: var(--color-indigo-700);
  --color-module-accent-hover: var(--color-indigo-800);
  --color-module-accent-subtle: var(--color-indigo-100);
  --color-module-accent-rgb: var(--color-indigo-700-rgb);
  --surface-module-subtle: var(--color-indigo-50);
}

[data-module="cabinet"] {
  /* Portail web cabinet : accent saffron pour distinguer du back-office. */
  --color-module-accent: var(--color-saffron-700);
  --color-module-accent-hover: var(--color-saffron-800);
  --color-module-accent-subtle: var(--color-saffron-100);
  --color-module-accent-rgb: var(--color-saffron-700-rgb);
  --surface-module-subtle: var(--color-saffron-50);
}