/* ==========================================================================
   GuiraudQ — Design Tokens
   Couleurs + Typographie
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Papers */
  --paper:        #F4F4F0;
  --paper-soft:   #ECECE6;
  --snow:         #FBFBF8;

  /* Inks */
  --ink:          #0E0E0C;
  --ink-soft:     #2A2A26;
  --ink-mute:     #6E6E66;
  --ink-faint:    #A3A39A;

  /* Mint */
  --mint:         #00E5A0;
  --mint-deep:    #00C488;
  --mint-soft:    #B8F5DC;

  /* Sémantiques — surfaces */
  --bg:           var(--paper);
  --bg-alt:       var(--paper);
  --bg-soft:      var(--paper-soft);
  --bg-invert:    var(--ink);

  /* Sémantiques — texte */
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-mute:      var(--ink-mute);
  --fg-faint:     var(--ink-faint);
  --fg-on-dark:   var(--snow);

  /* Accent */
  --accent:       var(--mint);
  --accent-deep:  var(--mint-deep);
  --accent-soft:  var(--mint-soft);

  /* Borders */
  --border:       var(--ink);
  --border-soft:  rgba(14, 14, 12, 0.12);
  --border-faint: rgba(14, 14, 12, 0.06);

  /* États */
  --focus-ring:   var(--mint);
  --selection-bg: var(--mint);
  --selection-fg: var(--ink);

  /* Typographie — familles */
  --font-display: 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Typographie — échelle */
  --fs-mega:      clamp(4rem, 14vw, 14rem);
  --fs-display:   clamp(3rem, 8vw, 7rem);
  --fs-h1:        clamp(2.25rem, 5vw, 4rem);
  --fs-h2:        clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-lead:      1.375rem;
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-label:     0.75rem;
  --fs-tiny:      0.6875rem;

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

  /* Letter-spacing */
  --ls-tight:     -0.04em;
  --ls-snug:      -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.08em;
  --ls-wider:     0.16em;

  /* Poids */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* Espacement — 4px */
  --space-0:      0;
  --space-1:      0.25rem;
  --space-2:      0.5rem;
  --space-3:      0.75rem;
  --space-4:      1rem;
  --space-5:      1.5rem;
  --space-6:      2rem;
  --space-7:      3rem;
  --space-8:      4rem;
  --space-9:      6rem;
  --space-10:     8rem;
  --space-11:     12rem;

  /* Radii */
  --radius-0:     0;
  --radius-1:     2px;
  --radius-2:     4px;
  --radius-3:     8px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-0:     none;
  --shadow-1:     0 1px 2px rgba(14, 14, 12, 0.04);
  --shadow-2:     0 4px 12px rgba(14, 14, 12, 0.06);
  --shadow-3:     0 12px 32px rgba(14, 14, 12, 0.08);
  --shadow-mint:  0 8px 24px rgba(0, 196, 136, 0.25);

  /* Easings */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:     150ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;
  --dur-wipe:     720ms;

  /* Layout */
  --container:         1440px;
  --container-narrow:  880px;
  --gutter:            clamp(1rem, 4vw, 3rem);
}

/* Base */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Utilitaires typo */
.t-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-black);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-black);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-bold);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--fg-soft);
}
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-soft);
  margin: 0;
}
.t-small { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--fg-mute); }
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg);
}
.t-index {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-mute);
}
code, .t-mono { font-family: var(--font-mono); font-size: 0.9em; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-deep); }

.t-mark {
  background: linear-gradient(180deg, transparent 60%, var(--accent) 60%);
  padding: 0 0.05em;
}
.t-accent { color: var(--accent-deep); }