/*
  FICHIER      : app/static/css/design-tokens.css
  RÔLE         : Design tokens Chronostone (Phase P0) — alignés sur le site public chronostone.fr.
  RESPONSABILITÉ : Source unique des variables de design (couleur, typo Montserrat, rayons,
                   ombres douces, easings Emil, espacements). Aucune logique. N'écrase PAS les
                   classes existantes (csv-*) — fournit des tokens + primitives optionnelles cs-*.
  SOURCES      : chronostone.fr (front) — palette/typo extraites ; emil-design-eng (easings).
  INTERDICTIONS : Pas de refonte globale ici. Pas d'emoji. Chargé pour l'instant par le cockpit.
  STATUT       : P0 — actif (cockpit). Vocation : devenir la base de toute l'app.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Couleur (repris du front) ─────────────────────────────────────────── */
  --cs-bg:           #F7F8FA;
  --cs-surface:      #FFFFFF;
  --cs-surface-2:    #F2F4F7;
  --cs-text:         #2C3035;   /* GunMetal */
  --cs-text-muted:   #6B7280;
  --cs-text-faint:   #9CA3AF;
  --cs-border:       #E6E9EE;
  --cs-border-strong:#D6DBE2;

  /* Accent primaire = bleu profond du front */
  --cs-primary:      #1A7ABF;
  --cs-primary-hover:#1668A4;
  --cs-primary-press:#125789;
  --cs-primary-soft: #EDF5FD;   /* tint clair (fonds, hovers) */
  --cs-primary-light:#A4D8FF;
  --cs-on-primary:   #FFFFFF;

  /* IcyBlue = données / logo / accents graphiques (cône de prise de vue) */
  --cs-icy:          #38BDF8;

  /* Sémantiques (calibrées clair) */
  --cs-success:      #0E9F6E;
  --cs-warning:      #B45309;   /* texte */
  --cs-warning-soft: #FEF3C7;
  --cs-danger:       #DC2626;

  /* Orange = DERNIER RECOURS uniquement (alerte critique rarissime ; jamais CTA/déco) */
  --cs-orange:       #F96C00;

  /* ── Typographie ───────────────────────────────────────────────────────── */
  --cs-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cs-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Rayons ────────────────────────────────────────────────────────────── */
  --cs-r-sm:   8px;
  --cs-r:      12px;
  --cs-r-lg:   16px;
  --cs-r-pill: 9999px;

  /* ── Ombres douces, légèrement teintées bleu (signature front) ─────────── */
  --cs-shadow-sm: 0 1px 2px rgba(26, 58, 92, .06);
  --cs-shadow:    0 4px 14px rgba(26, 58, 92, .08);
  --cs-shadow-lg: 0 12px 32px rgba(26, 58, 92, .10);

  /* ── Motion (emil-design-eng) ──────────────────────────────────────────── */
  --cs-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --cs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --cs-dur-fast: 120ms;
  --cs-dur:      180ms;
  --cs-dur-slow: 240ms;

  /* ── Espacements ───────────────────────────────────────────────────────── */
  --cs-1: .25rem; --cs-2: .5rem; --cs-3: .75rem; --cs-4: 1rem; --cs-6: 1.5rem; --cs-8: 2rem;

  /* ── Texture topographique (header / login / empty) — TRÈS subtile ─────── */
  --cs-topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%231A7ABF' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 40 Q40 14 80 40 T160 40'/%3E%3Cpath d='M0 80 Q40 54 80 80 T160 80'/%3E%3Cpath d='M0 120 Q40 94 80 120 T160 120'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Focus ring (accessibilité) — primaire bleu ────────────────────────────
   Appliqué aux primitives cs-* et, dans cockpit.css, aux éléments ck-*. */
.cs-focus:focus-visible,
.cs-btn:focus-visible,
.cs-card:focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 2px;
  border-radius: var(--cs-r-sm);
}

/* ── Primitives optionnelles (réutilisables ailleurs plus tard) ─────────── */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .5rem .9rem; border-radius: var(--cs-r-pill);
  font-family: var(--cs-font); font-size: .85rem; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--cs-dur) var(--cs-ease-out),
              border-color var(--cs-dur) var(--cs-ease-out),
              transform var(--cs-dur-fast) var(--cs-ease-out);
}
.cs-btn:active { transform: scale(.97); }
.cs-btn--primary { background: var(--cs-primary); color: var(--cs-on-primary); }
.cs-btn--primary:hover { background: var(--cs-primary-hover); }
.cs-btn--ghost { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-border-strong); }
.cs-btn--ghost:hover { border-color: var(--cs-primary-light); background: var(--cs-primary-soft); }
.cs-btn--danger { background: var(--cs-danger); color: #fff; }
.cs-btn--sm { padding: .35rem .65rem; font-size: .78rem; }

.cs-card {
  background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg); box-shadow: var(--cs-shadow-sm);
}