/* ════════════════════════════════════════════════════════════════
   Smart CGP — Design Tokens
   Couleurs, typographies, espacements, élévation.
   Importer ce fichier dans n'importe quel projet pour rester aligné.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ───── COULEURS PRIMAIRES ─────────────────────── */
  --sc-cacao:        #3a2618;  /* Dominante print / dark */
  --sc-cacao-hi:     #4d3424;  /* Surface élevée */
  --sc-cacao-lo:     #241410;  /* Ombre profonde / encre */

  --sc-cuivre:       #d97a4f;  /* Accent principal — actions, liens, hover */
  --sc-cuivre-hi:    #e8a37a;  /* Cuivre clair — hover sur fond foncé */
  --sc-cuivre-lo:    #b8552e;  /* Cuivre profond — accent secondaire */

  --sc-lagon:        #3a8a98;  /* Signature secondaire — ligne d'horizon, info */
  --sc-lagon-hi:     #5aaec0;

  --sc-sable:        #f7ede0;  /* Surface claire site */
  --sc-sable-hi:     #fcf6ed;  /* Fond doux body */
  --sc-sable-lo:     #ecdec8;  /* Bordure neutre */

  /* ───── NEUTRES & TEXTE ─────────────────────────── */
  --sc-encre:        #241410;  /* Texte sur fond clair */
  --sc-craie:        #f7ede0;  /* Texte sur fond foncé */
  --sc-text-strong:  #241410;
  --sc-text-default: rgba(36, 20, 16, 0.85);
  --sc-text-muted:   rgba(36, 20, 16, 0.65);
  --sc-text-faint:   rgba(36, 20, 16, 0.42);
  --sc-text-dark-strong:  #f7ede0;
  --sc-text-dark-default: rgba(247, 237, 224, 0.85);
  --sc-text-dark-muted:   rgba(247, 237, 224, 0.65);
  --sc-text-dark-faint:   rgba(247, 237, 224, 0.42);

  /* ───── SÉMANTIQUES ─────────────────────────────── */
  --sc-success: #3d8a5f;
  --sc-warning: #c8893a;
  --sc-error:   #b8442e;
  --sc-info:    #3a8a98;

  /* ───── TYPOGRAPHIE ─────────────────────────────── */
  --sc-font-serif: 'Fraunces', 'Times New Roman', serif;    /* Display, titres, "Smart" */
  --sc-font-sans:  'Inter', system-ui, -apple-system, sans-serif;  /* Body, UI, "CGP" */
  --sc-font-mono:  'JetBrains Mono', ui-monospace, monospace;       /* Chiffres financiers */

  /* Échelle d'affichage (font-size) */
  --sc-fs-display:  84px;  /* Hero accroche */
  --sc-fs-h1:       56px;
  --sc-fs-h2:       32px;
  --sc-fs-h3:       22px;
  --sc-fs-body-lg:  18px;
  --sc-fs-body:     16px;
  --sc-fs-body-sm:  14px;
  --sc-fs-caption:  11px;
  --sc-fs-label:    10px;  /* Eyebrow uppercase tracking */

  /* Tracking */
  --sc-ls-display: -0.025em;
  --sc-ls-tight:   -0.015em;
  --sc-ls-body:    -0.005em;
  --sc-ls-label:   0.22em;
  --sc-ls-mono:    0.32em;

  /* Line-height */
  --sc-lh-display: 1.05;
  --sc-lh-heading: 1.15;
  --sc-lh-body:    1.55;

  /* ───── ESPACEMENTS (modulaire 4px) ─────────────── */
  --sc-space-1:  4px;
  --sc-space-2:  8px;
  --sc-space-3:  12px;
  --sc-space-4:  16px;
  --sc-space-5:  20px;
  --sc-space-6:  24px;
  --sc-space-8:  32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-20: 80px;
  --sc-space-24: 96px;

  /* ───── BORDURES & RAYONS ───────────────────────── */
  --sc-radius-xs:  4px;
  --sc-radius-sm:  6px;
  --sc-radius-md:  10px;
  --sc-radius-lg:  14px;
  --sc-radius-pill: 9999px;

  --sc-border-subtle:  1px solid rgba(36, 20, 16, 0.08);
  --sc-border-default: 1px solid rgba(36, 20, 16, 0.15);
  --sc-border-strong:  1px solid rgba(36, 20, 16, 0.25);
  --sc-border-dark-subtle:  1px solid rgba(247, 237, 224, 0.10);
  --sc-border-dark-default: 1px solid rgba(247, 237, 224, 0.18);

  /* ───── ÉLÉVATION (ombres) ──────────────────────── */
  --sc-shadow-sm: 0 1px 2px rgba(36, 20, 16, 0.05);
  --sc-shadow-md: 0 4px 16px rgba(36, 20, 16, 0.08);
  --sc-shadow-lg: 0 12px 32px rgba(36, 20, 16, 0.12);
  --sc-shadow-xl: 0 20px 50px rgba(36, 20, 16, 0.18);

  /* ───── TRANSITION ──────────────────────────────── */
  --sc-ease:       cubic-bezier(.4, 0, .2, 1);
  --sc-ease-out:   cubic-bezier(0, 0, .2, 1);
  --sc-dur-fast:   150ms;
  --sc-dur-base:   250ms;
  --sc-dur-slow:   400ms;
}

