/* ============================================================
   DESIGN TOKENS — kainiephaus.com
   Base unit: 24px → scales fluidly between 1440px and 1920px
   Breakpoint: 768px (desktop → mobile)
   ============================================================ */

:root {

  /* --- Fluid base unit (desktop)
         24px at 1440px viewport, 32px at 1920px viewport.    */
  --unit: clamp(24px, 1.6667vw, 32px);

  /* --- Grid: desktop --------------------------------------- */
  --columns:    16;
  --gutter:     var(--unit);
  --margin:     var(--unit);
  --max-width:  1920px;

  /* --- Grid: mobile ---------------------------------------- */
  --columns-mob:  2;
  --gutter-mob:   16px;
  --margin-mob:   16px;

  /* --- Breakpoint ------------------------------------------ */
  --bp-mobile:  768px;

  /* --- Vertical rhythm ------------------------------------- */
  --lh:         var(--unit);

  /* --- Colour palette (Layer 1 — raw values) --------------- */

  /* Neutrals */
  --black:          #020302;
  --white:          #ffffff;

  /* Paper surfaces — dark to light */
  --paper:          #E1DCCD;
  --paper-lift:     #F2EFE9;
  --off-white:      #FCFBF8;

  /* Muted text */
  --grey:           #484856;

  /* Blue (brand) */
  --blue-main:      #0000DD;
  --blue-mid:       #7876EE;
  --blue-light:     #B4B9FF;

  /* Secondary / accent colours */
  --redro:      #E75940;
  --sunny:      #FFCE0A;
  --moamint:    #9BDAD5;
  --sage:       #429F83;
  --midnight:   #002850;

  /* --- Colour semantic (Layer 2 — roles) ------------------- */

  /* Backgrounds */
  --color-bg:           var(--paper);
  --color-bg-raised:    var(--paper-lift);
  --color-bg-high:      var(--off-white);

  /* Text */
  --color-fg:           var(--black);
  --color-fg-muted:     var(--grey);

  /* Accent */
  --color-accent:       var(--blue-main);
  --color-accent-mid:   var(--blue-mid);
  --color-accent-light: var(--blue-light);

  /* Borders */
  --color-border:       rgba(2, 3, 2, 0.14);
  --color-border-soft:  rgba(2, 3, 2, 0.08);

  /* Shorthands (keep existing code working) */
  --bg:    var(--color-bg);
  --fg:    var(--color-fg);
  --muted: var(--color-fg-muted);
  --blue:  var(--color-accent);

  /* --- Type families --------------------------------------- */
  --font-sans:  'Neue Haas Unica Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'Geist Mono', monospace;

  /* --- Type scale: headings scale (1440px → 1920px, ×1.15) */
  --fs-body:  18px;
  --lh-body:  24px;
  --ls-body:  0;

  --fs-h1:    clamp(56px, calc(30.8px + 1.75vw), 64.4px);
  --lh-h1:    clamp(58px, calc(31.9px + 1.8125vw), 66.7px);
  --ls-h1:    -1.3px;

  --fs-h2:    clamp(38px, calc(20.9px + 1.1875vw), 43.7px);
  --lh-h2:    clamp(46px, calc(25.3px + 1.4375vw), 52.9px);
  --ls-h2:    -0.1px;

  --fs-h3:    clamp(30px, calc(16.5px + 0.9375vw), 34.5px);
  --lh-h3:    clamp(34px, calc(18.7px + 1.0625vw), 39.1px);
  --ls-h3:    -0.1px;

  --fs-h4:    24px;
  --lh-h4:    30px;
  --ls-h4:    0;

  --fs-mono:  12px;
  --ls-mono:  0.06em;

  /* --- Additional classes (kicker, detail, nav) ----------- */
  --fs-kicker:  12px;
  --lh-kicker:  14px;
  --ls-kicker:  0;

  --fs-detail:  14px;
  --lh-detail:  19px;
  --ls-detail:  0.1px;

  --fs-nav:     14px;
  --lh-nav:     24px;
  --ls-nav:     0.1px;

  /* --- Type scale: mobile overrides for headings (below 768px) */
  --fs-h1-mob:  32px;   --lh-h1-mob:  34px;   --ls-h1-mob:  -0.5px;
  --fs-h2-mob:  26px;   --lh-h2-mob:  29px;   --ls-h2-mob:  -0.5px;
  --fs-h3-mob:  22px;   --lh-h3-mob:  24px;   --ls-h3-mob:  -0.1px;

}

/* --- Base type --------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: 400;
  margin: 0;
}

h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 400;
  margin: 0;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: 400;
  margin: 0;
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  font-weight: 400;
  margin: 0;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  margin: 0;
}

/* --- Mono label / kicker / eyebrow ------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
}

.mono.blue { color: var(--blue); }

/* --- Kicker ----------------------------------------------- */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--ls-kicker);
  font-weight: 400;
}

.kicker.medium { font-weight: 500; } /* requires NeueHaasUnicaPro-Medium.woff2 */

/* --- Detail ----------------------------------------------- */
.detail {
  font-family: var(--font-sans);
  font-size: var(--fs-detail);
  line-height: var(--lh-detail);
  letter-spacing: var(--ls-detail);
  font-weight: 400;
}

/* --- Nav label -------------------------------------------- */
.nav-label {
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
  font-weight: 400;
}

/* --- Page wrapper ------------------------------------------ */
.page {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding-inline: var(--margin);
  box-sizing: border-box;
}

/* --- 16-column grid (desktop) ------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
}

/* --- Mobile overrides -------------------------------------- */
@media (max-width: 768px) {

  :root {
    --fs-h1: var(--fs-h1-mob);   --lh-h1: var(--lh-h1-mob);   --ls-h1: var(--ls-h1-mob);
    --fs-h2: var(--fs-h2-mob);   --lh-h2: var(--lh-h2-mob);   --ls-h2: var(--ls-h2-mob);
    --fs-h3: var(--fs-h3-mob);   --lh-h3: var(--lh-h3-mob);   --ls-h3: var(--ls-h3-mob);
  }

  .page {
    padding-inline: var(--margin-mob);
  }

  .grid {
    grid-template-columns: repeat(var(--columns-mob), 1fr);
    gap: var(--gutter-mob);
  }

}