/* ============================================================
   CONCOURS ARMÉE — DESIGN SYSTEM · TOKENS (app candidat)
   ------------------------------------------------------------
   Porté du handoff de reskin (design_handoff_app_reskin :
   design-system/tokens/{fonts,primitives,semantic}.css).
   Couche de VARIABLES uniquement — aucune règle de mise en page,
   aucun reset (l'app garde le sien dans dashboard.css). Les
   sélecteurs existants (.dash-*) consomment ces rôles.

   Ordre : fontes → primitives (--ca-*) → sémantique (rôles).
   Thème posé sur la racine via [data-theme="dark|light"].
   App Concours Armée = data-theme="dark" (cf. ADR 0017).
   Ne pas dupliquer ces hex ailleurs : source de vérité unique.
   ============================================================ */

/* ---- Fontes : Geist + Geist Mono (Google Fonts, comme la vitrine) ---- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

/* ============================================================
   PRIMITIVES (couche 1/2) — valeurs brutes, indépendantes du thème
   ============================================================ */
:root {
  /* ---- Ink / anthracite ---- */
  --ca-ink-950: #0B0C0E;
  --ca-ink-900: #131417;
  --ca-ink-850: #16181C;
  --ca-ink-800: #1A1C20;
  --ca-ink-700: #25282E;
  --ca-ink-600: #353941;
  --ca-ink-500: #4C515A;
  --ca-ink-400: #6B7079;
  --ca-ink-300: #969BA3;
  --ca-ink-200: #C2C6CC;
  --ca-ink-100: #E2E4E8;
  --ca-ink-50:  #F2F3F5;
  --ca-ink-25:  #F8F9FA;
  --ca-white:   #FFFFFF;
  --ca-black:   #050506;

  /* ---- Or / laiton champagne (JAMAIS jaune) ---- */
  --ca-gold-900: #5E481A;
  --ca-gold-800: #7A5E22;
  --ca-gold-700: #97762C;
  --ca-gold-600: #B08A38;
  --ca-gold-500: #C8A24C;
  --ca-gold-400: #D7B566;
  --ca-gold-300: #E4CB8E;
  --ca-gold-200: #EFDEB6;
  --ca-gold-100: #F7EED6;
  --ca-gold-50:  #FBF7EB;

  /* ---- Olive tactique ---- */
  --ca-olive-700: #41452E;
  --ca-olive-500: #6B7044;
  --ca-olive-300: #9DA274;

  /* ---- Statuts ---- */
  --ca-green-500: #4F9D69;
  --ca-green-100: #18261D;
  --ca-amber-500: #D9A441;
  --ca-amber-100: #2A2113;
  --ca-red-500:   #C7503C;
  --ca-red-100:   #2A1612;
  --ca-blue-500:  #5B8DB8;
  --ca-blue-100:  #14202A;

  /* ---- Typographie ---- */
  --ca-font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ca-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ca-text-display: 5rem;
  --ca-text-h1: 3.25rem;
  --ca-text-h2: 2.5rem;
  --ca-text-h3: 1.625rem;
  --ca-text-h4: 1.25rem;
  --ca-text-xl:   1.375rem;
  --ca-text-lg:   1.1875rem;
  --ca-text-md:   1.0625rem;
  --ca-text-base: 1rem;
  --ca-text-sm:   0.875rem;
  --ca-text-xs:   0.75rem;

  --ca-weight-regular:  400;
  --ca-weight-medium:   500;
  --ca-weight-semibold: 600;
  --ca-weight-bold:     700;
  --ca-weight-black:    800;

  --ca-leading-tight:   1.04;
  --ca-leading-snug:    1.18;
  --ca-leading-normal:  1.5;
  --ca-leading-relaxed: 1.65;

  --ca-tracking-display: -0.025em;
  --ca-tracking-tight:   -0.012em;
  --ca-tracking-normal:  0;
  --ca-tracking-wide:    0.04em;
  --ca-tracking-label:   0.16em;

  /* ---- Rayons ---- */
  --ca-radius-xs:  3px;
  --ca-radius-sm:  6px;
  --ca-radius-md:  10px;
  --ca-radius-lg:  16px;
  --ca-radius-xl:  24px;
  --ca-radius-2xl: 32px;
  --ca-radius-pill: 999px;
  --ca-radius-full: 50%;

  /* ---- Espacement (grille 4px) ---- */
  --ca-space-1:  0.25rem;
  --ca-space-2:  0.5rem;
  --ca-space-3:  0.75rem;
  --ca-space-4:  1rem;
  --ca-space-5:  1.25rem;
  --ca-space-6:  1.5rem;
  --ca-space-8:  2rem;
  --ca-space-10: 2.5rem;
  --ca-space-12: 3rem;
  --ca-space-16: 4rem;

  /* ---- Ombres brutes ---- */
  --ca-shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ca-shadow-dark-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --ca-shadow-dark-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --ca-shadow-dark-xl: 0 32px 80px rgba(0, 0, 0, 0.60);
  --ca-shadow-light-sm: 0 1px 2px rgba(16, 18, 22, 0.06);
  --ca-shadow-light-md: 0 8px 24px rgba(16, 18, 22, 0.10);
  --ca-shadow-light-lg: 0 24px 60px rgba(16, 18, 22, 0.14);
  --ca-shadow-light-xl: 0 32px 80px rgba(16, 18, 22, 0.18);
  --ca-glow-gold: 0 0 0 1px rgba(200, 162, 76, 0.35), 0 10px 40px rgba(200, 162, 76, 0.18);

  /* ---- Motion ---- */
  --ca-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ca-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ca-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ca-duration-fast:   140ms;
  --ca-duration-base:   240ms;
  --ca-duration-slow:   420ms;
  --ca-duration-slower: 640ms;
}

