/* ============================================================
   THE MARKETING LAB — DESIGN TOKENS
   Everything visual is defined here. Change a value once and it
   propagates across the whole site.
   ============================================================ */

:root {

  /* ---- COLOUR ---------------------------------------------
     Rule of the system: the accent is a REACTION, not decoration.
     Magenta only appears where something activates: a hover, a
     current position, a phase in progress, an arrow about to move.
     Everything at rest is paper, ink and grey.
     -------------------------------------------------------- */
  --paper:        #F5F5F3;   /* off-white, cool neutral        */
  --paper-2:      #EDEDEA;   /* alternate ground               */
  --ink:          #101010;   /* near-black, all body copy      */
  --ink-2:        #5E5E5B;   /* secondary text                 */
  --ink-3:        #6F6F6A;   /* captions, mono labels — 4.6:1  */
  --rule:         #D8D8D3;   /* hairlines on paper             */
  --raised:       #FFFFFF;   /* the one surface that sits above paper */

  --void:         #0B0B0B;   /* inverted sections              */
  --void-ink:     #F5F5F3;   /* text on void                   */
  --void-ink-2:   #9A9A94;
  --void-rule:    #262625;

  --reagent:      #E6006E;   /* the accent                     */
  --reagent-deep: #B00055;   /* accessible on paper at small sizes */
  --reagent-lift: #F02A85;   /* the mirror of the above, for the void:
                                #E6006E clears only 4.30:1 on #0B0B0B, so
                                small text in the accent fails AA on the
                                dark sections. This lifts it to 5.04:1
                                with the least hue shift that gets there. */
  --on-reagent:   #FFFFFF;   /* text ON the accent. Pure white, not
                                paper: white clears 4.58:1 on reagent,
                                paper only reaches 4.19:1 and fails.  */

  --focus:        #E6006E;

  /* ---- TYPE ----------------------------------------------- */
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale — 360px to 1600px viewport */
  --t-display: clamp(3.1rem, 12.5vw, 12rem);
  --t-h2:      clamp(2.4rem, 6.4vw, 6rem);
  --t-h3:      clamp(1.6rem, 2.6vw, 2.6rem);
  --t-lead:    clamp(1.125rem, 1.55vw, 1.5rem);
  --t-body:    clamp(1rem, 1.15vw, 1.125rem);
  --t-small:   0.8125rem;
  --t-mono:    0.6875rem;

  --lh-display: 0.86;
  --lh-h2:      0.94;
  --lh-body:    1.6;

  --tr-display: -0.045em;   /* tight tracking at large sizes   */
  --tr-mono:     0.16em;

  /* ---- SPACE ---------------------------------------------- */
  --gutter:   clamp(1.25rem, 4.4vw, 4.5rem);
  --section:  clamp(6rem, 13vh, 11rem);
  --stack:    clamp(1.25rem, 2.2vw, 2rem);
  --max:      1680px;

  /* ---- MOTION --------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.65, 0, 0.35, 1);
  --fast:      0.28s;
  --mid:       0.6s;
  --slow:      1.1s;
}

/* Reduced motion: strip every transition and animation, keep the
   layout and all content exactly as it is. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}