/* ════════════════════════════════════════════════════════════════
   STYLES SÉMANTIQUES — utilisables directement sur les balises
   ════════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--sc-font-sans);
  color: var(--sc-encre);
  background: var(--sc-sable-hi);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Display & Headings ─────────────────────────────────────── */
.sc-display {
  font-family: var(--sc-font-serif);
  font-weight: 400;
  font-size: var(--sc-fs-display);
  line-height: var(--sc-lh-display);
  letter-spacing: var(--sc-ls-display);
  font-variation-settings: 'opsz' 144;
}

.sc-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--sc-cuivre);
}

.sc-h1, h1 {
  font-family: var(--sc-font-serif);
  font-weight: 500;
  font-size: var(--sc-fs-h1);
  line-height: var(--sc-lh-display);
  letter-spacing: var(--sc-ls-display);
  font-variation-settings: 'opsz' 96;
}

.sc-h2, h2 {
  font-family: var(--sc-font-serif);
  font-weight: 400;
  font-size: var(--sc-fs-h2);
  line-height: var(--sc-lh-heading);
  letter-spacing: var(--sc-ls-tight);
  font-variation-settings: 'opsz' 96;
}

.sc-h3, h3 {
  font-family: var(--sc-font-sans);
  font-weight: 600;
  font-size: var(--sc-fs-h3);
  line-height: var(--sc-lh-heading);
  letter-spacing: var(--sc-ls-tight);
}

.sc-body, p {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-body);
  line-height: var(--sc-lh-body);
  color: var(--sc-text-default);
}

.sc-caption {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-caption);
  font-weight: 500;
  letter-spacing: var(--sc-ls-label);
  text-transform: uppercase;
  color: var(--sc-cuivre);
}

.sc-mono {
  font-family: var(--sc-font-mono);
  font-feature-settings: 'tnum';
}

/* ── Boutons ────────────────────────────────────────────────── */
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-family: var(--sc-font-sans);
  font-weight: 600;
  font-size: var(--sc-fs-body-sm);
  padding: 13px 22px;
  border-radius: var(--sc-radius-sm);
  border: 0;
  cursor: pointer;
  transition: background var(--sc-dur-fast) var(--sc-ease);
}

.sc-btn-primary {
  background: var(--sc-cuivre);
  color: var(--sc-craie);
}
.sc-btn-primary:hover {
  background: var(--sc-cuivre-lo);
}

.sc-btn-secondary {
  background: transparent;
  color: var(--sc-encre);
  border: var(--sc-border-default);
}
.sc-btn-secondary:hover {
  background: rgba(36, 20, 16, 0.04);
}

.sc-btn-ghost {
  background: transparent;
  color: var(--sc-cuivre);
  padding-left: 0;
  padding-right: 0;
}

/* ── Cards ─────────────────────────────────────────────────── */
.sc-card {
  background: #fff;
  border-radius: var(--sc-radius-md);
  padding: var(--sc-space-6);
  border: var(--sc-border-subtle);
}

/* ── Field ─────────────────────────────────────────────────── */
.sc-input {
  background: #fff;
  border: var(--sc-border-default);
  border-radius: var(--sc-radius-sm);
  padding: 12px 14px;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-body-sm);
  color: var(--sc-encre);
  width: 100%;
  transition: border-color var(--sc-dur-fast) var(--sc-ease);
}
.sc-input:focus {
  outline: none;
  border-color: var(--sc-cuivre);
}

/* ── Badges ────────────────────────────────────────────────── */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--sc-radius-pill);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sc-badge-cuivre { background: rgba(217, 122, 79, 0.12); color: var(--sc-cuivre); }
.sc-badge-lagon  { background: rgba(58, 138, 152, 0.12); color: var(--sc-lagon); }
.sc-badge-success{ background: rgba(61, 138, 95, 0.12); color: var(--sc-success); }