/* =====================================================
   ALARYS DESIGN TOKENS — source de vérité unique
   Importé par : vitrine, login pro, login client, espace pro, espace client
   Phase 0 — Refactor Espace Personnel (2026-05)
   ===================================================== */

:root {
  /* === COUCHE 1 — INVARIANTS ALARYS (jamais override) === */

  /* Typo */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    Inter, -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Neutres chauds (signature Alarys, alignés sur la vitrine) */
  --neutral-fond:         #FAFAF8;
  --neutral-surface:      #FFFFFF;
  --neutral-bordure:      #E8E6E0;
  --neutral-bordure-fort: #D6D3CC;
  --neutral-texte:        #1C1C1A;
  --neutral-muted:        #7A7773;
  --neutral-faible:       #A8A5A0;

  /* Espacement (échelle 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(28,28,26,0.04);
  --shadow-card:  0 1px 4px rgba(28,28,26,0.06);
  --shadow-md:    0 4px 12px rgba(28,28,26,0.08);
  --shadow-modal: 0 8px 32px rgba(28,28,26,0.12);

  /* États sémantiques (immuables, pas brandable) — résout les top 3 hex en dur détectés */
  --semantic-success:    #065f46;
  --semantic-success-bg: #d1fae5;
  --semantic-warning:    #92400e;
  --semantic-warning-bg: #fef3c7;
  --semantic-danger:     #dc2626;
  --semantic-danger-bg:  #fef2f2;
  --semantic-info:       #2563eb;
  --semantic-info-bg:    #dbeafe;

  /* Tailles d'input */
  --input-h:    44px;
  --input-h-sm: 36px;

  /* === COUCHE 2 — BRAND (défaut Alarys, override par cabinet) === */

  --brand-primary:         #C84B6E;
  --brand-primary-hover:   #A93E5C;
  --brand-primary-soft:    #FCE8EE;
  --brand-secondary:       #1C1C1A;
  --brand-secondary-hover: #000000;

  /* Brand tints — dérivés dynamiquement de --brand-primary via color-mix.
     Usage : badges actifs brand-aware, hover backgrounds, accents subtils.
     Convention : -soft = statique Alarys, -tint = brand-aware dynamique. */
  --brand-primary-tint:        color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-primary-tint-strong: color-mix(in srgb, var(--brand-primary) 18%, transparent);

  /* === COUCHE 3 — TOKENS SÉMANTIQUES (utilisés par les composants) === */

  /* Boutons */
  --btn-primary-bg:       var(--brand-primary);
  --btn-primary-bg-hover: var(--brand-primary-hover);
  --btn-primary-text:     var(--neutral-surface);
  --btn-secondary-bg:     transparent;
  --btn-secondary-border: var(--neutral-bordure);
  --btn-secondary-text:   var(--neutral-texte);
  --btn-secondary-hover:  var(--neutral-fond);

  /* Liens */
  --link-color:       var(--brand-primary);
  --link-color-hover: var(--brand-primary-hover);

  /* Sidebar (espace client) */
  --sidebar-bg:           var(--neutral-surface);
  --sidebar-border:       var(--neutral-bordure);
  --sidebar-text:         var(--neutral-texte);
  --sidebar-text-muted:   var(--neutral-muted);
  --sidebar-active-bg:    var(--brand-primary-soft);
  --sidebar-active-text:  var(--brand-primary);
  --sidebar-hover-bg:     var(--neutral-fond);

  /* Cards */
  --card-bg:     var(--neutral-surface);
  --card-border: var(--neutral-bordure);
  --card-shadow: var(--shadow-card);

  /* Inputs */
  --input-bg:           var(--neutral-surface);
  --input-border:       var(--neutral-bordure);
  --input-border-focus: var(--brand-primary);
  --input-text:         var(--neutral-texte);
  --input-placeholder:  var(--neutral-muted);

  /* Badges */
  --badge-pending-bg:   var(--semantic-warning-bg);
  --badge-pending-text: var(--semantic-warning);
  --badge-paid-bg:      var(--semantic-success-bg);
  --badge-paid-text:    var(--semantic-success);
  --badge-info-bg:      var(--brand-primary-soft);
  --badge-info-text:    var(--brand-primary);
  --badge-muted-bg:     var(--neutral-fond);
  --badge-muted-text:   var(--neutral-muted);

  /* Layout app */
  --app-bg:            var(--neutral-fond);
  --app-content-max-w: 1100px;
  --app-sidebar-w:     240px;
}