/* Hive design system, global stylesheet entry point.
   Consumers link only this file; it pulls in every token + font. */
/* ==========================================================
   HIVE, Color tokens
   Source: Hive Brand Bible v0.5 (uploaded), §04 Color
   Canvas breathes between two whites (parchment / paper);
   ink instead of black; sky is a functional pulse (<=6% of
   any composition); green/amber are UI-only status colors.
   ========================================================== */

  :root{
/* ---- base palette (bible names) ---- */
  --ink:#1B1B1B;
  --ink-2:#34322E;
  --parchment:#F7F5F2;   /* warm default canvas */
  --paper:#FFFFFF;       /* highlight / spotlight surface, ~1 zone in 3 */
  --stone-6:#6F6A62;      /* secondary text on parchment/paper */
  --stone-4:#A6A199;      /* tertiary text, captions, disabled, guides */
  --line:rgba(27,27,27,.13);
  --line-soft:rgba(27,27,27,.07);

  --sky:#6FA6DC;          /* the pulse, selection, focus, "thinking" */
  --sky-deep:#4D86C2;
  --sky-bg:#E4EDF7;

  --live:#3E9B6C;         /* done / approved / posted, UI only */
  --live-bg:#E4F1E9;
  --wait:#C9912F;         /* needs a human, UI only */
  --wait-bg:#F5EBD7;
  --alert:#C4543F;        /* rare, errors / misuse marks only */

  /* ---- semantic aliases ---- */
  --surface-canvas:var(--parchment);
  --surface-highlight:var(--paper);
  --surface-inverse:var(--ink);
  --text-primary:var(--ink);
  --text-secondary:var(--stone-6);
  --text-tertiary:var(--stone-4);
  --text-on-inverse:var(--parchment);
  --border-default:var(--line);
  --border-soft:var(--line-soft);
  --accent-pulse:var(--sky);
  --accent-pulse-deep:var(--sky-deep);
  --status-live-fg:var(--live);
  --status-live-bg:var(--live-bg);
  --status-wait-fg:var(--wait);
  --status-wait-bg:var(--wait-bg);
  --status-think-fg:var(--sky-deep);
  --status-think-bg:var(--sky-bg);
  --status-alert-fg:var(--alert);

  /* ---- glass (§10 Glass & light), organic imagery only, never on flat surfaces ---- */
  --glass-light-bg:rgba(255,255,255,.46);
  --glass-light-border:rgba(255,255,255,.6);
  --glass-dark-bg:rgba(27,27,27,.5);
  --glass-dark-border:rgba(255,255,255,.16);
  --glass-blur:16px;
}

/* Hive typography: Figtree (body, UI, labels) + SF Pro Display system stack (display). */
/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




