/* HolloH Office — shared base tokens, fonts, theme + office colour mapping.
   Each landing page links this, then adds its own page-specific <style>. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');

:root {
  /* brand core */
  --green: #8CCB63;
  --green-600: #6FA05A;
  --green-700: #588a44;
  --muted: #6FA05A;
  /* pastel green ladder (for soft contrast steps, no harsh gradients) */
  --g-50:  #F5FAF0;
  --g-100: #EAF4E0;
  --g-200: #DBEBCB;
  --g-300: #C4DEA8;
  --g-400: #A6D183;
  /* status (used sparingly) */
  --ok: #2D8A3E;
  --info: #2D5FA1;
  --info-soft: #5A9FD4;
  --warn: #D4621F;
  --alert: #C0392B;

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-play: 'Fredoka', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1200px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 30px;

  /* ---- LIGHT THEME (default) ---- */
  --bg: #ffffff;
  --bg-2: #F6FAF2;
  --bg-3: #EFF5E8;
  --surface: #ffffff;
  --surface-2: #F6FAF2;
  --ink: #2E3136;
  --text: #2E3136;
  --text-sub: #56625a;
  --text-mut: #8a9886;
  --border: #E6EBE0;
  --border-2: #D8E0CE;
  --shadow-sm: 0 2px 8px rgba(30,40,25,.06);
  --shadow-md: 0 14px 40px rgba(30,40,25,.10);
  --shadow-lg: 0 36px 90px rgba(30,40,25,.16);
  --on-green: #20300F;

  /* office scene (light) */
  --off-floor: #eef4e8;
  --off-floor2: #e5efdc;
  --off-line: rgba(46,49,54,.09);
  --off-wall: #f2f6ee;
  --off-wall2: #e8efe1;
  --off-wallbase: #d7e1cc;
  --off-desk-top: #ccd7c2;
  --off-desk-r: #b4c2a8;
  --off-desk-l: #a1b095;
  --off-screen: #2E3136;
  --off-pot: #c07a55;
  --off-leaf: #6FA05A;
  --off-leaf2: #8CCB63;
  --off-clock: #ffffff;
  --off-clock-rim: #ccd7c2;
  --off-win: #c4d2b6;
  --off-bub: #ffffff;
  --off-bub-ink: #2E3136;
  --off-bub-bd: #dde7d2;
}

[data-theme="dark"] {
  --bg: #0C0F0C;
  --bg-2: #0f140e;
  --bg-3: #121711;
  --surface: #131613;
  --surface-2: #161c14;
  --ink: #E8F0E4;
  --text: #E8F0E4;
  --text-sub: #a6b89f;
  --text-mut: #7A9474;
  --border: #20281e;
  --border-2: #2a3526;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --shadow-md: 0 16px 44px rgba(0,0,0,.5);
  --shadow-lg: 0 40px 100px rgba(0,0,0,.6);
  --on-green: #112207;
  --g-50:  #16201312;
  --g-100: #18221556;

  --off-floor: #151c13;
  --off-floor2: #111810;
  --off-line: rgba(232,240,228,.07);
  --off-wall: #18201610;
  --off-wall: #171f15;
  --off-wall2: #10160f;
  --off-wallbase: #0b100a;
  --off-desk-top: #243020;
  --off-desk-r: #1b241a;
  --off-desk-l: #141b13;
  --off-screen: #0a0e0a;
  --off-pot: #7c4c39;
  --off-leaf: #43703a;
  --off-leaf2: #6FA05A;
  --off-clock: #10160f;
  --off-clock-rim: #2a3526;
  --off-win: #2c3827;
  --off-bub: #1a2117;
  --off-bub-ink: #E8F0E4;
  --off-bub-bd: #2c3827;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01','cv01';
  transition: background .4s ease, color .4s ease;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* buttons */
.btn { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; border: 0; border-radius: 999px; padding: .85em 1.5em; cursor: pointer; display: inline-flex; align-items: center; gap: .55em; transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s; text-align: center; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--on-green); box-shadow: 0 8px 22px rgba(140,203,99,.34); }
.btn-primary:hover { background: var(--green-600); box-shadow: 0 12px 30px rgba(111,160,90,.4); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border-2); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-700); }
.btn-lg { font-size: 1.06rem; padding: 1em 1.8em; }

.hh-ic { display: inline-block; vertical-align: middle; }

/* theme toggle */
.theme-btn { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--surface); color: var(--text); display: inline-grid; place-items: center; cursor: pointer; transition: border-color .2s, transform .2s, background .3s; }
.theme-btn:hover { border-color: var(--green); transform: rotate(-12deg); }

/* eyebrow / pill */
.eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); display: inline-flex; align-items: center; gap: .55em; }
.pill { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; font-weight: 600; padding: .4em .85em; border-radius: 999px; background: var(--g-100); color: var(--green-700); border: 1px solid var(--border); }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* office helper */
.hh-office { width: 100%; }
.hh-office-svg { width: 100%; height: 100%; }

/* window chrome (placeholder + screenshot frames) */
.winchrome { border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.winbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.winbar i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); display: inline-block; }
.winbar i:nth-child(1){ background:#e0b3a3;} .winbar i:nth-child(2){ background:#e6d4a3;} .winbar i:nth-child(3){ background:#b6d6a0;}
.winbar .winurl { margin-left: 10px; font-family: var(--font-mono); font-size: .74rem; color: var(--text-mut); }