/* ============================================================
   SÉMANTIQUE (couche 2/2) — rôles. C'est ici que se décide clair/sombre.
   ============================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:        var(--ca-ink-950);
  --surface-raised:      var(--ca-ink-900);
  --surface-card:        var(--ca-ink-800);
  --surface-card-hover:  var(--ca-ink-700);
  --surface-inset:       var(--ca-ink-850);

  --text-primary:   #F4F5F7;
  --text-secondary: var(--ca-ink-300);
  --text-muted:     var(--ca-ink-400);
  --text-gold:      var(--ca-gold-400);
  --text-on-gold:   #1A1404;

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-gold:    var(--ca-gold-500);

  /* Voiles de survol/press (remplacent les rgba(255,255,255,…) en dur,
     invisibles sur surfaces claires — cf. ADR 0027) */
  --overlay-faint:  rgba(255, 255, 255, 0.04);
  --overlay-hover:  rgba(255, 255, 255, 0.06);
  --overlay-press:  rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.10);

  --accent:        var(--ca-gold-500);
  --accent-hover:  var(--ca-gold-400);
  --accent-active: var(--ca-gold-600);
  --accent-soft:   rgba(200, 162, 76, 0.12);

  --focus-ring: rgba(200, 162, 76, 0.55);
  --ring-focus: 0 0 0 3px var(--focus-ring);

  --shadow-sm: var(--ca-shadow-dark-sm);
  --shadow-md: var(--ca-shadow-dark-md);
  --shadow-lg: var(--ca-shadow-dark-lg);
  --shadow-xl: var(--ca-shadow-dark-xl);
  --glow-gold: var(--ca-glow-gold);
  --inset-hairline: inset 0 0 0 1px var(--border-subtle);

  --status-success:    var(--ca-green-500);
  --status-success-bg: var(--ca-green-100);
  --status-warning:    var(--ca-amber-500);
  --status-warning-bg: var(--ca-amber-100);
  --status-danger:     var(--ca-red-500);
  --status-danger-bg:  var(--ca-red-100);
  --status-info:       var(--ca-blue-500);
  --status-info-bg:    var(--ca-blue-100);
}

[data-theme="light"] {
  color-scheme: light;

  --surface-page:        var(--ca-ink-25);
  --surface-raised:      var(--ca-ink-50);
  --surface-card:        var(--ca-white);
  --surface-card-hover:  var(--ca-ink-50);
  --surface-inset:       var(--ca-ink-100);

  --text-primary:   #14161A;
  --text-secondary: #4A4F58;
  --text-muted:     #777C85;
  --text-gold:      var(--ca-gold-700);
  --text-on-gold:   #1A1404;

  --border-subtle:  rgba(10, 12, 16, 0.08);
  --border-default: rgba(10, 12, 16, 0.12);
  --border-strong:  rgba(10, 12, 16, 0.18);
  --border-gold:    var(--ca-gold-600);

  --overlay-faint:  rgba(10, 12, 16, 0.03);
  --overlay-hover:  rgba(10, 12, 16, 0.05);
  --overlay-press:  rgba(10, 12, 16, 0.06);
  --overlay-strong: rgba(10, 12, 16, 0.08);

  --accent:        var(--ca-gold-500);
  --accent-hover:  var(--ca-gold-600);
  --accent-active: var(--ca-gold-700);
  --accent-soft:   rgba(200, 162, 76, 0.14);

  --focus-ring: rgba(200, 162, 76, 0.60);
  --ring-focus: 0 0 0 3px var(--focus-ring);

  --shadow-sm: var(--ca-shadow-light-sm);
  --shadow-md: var(--ca-shadow-light-md);
  --shadow-lg: var(--ca-shadow-light-lg);
  --shadow-xl: var(--ca-shadow-light-xl);
  --glow-gold: var(--ca-glow-gold);
  --inset-hairline: inset 0 0 0 1px var(--border-subtle);

  --status-success:    #2F7D4F;
  --status-success-bg: #E8F3EC;
  --status-warning:    #9A6E16;
  --status-warning-bg: #FBF1DC;
  --status-danger:     #B23B28;
  --status-danger-bg:  #FBEAE6;
  --status-info:       #2F6B96;
  --status-info-bg:    #E7F0F7;
}

/* ---- Alias de rayon / typo / motion (indépendants du thème) ---- */
:root {
  --radius-xs:  var(--ca-radius-xs);
  --radius-sm:  var(--ca-radius-sm);
  --radius-md:  var(--ca-radius-md);
  --radius-lg:  var(--ca-radius-lg);
  --radius-xl:  var(--ca-radius-xl);
  --radius-2xl: var(--ca-radius-2xl);
  --radius-pill: var(--ca-radius-pill);

  --font-sans: var(--ca-font-sans);
  --font-mono: var(--ca-font-mono);

  --ease-standard: var(--ca-ease-standard);
  --ease-out:      var(--ca-ease-out);
  --ease-in:       var(--ca-ease-in);
  --duration-fast:   var(--ca-duration-fast);
  --duration-base:   var(--ca-duration-base);
  --duration-slow:   var(--ca-duration-slow);
  --duration-slower: var(--ca-duration-slower);
}