nav.topnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);padding:15px clamp(20px,3.2vw,48px);transition:background .35s,box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
nav.topnav.scrolled{background:rgba(247,245,242,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:rgba(27,27,27,.05)}
nav.topnav .tn-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:600;font-size:17.5px;color:var(--ink)}
nav.topnav .tn-brand svg{width:24px;height:24px;color:var(--ink)}
nav.topnav .tn-links{display:flex;gap:4px;align-items:center}
nav.topnav .tn-links a{font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--ink);opacity:1;padding:8px 12px;border-radius:999px;transition:.2s;white-space:nowrap}
nav.topnav .tn-links a:hover{opacity:1;background:rgba(27,27,27,.06);color:var(--ink)}
nav.topnav .tn-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
nav.topnav .tn-ghost{font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.55);border:1px solid transparent;padding:9px 18px;border-radius:999px;transition:.2s;white-space:nowrap}
nav.topnav .tn-ghost:hover{background:#fff;color:var(--ink)}
nav.topnav .tn-cta{font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--parchment);background:var(--ink);padding:9px 18px;border-radius:999px;transition:.2s;white-space:nowrap}
nav.topnav .tn-cta:hover{background:#000;color:var(--parchment);transform:translateY(-1px)}
@media (max-width:900px){nav.topnav .tn-links{display:none}}
@keyframes herodrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2.5%,-1.5%,0) scale(1.04)}100%{transform:translate3d(-2%,1.5%,0) scale(1.02)}}
.herowrap{overflow:hidden;position:relative;background:linear-gradient(180deg,#7f97ec 0%,#8aa2ee 30%,#96acef 55%,#a9bcf1 66%,#c9d3f3 76%,#e2e6f4 85%,#f1f1f4 93%,var(--parchment) 100%)}
.herowrap::before{content:"";position:absolute;inset:-14%;background:radial-gradient(38rem 30rem at 12% 12%,rgba(150,200,250,.75),transparent 55%),radial-gradient(40rem 24rem at 68% 30%,rgba(255,255,255,.5),transparent 60%),radial-gradient(36rem 22rem at 22% 48%,rgba(255,255,255,.45),transparent 62%),radial-gradient(24rem 16rem at 26% 32%,rgba(255,255,255,.65),transparent 55%),radial-gradient(44rem 32rem at 86% 16%,rgba(92,102,230,.75),transparent 58%),radial-gradient(30rem 24rem at 70% 38%,rgba(120,150,245,.6),transparent 55%),radial-gradient(20rem 14rem at 48% 22%,rgba(255,255,255,.55),transparent 58%),radial-gradient(34rem 26rem at 6% 58%,rgba(70,120,240,.6),transparent 58%),radial-gradient(26rem 20rem at 38% 54%,rgba(170,210,250,.55),transparent 55%),radial-gradient(30rem 20rem at 88% 62%,rgba(100,120,238,.55),transparent 58%),radial-gradient(22rem 16rem at 60% 70%,rgba(255,255,255,.45),transparent 58%),radial-gradient(28rem 20rem at 18% 82%,rgba(130,165,245,.5),transparent 58%);filter:blur(9px);pointer-events:none;animation:herodrift 26s ease-in-out infinite alternate}
.herowrap::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:36%;background:linear-gradient(180deg,rgba(247,245,242,0) 0%,rgba(247,245,242,.5) 42%,rgba(247,245,242,.9) 78%,var(--parchment) 100%);pointer-events:none;z-index:-1}
.herowrap>*{position:relative}
:root{
  --f-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-ui:'Figtree',system-ui,sans-serif;
  --f-mono:'Figtree',system-ui,sans-serif;

  /* weights actually used in the bible */
  --fw-wordmark:280;
  --fw-body:430;
  --fw-display-h2:520;
  --fw-display-h1:540;
  --fw-display-hero:560;
  --fw-ui-title:560;
  --fw-ui-button:500;

  /* type scale, size/line-height/tracking, per bible §05 */
  --type-display-size:clamp(44px,7vw,96px);
  --type-display-lh:0.96;
  --type-display-tracking:-0.05em;

  --type-h1-size:clamp(34px,5vw,64px);
  --type-h1-lh:1.02;
  --type-h1-tracking:-0.045em;

  --type-h2-size:clamp(26px,3.4vw,40px);
  --type-h2-lh:1.08;
  --type-h2-tracking:-0.035em;

  --type-title-size:22px;
  --type-title-lh:1.25;
  --type-title-tracking:-0.01em;

  --type-body-size:17px;
  --type-body-lh:1.55;
  --type-body-tracking:0em;

  --type-label-size:11.5px;
  --type-label-lh:1.4;
  --type-label-tracking:.18em;
}

/* ==========================================================
   HIVE, Spacing, radii & motion tokens
   Source: Hive Brand Bible v0.5, §07 Graphic language
   Radii: soft form, hard system, chips/inputs tightest,
   media frames loosest. Hairlines do the bureaucracy.
   ========================================================== */
:root{
  /* radii */
  --r-chip:12px;    /* chips, inputs */
  --r-card:20px;    /* cards */
  --r-frame:32px;   /* media / product-UI frames */
  --r-pill:999px;   /* buttons, status pills */

  /* layout gutter, responsive page margin */
  --gut:clamp(20px,4vw,56px);

  /* recurring literal spacing values from the bible, promoted to tokens */
  --space-xs:10px;
  --space-sm:14px;
  --space-md:18px;
  --space-lg:26px;
  --space-xl:36px;
  --space-2xl:46px;
  --space-3xl:64px;
  --space-4xl:96px;

  /* motion, §07 rule-line */
  --ease-standard:ease-out;
  --dur-micro:200ms;      /* hover / press */
  --dur-reveal:600ms;     /* section reveal, 16px rise, once */
  --dur-breath:6800ms;    /* brand mark breathe, sine in-out, only while working */
}

/* ==========================================================
   Langdock-derived tokens, visual/UX reference layer
   Source: user-provided screenshots of langdock.com + app.langdock.com
   (marketing site sections + product chat UI), analyzed 2026-07-09.
   These are SECONDARY accents for section variety and product-chrome
   contexts. Hive's ink/parchment/paper/sky remain primary, see
   readme.md "Langdock learnings" for usage rules.
   ========================================================== */
:root{
  /* muted "solutions grid" block colors, one per section, never combined */
  --ld-olive:#3B3A2E;
  --ld-charcoal:#33343A;
  --ld-teal-deep:#0F3A40;
  --ld-slate-green:#55625B;
  --ld-sage:#C9D1C8;
  --ld-khaki:#C7BEA0;
  --ld-navy:#173247;

  /* card + surface greys observed across langdock.com sections */
  --ld-card:#ECEBE7;         /* big feature-card grey on the light canvas */
  --ld-canvas:#F2F1EE;      /* cooler, greyer cousin of Hive's parchment */
  --ld-ink:#1A1A1A;
  --ld-text-muted:#6E6E6E;
  --ld-line:rgba(0,0,0,.09);
  --ld-indigo:#3D5AFE;       /* primary product-accent: buttons, toggles, EU marks */
  --ld-indigo-bg:#DEE3FB;    /* selected/"Standard" state fill */

  /* product-chrome (browser mockup) */
  --ld-chrome-bg:#ECECE9;
  --ld-chrome-dot:#CDCDCA;
  --ld-chrome-radius:16px;

  /* card radius used across the solutions grid + trust cards */
  --ld-block-radius:28px;
}