/* =========================================================================
   tokens.css — design system partagé (vitrine + admin)
   Style : dark luxury + glassmorphism, accent laiton/or
   Polices : Bebas Neue (titres), Instrument Serif (accents italiques), Manrope (texte)
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Couleurs */
  --bg: #0A0A0B;
  --bg-2: #111113;
  --bg-3: #18181B;
  --ink: #F4EEE2;          /* texte principal (crème) */
  --ink-2: #C9C2B4;        /* texte secondaire — contraste > 4.5:1 sur --bg */
  --ink-3: #8E887D;        /* légendes uniquement */
  --gold: #C8A464;
  --gold-2: #E3C88C;
  --gold-deep: #8C6A2F;
  --red: #C2413A;          /* rouge enseigne barbier */
  --blue: #2D5DA8;         /* bleu enseigne barbier */
  --ok: #5FB98A;
  --warn: #E2A93B;
  --danger: #E0574F;

  /* Verre */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-gold: rgba(200, 164, 100, 0.35);
  --blur: 18px;

  /* Typo */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Espacements & rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Ombres */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.5);
  --glow-gold: 0 0 0 1px var(--glass-border-gold), 0 10px 40px rgba(200, 164, 100, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 600ms;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 30;
  --z-modal: 50;
  --z-toast: 60;
  --z-cursor: 70;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }

/* Composants de base */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-radius: var(--r-lg);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out);
}
.btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-deep)); color: #17120A; box-shadow: 0 8px 30px rgba(200, 164, 100, 0.25); }
.btn-gold:hover { box-shadow: 0 12px 40px rgba(200, 164, 100, 0.45); }
.btn-ghost { background: var(--glass); border-color: var(--glass-border); color: var(--ink); backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: var(--glass-border-gold); background: var(--glass-strong); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}