/* ============================================================================
   Henner-Moreau Design System — Colors & Typography
   ---------------------------------------------------------------------------
   Inspired by museum walls, gilded frames, and the diffuse light of ateliers.
   Mots-clés: Institutionnel · Élégant · Fluide · Rassurant.
   ============================================================================ */

/* Font imports (Google Fonts — used as closest match to system spec)
   ------------------------------------------------------------------
   Spec calls for: Playfair Display / Cinzel (headings), Montserrat / Lato (body).
   We default to Playfair Display + Montserrat. Cinzel and Lato are available as
   alternates via the --font-display-alt / --font-body-alt variables.
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Cinzel:wght@400;500;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root {
  /* ---------- Brand colors (Primaires) ---------- */
  --bordeaux-900: #4A0012;     /* Bordeaux profond — hover/active */
  --bordeaux-800: #660019;     /* Bordeaux sombre */
  --bordeaux-700: #800020;     /* ★ Rouge Bordeaux — primaire */
  --bordeaux-600: #9A1A3A;
  --bordeaux-500: #B84A66;
  --bordeaux-100: #F5E6EA;     /* Bordeaux tint — fond subtil */
  --bordeaux-50:  #FBF3F5;

  --ocre-900: #6E5207;
  --ocre-800: #8F6909;
  --ocre-700: #B8860B;         /* ★ Or / Ocre — accent */
  --ocre-600: #C89A2D;
  --ocre-500: #D4AF57;
  --ocre-100: #F5EAD1;
  --ocre-50:  #FBF5E4;

  /* ---------- Neutres / Fonds ---------- */
  --beige-atelier: #FDFBF7;    /* ★ Canvas — fond de page */
  --beige-100: #F6F1E8;        /* Légèrement plus chaud */
  --beige-200: #EDE4D2;        /* Bordures chaudes, séparateurs */
  --beige-300: #D9CBB0;
  --blanc-casse: #FFFFFF;      /* ★ Fond des cartes */

  --ink-900: #1A1410;          /* Texte principal — presque noir chaud */
  --ink-800: #2E261E;
  --ink-700: #4A3F35;          /* Texte secondaire */
  --ink-600: #6B5E52;          /* Texte tertiaire / labels */
  --ink-500: #8C7F73;          /* Texte désactivé */
  --ink-400: #B5A99D;
  --ink-300: #D4CABE;          /* Bordures */
  --ink-200: #E8E0D4;          /* Bordures douces */
  --ink-100: #F2ECDF;

  /* ---------- Sémantiques ---------- */
  --success-700: #556B2F;      /* Vert olive sourd */
  --success-500: #6B8E23;
  --success-100: #E8EDD9;

  --error-700: #A0351E;        /* Terracotta / rouge brique */
  --error-500: #C0573A;
  --error-100: #F5DCD2;

  --info-700: #3E5266;         /* Bleu ardoise */
  --info-500: #56708A;
  --info-100: #DDE4EC;

  --warning-700: #B8860B;      /* Ocre sert aussi de warning */
  --warning-500: #D4AF57;
  --warning-100: #F5EAD1;

  /* ---------- Rôles sémantiques (remap) ---------- */
  --bg-canvas:      var(--beige-atelier);
  --bg-surface:     var(--blanc-casse);
  --bg-raised:      var(--blanc-casse);
  --bg-sidebar:     var(--bordeaux-700);
  --bg-overlay:     rgba(26, 20, 16, 0.48);
  --bg-muted:       var(--beige-100);

  --fg-1: var(--ink-900);          /* Titres */
  --fg-2: var(--ink-700);          /* Corps */
  --fg-3: var(--ink-600);          /* Meta / labels */
  --fg-4: var(--ink-500);          /* Désactivé */
  --fg-on-dark: #FDFBF7;           /* Texte sur bordeaux */
  --fg-on-dark-muted: rgba(253, 251, 247, 0.72);

  --border-1: var(--ink-200);      /* Bordure standard */
  --border-2: var(--ink-300);      /* Bordure forte */
  --border-warm: var(--beige-200); /* Bordure chaude sur beige */

  --accent: var(--ocre-700);
  --accent-strong: var(--ocre-800);
  --brand: var(--bordeaux-700);
  --brand-strong: var(--bordeaux-800);

  /* ---------- Typographie ---------- */
  --font-display: 'Playfair Display', 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-display-alt: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body-alt: 'Lato', 'Montserrat', -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace;

  /* Échelle (spec: H1 24, H2 18, Body 14, Compteurs 32) */
  --text-display:  48px;   /* grands titres éditoriaux */
  --text-h1:       24px;
  --text-h2:       18px;
  --text-h3:       16px;
  --text-body:     14px;
  --text-sm:       13px;
  --text-xs:       12px;
  --text-counter:  32px;   /* soldes / compteurs */
  --text-counter-lg: 48px; /* dashboard hero numbers */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;    /* petites capitales institutionnelles */

  /* ---------- Espacement (base 4px) ---------- */
  --space-0:  0;
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;     /* boutons, champs */
  --radius-md: 6px;     /* cartes compactes */
  --radius-lg: 8px;     /* cartes principales */
  --radius-xl: 12px;    /* modales */
  --radius-pill: 999px;

  /* ---------- Shadows (lumière diffuse d'atelier — douces, chaudes) ---------- */
  --shadow-xs: 0 1px 2px rgba(74, 63, 53, 0.06);
  --shadow-sm: 0 2px 4px rgba(74, 63, 53, 0.06), 0 1px 2px rgba(74, 63, 53, 0.04);
  --shadow-md: 0 4px 12px rgba(74, 63, 53, 0.08), 0 1px 3px rgba(74, 63, 53, 0.05);
  --shadow-lg: 0 12px 32px rgba(74, 63, 53, 0.10), 0 4px 8px rgba(74, 63, 53, 0.05);
  --shadow-xl: 0 24px 48px rgba(74, 63, 53, 0.14), 0 8px 16px rgba(74, 63, 53, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(74, 63, 53, 0.06);
  --shadow-focus: 0 0 0 3px rgba(184, 134, 11, 0.24);  /* halo ocre */

  /* ---------- Transitions (fluide, jamais bondissant) ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- Layout ---------- */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --container-max: 1280px;
  --content-max: 760px;
}

/* ----------------------------------------------------------------------------
   Base styles — element defaults for use inside the design system preview
   ---------------------------------------------------------------------------- */
.hm-root,
.hm-scope {
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic typography primitives
   ---------------------------- */
.hm-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.hm-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.hm-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.hm-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.hm-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.hm-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.hm-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
}
.hm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ocre-700);
}
.hm-counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-counter);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.hm-counter-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-counter-lg);
  line-height: 1;
  color: var(--bordeaux-700);
  font-variant-numeric: tabular-nums;
}