/* ═══════════════════════════════════════════
   BOLD VILLAGE — Design System v3.0
   Brand refresh avril 2026
   Palette bordeaux · Or conservé · Cormorant Garamond / Onest
   Single source of truth for all CSS tokens
   ═══════════════════════════════════════════ */

:root {
  /* ─── Brand Colors ─── */
  --aubergine:   #30050E;   /* bordeaux profond — couleur signature */
  --prune-mid:   #4D0C12;   /* bordeaux medium */
  --prune-light: #6B1520;   /* bordeaux clair — accents, hover states */
  --prune-soft:  #F5E8EA;   /* fond soft bordeaux — badges, tags */
  --or:          #C9A96E;   /* or Bold Village — inchangé */
  --or-light:    #F5EDD8;   /* or très clair — fond or doux */
  --blanc:       #FFFFFF;
  --creme:       #F6F3E4;   /* crème chaud — fond clair principal */
  --sombre:      #1E100F;   /* fond le plus sombre */

  /* ─── Text ─── */
  --text:        #1E100F;   /* texte principal */
  --text-mid:    #5A2530;   /* texte secondaire */
  --text-light:  #9A6A70;   /* texte désactivé / hints */

  /* ─── Utility ─── */
  --border:      #E8D5D6;   /* bordures légères teintées bordeaux */
  --success:     #2E8B57;
  --error:       #C0392B;
  --warning:     #D4A017;

  /* ─── Surfaces ─── */
  --glass-white: rgba(255, 255, 255, 0.78);
  --glass-dark:  rgba(48, 5, 14, 0.88);

  /* ─── Shadows ─── */
  --shadow-1: 0 1px 3px rgba(30,16,15,0.06), 0 1px 2px rgba(30,16,15,0.04);
  --shadow-2: 0 4px 16px rgba(30,16,15,0.08), 0 1px 4px rgba(30,16,15,0.04);
  --shadow-3: 0 8px 32px rgba(30,16,15,0.12), 0 2px 8px rgba(30,16,15,0.06);
  --shadow-4: 0 16px 48px rgba(30,16,15,0.16), 0 4px 16px rgba(30,16,15,0.08);

  /* ─── Radii ─── */
  --radius-pill: 28px;
  --radius-card: 12px;
  --radius-sm:   8px;

  /* ─── Typography ─── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Cormorant Garamond', Georgia, serif;   /* utiliser font-style:italic */
  --font-body:    'Onest', system-ui, sans-serif;

  /* ─── Layout ─── */
  --content-max: 1200px;
  --nav-h:       72px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Icons (Iconify) ─── */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 40px;

  /* ─── Aliases (dashboard & admin use minified names) ─── */
  --au: var(--aubergine);
  --pm: var(--prune-mid);
  --pl: var(--prune-light);
  --ps: var(--prune-soft);
  --ol: var(--or-light);
  --wh: var(--blanc);
  --cr: var(--creme);
  --tx: var(--text);
  --tm: var(--text-mid);
  --tl: var(--text-light);
  --bd: var(--border);
  --su: var(--success);
  --er: var(--error);
  --wr: var(--warning);
  --s1: var(--shadow-1);
  --s2: var(--shadow-2);
  --s3: var(--shadow-3);
  --s4: var(--shadow-4);
  --rc: var(--radius-card);
  --rs: var(--radius-sm);
  --rp: var(--radius-pill);
  --fd: var(--font-display);
  --fs: var(--font-script);
  --fb: var(--font-body);
  --eo: var(--ease-out);
  --ixs: var(--icon-xs);
  --ism: var(--icon-sm);
  --imd: var(--icon-md);
  --ilg: var(--icon-lg);
  --ixl: var(--icon-xl);
}

/* ═══════════════════════════════════════════
   ICONIFY — base styles
   Usage : <iconify-icon icon="lucide:arrow-right"></iconify-icon>
   Taille : attribut width="…" OU classe .icon-sm/md/lg OU font-size
   Couleur : hérite de `color:` du parent (currentColor)
   Sets recommandés : lucide, phosphor, mdi, tabler, heroicons, fluent
   Recherche : https://icon-sets.iconify.design/
   ═══════════════════════════════════════════ */

iconify-icon {
  display: inline-block;
  vertical-align: -0.125em;
  line-height: 1;
  color: inherit;
}

iconify-icon[width],
iconify-icon[height] { vertical-align: middle; }

/* Classes utilitaires — taille */
.icon-xs { font-size: var(--icon-xs); }
.icon-sm { font-size: var(--icon-sm); }
.icon-md { font-size: var(--icon-md); }
.icon-lg { font-size: var(--icon-lg); }
.icon-xl { font-size: var(--icon-xl); }

/* Classes utilitaires — couleur */
.icon-or        { color: var(--or); }
.icon-aubergine { color: var(--aubergine); }
.icon-prune     { color: var(--prune-light); }
.icon-blanc     { color: var(--blanc); }
.icon-creme     { color: var(--creme); }
.icon-text      { color: var(--text); }
.icon-muted     { color: var(--text-light); }
.icon-success   { color: var(--success); }
.icon-error     { color: var(--error); }
.icon-warning   { color: var(--warning); }