/* STAKKE v85 brand identity tokens.
   Source: 260826_stakke.pdf (2026-08-20 Brand Visual Proposal).
   The guide defines Rules for headings and JA for long-form copy. Licensed webfont
   files are not present in this repository, so both roles retain the owned
   Pretendard fallback until supplied. */
:root{
  --color-brick:#71402A;
  --color-oat:#EAE3D4;
  --color-blue-grey:#D0D4D7;
  --color-red:#C93A44;
  --color-sage-grey:#939B9A;
  --color-neutral-grey:#A7A7A7;
  --color-sky:#ABC3E5;
  --color-paper-warm:#FCF9F5;
  --color-ink:#101010;

  --color-text:var(--color-ink);
  --text-primary:var(--color-ink);
  --text-muted:#61584F;
  --text-lead:#463F39;
  --color-on-brick:var(--color-oat);
  --color-on-oat:var(--color-ink);
  --color-on-blue-grey:var(--color-ink);
  --color-on-red:#FFFFFF;
  --color-on-sage-grey:var(--color-ink);

  /* Preserve the neutral site canvas; the identity-led homepage uses OAT. */
  --surface-page:var(--color-paper-warm);
  --surface-brand-canvas:var(--color-oat);
  --surface-subtle:var(--color-oat);
  --surface-support-blue-grey:var(--color-blue-grey);
  --surface-support-red:var(--color-red);
  --surface-support-sage-grey:var(--color-sage-grey);
  --accent-text:var(--color-brick);
  --accent-action:var(--color-brick);
  --accent-soft:var(--color-oat);
  --brand-red:var(--color-brick);

  /* Immutable v84 components still consume these compatibility aliases. */
  --brick:var(--color-brick);
  --oat:var(--color-oat);
  --ink:var(--color-ink);
  --paper:var(--color-paper-warm);
  --sand:var(--color-oat);
  --mustard:var(--color-brick);
  --mustard-deep:var(--color-brick);
  --mustard-pale:var(--color-oat);
  --grey:var(--text-muted);
  --grey-l:var(--text-muted);
  --hair:color-mix(in srgb,var(--color-ink) 24%,var(--color-paper-warm));
  --line:var(--hair);

  --font-heading:"Pretendard Variable",Pretendard,Archivo,Figtree,-apple-system,"Noto Sans KR",sans-serif;
  --font-longform:"Pretendard Variable",Pretendard,Archivo,Figtree,-apple-system,"Noto Sans KR",sans-serif;
  --font-sans:"Pretendard Variable",Pretendard,Archivo,Figtree,-apple-system,"Noto Sans KR",sans-serif;
  --font-editorial:"Pretendard Variable",Pretendard,Archivo,Figtree,-apple-system,"Noto Sans KR",sans-serif;
  --font-body:17px;
  --font-h1-weight:700;
  --font-h1-tracking:-.035em;

  /* PDF specimens: display 89pt, theme heading 42pt, layout heading 26pt. */
  --type-h1:clamp(46px,6.5vw,88px);
  --type-h2:clamp(30px,3.5vw,42px);
  --type-h3:clamp(22px,2vw,26px);
  --type-hero:clamp(46px,6.5vw,86px);
  --type-page-heading:clamp(34px,5.6vw,72px);
  --type-display-section-heading:clamp(24px,3vw,38px);
  --type-section-heading:20px;
  --type-action-primary:14px;
  --type-action-secondary:13px;
  --type-label:12px;
  --space-page-inline:24px;
  --layout-max:1440px;
  --layout-content:calc(var(--layout-max) - 2*var(--space-page-inline));
  --component-inset:14px;
  --space-flow:22px;
  --space-flow-xs:12px;
  --space-section-block:56px;
  --measure-reading:840px;
  --radius-sm:0;
  --radius-md:0;
  --radius-lg:0;
}

body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge){
  background:var(--surface-page);
  color:var(--color-ink);
  font-family:var(--font-longform);
}
body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge)[data-route-page="home"]{
  background:var(--surface-brand-canvas);
}
.slw-internal-bridge{
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:var(--font-body);
}

body.static-page-shell[data-hero-family] h1,
body.slw-internal-bridge[data-hero-family] h1,
h1.code{
  font-weight:var(--font-h1-weight);
  letter-spacing:var(--font-h1-tracking);
}

.prod .flag,
.btn:hover,
.btn.ghost:hover,
.visit-actions a:hover,
.ev .cta [data-primary-cta]:hover,
.market-page .hero,
.journal-newsletter-band{
  color:var(--color-paper-warm);
}

:where(body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) h1,
       body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) .type-h1,
       body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) h2,
       body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) .type-h2,
       body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) h3,
       body.static-page-shell:not(.slw-official-bridge):not(.slw-internal-bridge) .type-h3){
  font-family:var(--font-heading);
}

/* Apply the PDF hierarchy to the identity-led homepage without flattening route-specific type. */
body.static-page-shell[data-route-page="home"] [data-page="home"] main h1,
body.static-page-shell[data-route-page="home"] [data-page="home"] h1{
  font-size:var(--type-h1);
  line-height:.98;
}
body.static-page-shell[data-route-page="home"] [data-page="home"] h2{
  font-size:var(--type-h2);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
}
body.static-page-shell[data-route-page="home"] [data-page="home"] h3{
  font-size:var(--type-h3);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.025em;
}

/* Homepage palette rhythm: OAT canvas, one restrained supporting surface per chapter. */
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] .home-now{
  background:var(--surface-support-blue-grey);
}
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] .about-block{
  background:var(--surface-support-sage-grey);
  color:var(--color-on-sage-grey);
  padding:clamp(30px,4vw,48px);
  border-color:var(--color-ink);
}
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] .about-block .about-label,
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] .about-block p{
  color:var(--color-ink);
}
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] > .strip{
  background:var(--surface-support-red);
  border-color:var(--color-red);
  color:var(--color-on-red);
}
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] > .strip p,
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] > .strip .consent,
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] > .strip .consent a{
  color:var(--color-on-red);
}
body.static-page-shell:not(.slw-official-bridge) [data-page="home"] > .strip .btn{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-paper-warm);
}

@media (max-width:560px){
  :root{
    --type-h1:clamp(44px,13.5vw,64px);
    --type-h2:clamp(28px,9vw,36px);
    --type-h3:clamp(21px,6.5vw,24px);
    --space-page-inline:20px;
    --space-section-block:40px;
  }
}