/* ============================================================
   Hub de l'Excellence — Design Tokens
   Palette règle : 60 % ivoire · 25 % encre · 10 % laurier · 5 % or
   ============================================================ */

/* ── Webfonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Hanken+Grotesk:wght@300..800&display=swap');

:root {
  /* ── Core palette ─────────────────────────────────────── */
  --color-ivoire:      #F6F1E7;
  --color-ivoire-deep: #ECE3D1;
  --color-encre:       #0F1F1C;
  --color-laurier:     #21574A;
  --color-or:          #C9A227;
  --color-or-soft:     #DCBE74;
  --color-craie:       #CFC8B8;
  --color-sable:       #8a857c;
  --color-beige:       #5b574e;

  /* ── Semantic surfaces ────────────────────────────────── */
  --surface-bg:        var(--color-ivoire);
  --surface-bg-deep:   var(--color-ivoire-deep);
  --surface-dark:      var(--color-encre);
  --surface-accent:    var(--color-laurier);
  --surface-card:      #ffffff;
  --surface-card-warm: var(--color-ivoire);

  /* ── Semantic text ────────────────────────────────────── */
  --text-primary:      var(--color-encre);
  --text-body:         var(--color-beige);
  --text-subtle:       var(--color-sable);
  --text-ghost:        var(--color-craie);
  --text-on-dark:      var(--color-ivoire);
  --text-on-dark-muted: rgba(246, 241, 231, 0.6);

  /* ── Semantic accents ─────────────────────────────────── */
  --accent-gold:       var(--color-or);
  --accent-gold-soft:  var(--color-or-soft);
  --accent-green:      var(--color-laurier);

  /* ── Borders ──────────────────────────────────────────── */
  --border-default:    rgba(0, 0, 0, 0.08);
  --border-subtle:     rgba(0, 0, 0, 0.06);
  --border-gold:       var(--color-or);

  /* ── Diamond pattern ──────────────────────────────────── */
  --pattern-diamonds-dark:  rgba(201, 162, 39, 0.07);
  --pattern-diamonds-light: rgba(33,  87,  74, 0.07);
  --pattern-diamonds-white: rgba(201, 162, 39, 0.06);
  --pattern-size: 20px;

  /* ── Font families ────────────────────────────────────── */
  --font-serif: 'Marcellus', serif;
  --font-sans:  'Hanken Grotesk', sans-serif;

  /* ── Type scale ───────────────────────────────────────── */
  --text-display: 72px;
  --text-h1:      52px;
  --text-h2:      38px;
  --text-h3:      26px;
  --text-h4:      20px;
  --text-lead:    20px;
  --text-body:    15px;
  --text-ui:      14px;
  --text-small:   13px;
  --text-caption: 12px;
  --text-eyebrow: 11px;
  --text-micro:   10px;

  /* ── Line heights ─────────────────────────────────────── */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-h3:      1.25;
  --lh-lead:    1.55;
  --lh-body:    1.65;
  --lh-caption: 1.50;
  --lh-tight:   1.20;

  /* ── Letter spacing ───────────────────────────────────── */
  --tracking-eyebrow:  0.22em;
  --tracking-wordmark: 0.16em;
  --tracking-upper:    0.12em;
  --tracking-display:  0.08em;
  --tracking-meta:     0.20em;

  /* ── Font weights ─────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ── Measure ──────────────────────────────────────────── */
  --measure-body: 560px;
  --measure-lead: 620px;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-28: 56px;
  --space-32: 64px;
  --space-36: 72px;
  --space-40: 80px;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:       860px;
  --page-margin:      72px;
  --section-pad-v:    60px;
  --section-pad-h:    72px;
  --section-gap:      80px;

  /* ── Corner radii ─────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(15,31,28,0.07), 0 4px 14px rgba(15,31,28,0.04);
  --shadow-float: 0 4px 16px rgba(15,31,28,0.10), 0 1px 4px rgba(15,31,28,0.06);

  /* ── Rule ─────────────────────────────────────────────── */
  --rule-thickness: 2px;
  --rule-color:     var(--color-or);
}