/* ============================================================================
   Cosmixon — BRAND LAYER. The single definition of the type system, the design
   tokens, and the COSMIX/ON wordmark.

   Linked by every Cosmixon-owned page: /, /apps/, /about/ (landing) and
   /admin/hub (served by admin-backend/routers/hub_page.py). Keeping it in ONE
   file is the point — the `.on` rule below is load-bearing and fails silently,
   so a second copy anywhere is a guaranteed drift bug.

   SIGNATURE MARK — never remove:
     .wordmark = COSMIX + <span class="on">ON</span>
     `.on` MUST reset background-clip so it renders solid mint instead of
     inheriting the parent's transparent gradient fill. Lose that reset and the
     word "ON" goes invisible while the page still looks fine.
   ========================================================================== */

/* ── Fonts (self-hosted; immutable, never cache-busted) ──────────────────── */
@font-face{
  font-family:'Anuphan'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(fonts/anuphan-var-thai.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Anuphan'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(fonts/anuphan-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anuphan'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(fonts/anuphan-var-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/space-grotesk-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Base ink — glass needs something opaque to *be* glass over */
  --ink-900:#05060f; --ink-800:#090c1a; --ink-700:#0e1226; --ink-600:#151b33;

  /* Aurora hues */
  --cyan:#00cfff; --violet:#7b61ff; --mint:#00e676; --amber:#ffab00; --rose:#ff4d8d;

  /* Tint ramp */
  --cyan-200:#6fe9ff; --violet-200:#c2a8ff; --mint-200:#6dffb6;
  --mint-100:#b6ffda;              /* the "ON" colour. Do not change. */
  --ice-50:#eaf4ff;

  /* Text ramp (old --dim #42597d was 2.68:1 — a real contrast failure) */
  --text-hi:#eaf1ff; --text:#c6d4ee; --text-mid:#8fa3c8; --text-dim:#6b80a6;

  /* Glass recipe */
  --glass-base:rgba(9,12,26,.72);
  --glass-wash:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  --glass-line:rgba(255,255,255,.10);
  --glass-line-hi:rgba(255,255,255,.18);
  --glass-blur:blur(18px) saturate(140%);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.14);

  /* Elevation */
  --e1:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -12px rgba(0,0,0,.50);
  --e2:0 2px 4px rgba(0,0,0,.30), 0 18px 48px -18px rgba(0,0,0,.60);
  --e3:0 32px 80px -24px rgba(0,0,0,.70);

  /* Radii */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* Spacing (8px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section-y:clamp(88px,11vw,168px);
  --measure:68ch;
  --page:1120px;

  /* Type */
  --font-sans:'Anuphan',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Space Grotesk','Anuphan',-apple-system,BlinkMacSystemFont,sans-serif;
  --fs-display:clamp(40px,8vw,76px);
  --fs-h1:clamp(30px,5vw,46px);
  --fs-h2:clamp(23px,3.4vw,34px);
  --fs-h3:clamp(17px,2.2vw,21px);
  --fs-lead:17px; --fs-body:15px; --fs-sm:13px; --fs-xs:11px;

  /* Motion */
  --t-fast:160ms cubic-bezier(.2,.8,.2,1);
  --t-mid:220ms cubic-bezier(.2,.8,.2,1);

  --header-h:60px;

  /* 2026-08-27 landing redesign — layout metrics only, nothing visual redefined */
  --rail-h:2px;                         /* scroll progress rail under the header */
  --orbit-r:clamp(120px,17vw,200px);    /* satellite orbit x-radius (#orbit stage) */
}

/* ── Wordmark — SIGNATURE MARK #1 ────────────────────────────────────────── */
.wordmark{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:.14em;white-space:nowrap;
  display:inline-block;line-height:1.05;
}
.wordmark .cx{
  display:inline-block;
  background:linear-gradient(120deg,#6fe9ff 0%,#c2a8ff 50%,#6dffb6 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 11px rgba(0,207,255,.55)) drop-shadow(0 0 26px rgba(157,123,255,.38));
  animation:shine 8s linear infinite, cxGlow 3.6s ease-in-out infinite;
}
@keyframes shine{to{background-position:200% center}}
@keyframes cxGlow{
  0%,100%{filter:drop-shadow(0 0 9px rgba(0,207,255,.5)) drop-shadow(0 0 18px rgba(157,123,255,.32))}
  50%{filter:drop-shadow(0 0 17px rgba(0,207,255,.8)) drop-shadow(0 0 36px rgba(157,123,255,.55))}
}
/* "ON" — green living core. The background-clip reset below is LOAD-BEARING:
   without it, ON inherits the parent's transparent text fill and disappears. */
.wordmark .on{
  position:relative;display:inline-block;
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--mint-100);color:var(--mint-100);
  /* static glow lives on the BASE rule so the mark still reads when the
     animation is suppressed by prefers-reduced-motion */
  text-shadow:0 0 12px rgba(0,230,118,.8),0 0 30px rgba(0,230,118,.45);
  animation:onGlow 2.4s ease-in-out infinite;
}
.wordmark .on::before{
  content:'';position:absolute;inset:-55% -34%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,230,118,.6),rgba(0,230,118,.18) 55%,transparent 78%);
  filter:blur(16px);pointer-events:none;
  opacity:.62;
  animation:onHalo 2.4s ease-in-out infinite;
}
@keyframes onGlow{
  0%,100%{transform:scale(1);
    text-shadow:0 0 10px rgba(0,230,118,.85),0 0 26px rgba(0,230,118,.55),0 0 46px rgba(0,230,118,.3)}
  50%{transform:scale(1.07);
    text-shadow:0 0 16px #00e676,0 0 36px rgba(0,230,118,.95),0 0 64px rgba(0,230,118,.65),0 0 104px rgba(0,230,118,.4)}
}
@keyframes onHalo{
  0%,100%{opacity:.5;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.18)}
}

/* The mark's glow is declared on the base rules above, so freezing the animation
   here still leaves COSMIX/ON reading correctly. (The old landing froze it and
   lost the glow entirely, because the shadow only existed inside the keyframes.) */
@media (prefers-reduced-motion:reduce){
  .wordmark .cx,.wordmark .on,.wordmark .on::before{animation:none}
}