/* ─────────────────────────────────────────────────────────────────
   Gumakem · design tokens + base
   Palette: ink + warm paper, yellow brand anchor, forest green +
   rose pink accents. Yellow is signal — used selectively, not wallpaper.
   Corners are relaxed (8–24px) — softer than the brainstorm concepts.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* yellow — brand anchor */
  --yellow:        #FFCE1A;
  --yellow-soft:   #FFE890;
  --yellow-cream:  #FFF6CC;

  /* greens — eco / forest / sage */
  --green-deep:    #2D5C39;
  --green-mid:     #5A7847;
  --green-soft:    #B9CDA9;
  --green-mint:    #DAE4CB;
  --green-cream:   #EBF1DF;

  /* pinks — sophisticated rose */
  --pink:          #E69BA0;
  --pink-deep:     #B85569;
  --pink-soft:     #F4C8CC;
  --pink-cream:    #FBE6E8;

  /* neutrals */
  --ink:           #16170F;
  --ink-2:         #2A2A20;
  --paper:         #F6F2E6;
  --paper-2:       #EEE9D9;
  --paper-white:   #FCFAF1;
  --pure-white:    #FFFFFF;
  --mid:           #6F6B62;
  --mid-lo:        #9B968B;

  --hair:          rgba(22,23,15,0.07);
  --rule:          rgba(22,23,15,0.14);
  --rule-strong:   rgba(22,23,15,0.22);

  /* radii — relaxed, never perfectly square */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Lock the prototype to a 1440 canvas with scrollable height —
   visually presents like a full home design at fidelity. */
.gk-canvas {
  width: 1440px;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-feature-settings: "tnum", "ss01";
}
.serif {
  font-family: "Source Serif 4", Georgia, serif;
}
.serif-it {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
}

/* Section paddings — consistent rhythm down the page */
.gk-section { padding: 64px 56px; }
.gk-section.tight { padding: 40px 56px; }
.gk-section.flush { padding: 0; }

.gk-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mid);
  font-weight: 500;
}
.gk-eyebrow .dot {
  width: 8px; height: 8px;
  background: var(--green-mid); border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

/* H1/H2/H3 base — Space Grotesk display weight */
.gk-h1 {
  font-size: 84px; line-height: 0.95;
  letter-spacing: -0.035em; font-weight: 600;
  margin: 0; text-wrap: pretty;
}
.gk-h2 {
  font-size: 52px; line-height: 1.0;
  letter-spacing: -0.03em; font-weight: 600;
  margin: 0; text-wrap: pretty;
}
.gk-h3 {
  font-size: 28px; line-height: 1.1;
  letter-spacing: -0.02em; font-weight: 600;
  margin: 0;
}

/* Pink highlight under a word — replaces the SIGNAL yellow underline */
.gk-hl-pink {
  display: inline-block; position: relative;
  padding: 0 4px;
}
.gk-hl-pink::before {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 4px; height: 16px;
  background: var(--pink); z-index: 0;
  border-radius: 4px;
}
.gk-hl-pink > span { position: relative; z-index: 1; }

.gk-hl-yellow {
  display: inline-block; position: relative;
  padding: 0 4px;
}
.gk-hl-yellow::before {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 4px; height: 16px;
  background: var(--yellow); z-index: 0;
  border-radius: 4px;
}
.gk-hl-yellow > span { position: relative; z-index: 1; }

/* Soft corner accent — replaces the SIGNAL hard-cut yellow triangle */
.gk-soft-corner {
  position: absolute;
  width: 92px; height: 92px;
  border-radius: 0 var(--r-xl) 0 var(--r-xl);
}

/* Link reset */
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }

/* Scrollbar removal for the prototype frame */
.gk-canvas, .gk-canvas * { scrollbar-width: none; }
.gk-canvas *::-webkit-scrollbar { display: none; }