/* ============================================================
   Studio Djezo — Design Tokens (DA v2.0)
   ------------------------------------------------------------
   Source of truth: studio-djezo-brandbook.html (April 2026)
   
   FONT SYSTEM (Trio):
   - Titres / Impact: "Barlow Condensed" (Google Fonts)
   - Corps de texte / Editorial: "Barlow" (Google Fonts)
   - Interface / Logo: "Space Grotesk" (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700;800;900&family=Barlow:ital,wght@0,400;0,500;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* -----  If you install the real fonts, uncomment these -----
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("./fonts/AktivGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("./fonts/AktivGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bryant Compressed";
  src: url("./fonts/BryantCompressed-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
------------------------------------------------------------- */

:root {
  /* ---------- Base palette (DA v2.0) ---------- */
  --dj-black:    #0B0B0B;   /* Noir Ebon (Profondeur) */
  --dj-white:    #F2F2F2;   /* Blanc Chalk (Confort) */
  --dj-red:      #FD3A20;   /* Pantone Bright Red C — primary accent */

  /* ---------- Secondary palette (par touches) ---------- */
  --dj-green:    #21FC91;
  --dj-magenta:  #FC21A5;
  --dj-yellow:   #FFE828;
  --dj-blue:     #2179FC;

  /* ---------- Semantic surface + text (Dark Default) ---------- */
  --bg:          var(--dj-black);
  --bg-inverse:  var(--dj-white);
  --fg1:         var(--dj-white);   /* primary text */
  --fg2:         #e5e5e5;           /* near-white, subtle variation */
  --fg3:         #888888;           /* secondary / meta text */
  --fg-inverse:  var(--dj-black);
  --accent:      var(--dj-red);
  --rule:        var(--dj-white);
  --rule-subtle: #2a2a2a;

  /* ---------- Typography families (Trio v2.0) ---------- */
  --font-display: "Barlow Condensed", sans-serif;
  --font-sans:    "Barlow", sans-serif;
  --font-ui:      "Space Grotesk", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  /* ---------- Type scale (fluid, generous) ---------- */
  --fs-hero:   clamp(72px, 12vw, 220px);   /* display / poster headline */
  --fs-h1:     clamp(48px, 7vw, 104px);
  --fs-h2:     clamp(36px, 5vw, 72px);
  --fs-h3:     clamp(24px, 3vw, 40px);
  --fs-h4:     22px;
  --fs-body:   17px;
  --fs-small:  14px;
  --fs-xs:     12px;

  /* ---------- Weights ---------- */
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* ---------- Line heights ---------- */
  --lh-tight:    0.9;    /* display */
  --lh-snug:     1.05;
  --lh-body:     1.5;
  --lh-loose:    1.7;

  /* ---------- Tracking ---------- */
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-caps:     0.08em;  /* used for small uppercase labels */

  /* ---------- Spacing (8-pt base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radius ---------- */
  --radius-0: 0px;      /* default — Djezo is overwhelmingly flat/square */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px; /* used sparingly, on badges */

  /* ---------- Borders ---------- */
  --border-hair:  1px solid var(--rule-subtle);
  --border-rule:  2px solid var(--rule);
  --border-bold:  4px solid var(--rule);

  /* ---------- Shadows ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 var(--dj-black);
  --shadow-hard: 6px 6px 0 var(--dj-black); /* offset shadow */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-normal); }

.hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

p   { margin: 0 0 1em; }
a   { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

small, .small { font-size: var(--fs-small); }
.meta  { font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; font-weight: var(--fw-med); }

code, pre { font-family: var(--font-mono); font-size: 0.95em; }

hr {
  border: 0;
  border-top: var(--border-rule);
  margin: var(--sp-6) 0;
}

::selection { background: var(--dj-red); color: var(--dj-white); }