/* ==========================================================================
   Sticky Wage Norms — design tokens
   One committed light-paper identity with dark "act break" bands.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Ground & ink -------------------------------------------------- */
  --paper:        #faf7f2;
  --paper-2:      #f2ede4;
  --paper-3:      #e9e2d6;
  --card:         #ffffff;
  --ink:          #12212e;
  --ink-2:        #46545f;
  --ink-3:        #69737b;
  --rule:         #ded6c8;
  --rule-soft:    #eae3d7;

  /* ---- Dark band ----------------------------------------------------- */
  --dark:         #0f1d28;
  --dark-2:       #172936;
  --dark-3:       #21384a;
  --dark-ink:     #f4efe6;
  --dark-ink-2:   #a9bcc9;
  --dark-ink-3:   #6f8697;
  --dark-rule:    #2b4457;

  /* ---- Semantic data colours ----------------------------------------- */
  --c-inflation:      #c53f18;   /* prices, the shock                     */
  --c-inflation-soft: #f7d9cd;
  --c-nominal:        #396f92;   /* nominal wages, the firm norm          */
  --c-nominal-soft:   #cfe1eb;
  --c-real:           #12212e;   /* real wages                            */
  --c-loss:           #9e3b2e;   /* fell behind                           */
  --c-loss-soft:      #edd2cc;
  --c-gain:           #4a7458;   /* kept up / indexed / protected         */
  --c-gain-soft:      #d5e3d9;
  --c-accent:         #91661d;   /* off-cycle raises, highlights          */
  --c-accent-soft:    #f2e2c2;
  --c-trend:          #a9563f;   /* counterfactual trend lines            */
  --c-muted:          #6d777f;
  --c-grid:           #ded6c8;

  /* Country palette (Belgium comparison) */
  --c-belgium:     #4f7d5e;
  --c-germany:     #6e7b85;
  --c-netherlands: #7f8d98;
  --c-denmark:     #5b6871;
  --c-eurozone:    #7e8b95;

  /* Age / cohort ramp */
  --c-age-1: #4e94b3;
  --c-age-2: #2f6a8c;
  --c-age-3: #143f58;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-text:    ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-ui:      ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --fs-hero:    clamp(2.5rem, 7.4vw, 4.9rem);
  --fs-h2:      clamp(1.9rem, 4.6vw, 3.1rem);
  --fs-h3:      clamp(1.25rem, 2.6vw, 1.7rem);
  --fs-lede:    clamp(1.12rem, 2.3vw, 1.5rem);
  --fs-body:    clamp(1.03rem, 1.35vw, 1.16rem);
  --fs-small:   clamp(0.86rem, 1.1vw, 0.94rem);
  --fs-micro:   clamp(0.76rem, 0.95vw, 0.82rem);
  --fs-stat:    clamp(2.6rem, 7vw, 4.4rem);

  --lh-tight:  1.08;
  --lh-snug:   1.28;
  --lh-body:   1.62;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---- Measure -------------------------------------------------------- */
  --measure:       min(100% - 2.4rem, 40rem);
  --measure-wide:  min(100% - 2.4rem, 58rem);
  --measure-full:  min(100% - 2rem, 78rem);

  /* ---- Shape ---------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 33, 46, .06), 0 2px 8px rgba(18, 33, 46, .05);
  --shadow-md: 0 2px 6px rgba(18, 33, 46, .07), 0 12px 32px rgba(18, 33, 46, .08);

  /* ---- Motion --------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur:      320ms;
  --dur-slow: 720ms;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Controls ------------------------------------------------------- */
  --tap: 44px;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--c-nominal);
}

/* Dark bands re-map the neutral tokens so components need no variants.
   The hero sits on the same ground and uses the same mapping. */
.band--dark,
.hero,
.site-footer {
  --paper:     var(--dark);
  --paper-2:   var(--dark-2);
  --paper-3:   var(--dark-3);
  --card:      var(--dark-2);
  --ink:       var(--dark-ink);
  --ink-2:     var(--dark-ink-2);
  --ink-3:     var(--dark-ink-3);
  --rule:      var(--dark-rule);
  --rule-soft: #223849;
  --c-grid:    #2b4457;
  --c-real:    #f4efe6;
  --c-nominal: #6fb2d6;
  --c-nominal-soft: #234b63;
  --c-inflation: #ff7a4d;
  --c-inflation-soft: #5a2a18;
  --c-loss:    #e07a63;
  --c-loss-soft: #4a2119;
  --c-gain:    #7fbf94;
  --c-gain-soft: #23402d;
  --c-accent:  #e8b559;
  --c-accent-soft: #4a3717;
  --c-trend:   #e39d84;
  --c-muted:   #7f8f9b;
  --c-belgium: #7fbf94;
  --c-germany: #7d8a94;
  --c-netherlands: #97a5af;
  --c-denmark: #67757f;
  --c-eurozone: #59676f;
  /* On the dark ground the ramp runs the other way: the oldest group, which
     carries the finding, is the brightest line. */
  --c-age-1: #5e93b0;
  --c-age-2: #86bcd8;
  --c-age-3: #c4e0ee;
  --shadow-sm: none;
  --shadow-md: 0 18px 48px rgba(0, 0, 0, .35);
  --focus: 0 0 0 2px var(--dark), 0 0 0 4.5px #6fb2d6;
}