/* revs-tokens.css — à importer sur tout futur support (site, deck, packaging digital)
   Système officiel REVS Watches. Ne pas improviser d'autres polices ou couleurs. */

/* 1. Polices (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Barlow+Condensed:wght@300;400;600;700&display=swap');

/* 2. Tokens */
:root {
  /* Couleur */
  --black: #080808;
  --yellow: #F5C400;
  --red: #C8271F;
  --white: #F4F1EC;
  --grey: #141414;
  --grey-mid: #242424;
  --grey-light: #8a8a8a;

  /* Familles */
  --font-display: 'Bebas Neue', sans-serif;
  --font-label: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

/* 3. Classes utilitaires — nommées par rôle, pas par emplacement */
.text-display-xl { font-family: var(--font-display); font-size: clamp(72px,10vw,130px); line-height: .9; letter-spacing: 2px; text-transform: uppercase; }
.text-display-lg { font-family: var(--font-display); font-size: 48px; line-height: .95; letter-spacing: 1px; text-transform: uppercase; }
.text-display-md { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }

.text-label-lg    { font-family: var(--font-label); font-size: 13px; letter-spacing: 5px; text-transform: uppercase; }
.text-label-sm    { font-family: var(--font-label); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.text-data        { font-family: var(--font-label); font-size: 13px; letter-spacing: 1px; }

.text-body-lg     { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.6; }
.text-body        { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.6; }
.text-body-sm     { font-family: var(--font-body); font-weight: 300; font-size: 12px; line-height: 1.6; }

/* 4. Couleur — même logique, préfixe séparé */
.c-yellow { color: var(--yellow); }
.c-red    { color: var(--red); }
.c-white  { color: var(--white); }
.c-muted  { color: var(--grey-light); }

/* Usage : <h1 class="text-display-xl c-white">WHERE ENGINES MEET DIALS</h1> */