/* ============================================================
   Cognuum — BASE
   Design tokens, reset, and the full-viewport stage surface.
   This is the foundation every section sits on.
   ============================================================ */

:root{
  /* ============================================================
     DESIGN SYSTEM TOKENS (dark theme = default)
     These mirror the host design system 1:1 — drop the page into
     that system and these names resolve to its values (plug & play).
     ============================================================ */

  /* — Brand colors — */
  --brand-cyan:#08ccfd;        --brand-cyan-light:#00e5ff;   --brand-cyan-dark:#008a99;
  --brand-gold:#e6a31e;        --brand-gold-light:#f0b642;   --brand-gold-dark:#b88114;
  --brand-pink:#ed1280;        --brand-pink-light:#f14199;   --brand-pink-dark:#8e1552;

  /* — Backgrounds — */
  --bg-base:#030711;           --bg-deep:#05050a;            --bg-elevated:#090911;
  --bg-surface:#0c0c13;        --bg-card:#111118;            --bg-hover:#15151e;
  --bg-active:#1c1c26;         --bg-overlay:#0d1117;

  /* — Text — */
  --text-primary:#f8fafc;      --text-secondary:#94a3b8;
  --text-muted:#bbc3ce;        --text-disabled:#4b5768;

  /* — Borders — */
  --border-subtle:#181820;     --border-default:#1e1e29;
  --border-strong:#2a2a37;     --border-accent:#00b8cc;

  /* ============================================================
     SEMANTIC ALIASES — the page references these; they derive from
     the tokens above, so re-theming happens in one place.
     ============================================================ */
  --magenta:var(--brand-pink);   /* narrative */
  --cyan:var(--brand-cyan);      /* information */
  --gold:var(--brand-gold);      /* exposure / capital */
  --amber:var(--brand-gold);     /* exposure family */
  --crimson:var(--brand-pink-light);
  --grey:var(--text-secondary);
  --reality:var(--text-muted);   /* grayscale reality family */

  /* layout rhythm */
  --pad-x:56px;        /* desktop page gutter */

  /* ============================================================
     THEMED VALUE TOKENS (dark = default)
     Every value that differs between dark & light is a token here.
     theme.css remaps these for body.light — token values only, no
     component selectors. Component CSS references var(--token).
     ============================================================ */

  /* surfaces */
  --surface-stage:
    radial-gradient(115% 80% at 50% -20%, rgba(150,156,170,0.18) 0%, rgba(70,72,82,0.07) 26%, rgba(0,0,0,0) 52%),
    radial-gradient(75% 60% at 28% 22%, rgba(70,74,86,0.12) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(90% 70% at 82% 86%, rgba(74,58,44,0.10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(150% 130% at 50% 125%, rgba(0,0,0,0.92) 26%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, #0a0a0d 0%, #08080a 40%, #050506 100%),
    #050506;
  --surface-frag:linear-gradient(180deg, #070708 0%, #060607 55%, #050506 100%);
  --scrim-frag:
    linear-gradient(90deg, rgba(5,5,7,0) 38%, rgba(5,5,7,0.42) 66%, rgba(5,5,7,0.82) 100%),
    radial-gradient(80% 60% at 50% -2%, rgba(5,5,7,0.6) 0%, rgba(5,5,7,0) 60%),
    radial-gradient(90% 50% at 50% 102%, rgba(5,5,7,0.7) 0%, rgba(5,5,7,0) 60%);
  --scrim-frag-mobile:
    linear-gradient(180deg, rgba(5,5,7,0.93) 0%, rgba(5,5,7,0.66) 23%, rgba(5,5,7,0.20) 43%, rgba(5,5,7,0.20) 58%, rgba(5,5,7,0.60) 80%, rgba(5,5,7,0.92) 100%);

  /* stage decorative layers */
  --sheen-opacity:0.7;
  --sheen-blend:screen;
  --grain-opacity:0.045;

  /* frosted copy backings */
  --copy-backing-hero:rgba(0,0,0,0.2);
  --copy-backing-frag:rgba(0,0,0,0.04);

  /* text-clip headline gradients */
  --gradient-headline:linear-gradient(92deg,#9a9aa0 0%,#fbfbfd 42%,#d4d4d8 70%,#9a9aa0 100%);
  --gradient-fc-main:linear-gradient(96deg,#c2c2c8 0%,#fbfbfd 46%,#d2d2d8 100%);

  /* top bar (scrolled/frosted) */
  --topbar-scrolled-bg:rgba(8,8,11,0.66);
  --topbar-scrolled-border:var(--border-default);

  /* hero magenta dot */
  --dot-fill:var(--magenta);
  --dot-shadow:0 0 18px rgba(237,18,128,0.6);

  /* institutional CTA */
  --cta-ink:var(--text-muted);
  --cta-ink-hover:var(--text-primary);
  --cta-border:var(--border-strong);
  --cta-border-hover:var(--border-accent);

  /* framework answers (meaning-colored) */
  --answer-info:var(--cyan);
  --answer-narrative:var(--magenta);
  --answer-reality:var(--text-primary);
  --answer-exposure:var(--brand-gold-dark);

  /* semantic text inks (roles that diverge between themes) */
  --ink-wordmark:var(--text-primary);
  --ink-icon:var(--text-primary);
  --ink-hero-sub:var(--text-secondary);
  --ink-fw-heading:var(--text-secondary);
  --ink-fw-q:var(--text-primary);
  --ink-fc-white:var(--text-primary);
  --ink-fc-brand:var(--text-primary);
  --ink-fc-sub:var(--text-secondary);
  --ink-fc-sub-big:var(--text-secondary);
  --ink-emphasis:var(--text-primary);
  --ink-fc-supt:var(--text-secondary);
  --ink-fc-supt-muted:var(--text-disabled);
  --ink-fc-final-sub:var(--text-secondary);
  --ink-fc-final-border:var(--border-default);
  --ink-nav:var(--text-primary);
  --ink-hint:rgba(220,222,230,0.5);
  --ink-src:rgba(214,216,224,0.46);
  --ink-src-on:rgba(236,238,244,0.92);
  --ink-src-off:rgba(214,216,224,0.32);
  --famc-white:var(--reality);

  /* lens experience (overlay) */
  --lx-dim:linear-gradient(100deg, rgba(7,8,11,0) 0%, rgba(7,8,11,0.10) 26%, rgba(7,8,11,0.52) 40%, rgba(7,8,11,0.66) 100%);
  --lx-lens-scrim:radial-gradient(125% 95% at 30% 50%, rgba(6,7,10,0.74) 0%, rgba(6,7,10,0.42) 46%, rgba(6,7,10,0) 78%);
  --lx-close-bg:rgba(20,21,25,0.42);
  --lx-close-border:var(--border-strong);
  --lx-close-ink:var(--text-muted);
  --lx-close-bg-hover:rgba(30,31,36,0.6);
  --lx-close-border-hover:var(--border-accent);
  --lx-close-ink-hover:var(--text-primary);
  --lx-heading:var(--text-primary);
  --lx-lead:var(--text-secondary);
  --lx-meta:var(--text-secondary);
  --lx-meta-muted:var(--text-disabled);
  --lx-nav-ink:var(--text-primary);
  --lx-step-border:var(--border-default);
  --lx-step-h:var(--text-primary);
  --lx-step-p:var(--text-secondary);
  --lx-chip-border:var(--border-strong);
  --lx-chip-ink:var(--text-muted);
  --lx-chip-bg:rgba(255,255,255,0.015);
  --lx-shot-border:var(--border-default);
  --lx-shot-bg:rgba(255,255,255,0.02);

  /* ============================================================
     CONTENT PAGES (assets/css/page.css)
     The long-form page type every migrated public page uses —
     /about first, then the rest. Same rule as everything above:
     values live here, theme.css remaps them for body.light, and
     page.css references var(--token) only.
     ============================================================ */
  --page-surface:
    radial-gradient(105% 55% at 50% 0%, rgba(150,156,170,0.13) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, #08080b 0%, #060608 55%, #050506 100%);
  --page-glow:radial-gradient(closest-side, rgba(92,201,248,0.10) 0%, rgba(92,201,248,0) 72%);
  /* dissolves long-form copy BEFORE it reaches the frosted top bar. The stops
     must match --page-surface's first color exactly or the scrim reads as a
     band. Not needed on the landing page — its sections are full-bleed. */
  --page-topscrim:linear-gradient(180deg, #08080b 0%, #08080b 46%, rgba(8,8,11,0) 100%);
  --page-ink-eyebrow:var(--text-secondary);
  --page-ink-h1:var(--text-primary);
  --page-ink-h2:var(--text-primary);
  --page-ink-lead:var(--text-secondary);
  --page-ink-body:var(--text-muted);
  --page-ink-quiet:var(--text-disabled);
  --page-accent:var(--brand-accent);
  --page-rule:var(--border-default);
  --page-card-bg:rgba(255,255,255,0.02);
  --page-card-border:var(--border-default);
  --page-card-border-hover:var(--border-accent);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ height:auto; scroll-behavior:smooth; scrollbar-gutter:stable; }

body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
  overflow-x:hidden;
}

/* ----- the stage: hosts top bar, hero, and framework ----- */
.stage{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  /* luxurious obsidian: cool top spotlight, warm umber floor, deep vignette */
  background:var(--surface-stage);
}

/* ultra-faint conic sheen for a polished, high-end finish */
.stage::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    conic-gradient(from 210deg at 50% 35%,
      rgba(255,255,255,0) 0deg,
      rgba(190,196,210,0.05) 70deg,
      rgba(255,255,255,0) 150deg,
      rgba(150,140,120,0.04) 250deg,
      rgba(255,255,255,0) 360deg);
  mix-blend-mode:var(--sheen-blend);
  opacity:var(--sheen-opacity);
}

/* faint film grain */
.stage::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* accent — wordmark, hero dot, brand glyph core */
:root{ --brand-accent:#5cc9f8; --dot-fill:#5cc9f8; --dot-shadow:0 0 24px rgba(92,201,248,.45); }

/* ============================================================
   THE COGNUUM LOCKUP — brand glyph + GNUUM
   The glyph IS the first two letters merged into the mark: the two
   arcs, gap facing right, are the C; the ring concentric inside
   them is the O. So the text alongside carries only GNUUM.
   Geometry is traced from config/cognuum-glyph.json — the same
   numbers assets/js/constellation.js animates in drawBrandC — and
   src/tests/cognuumLockupParity.test.ts fails, naming the site,
   if any copy drifts. Never re-eyeball these values; edit the JSON.
   ============================================================ */

/* The arcs' greys, exactly as drawBrandC composes them
   (rgba(108,108,116) → rgba(58,59,67)). Palette-invariant by design:
   the glyph does not invert, the field under it does — see the same
   rationale in src/console-v2/login/MemberOrb.tsx. */
:root{ --glyph-arc-from:#6c6c74; --glyph-arc-to:#3a3b43; }

/* A span INSIDE .wordmark / .fs-mark / .al-mark, so each of those
   keeps its own display and spacing untouched. nowrap so the glyph and
   its letters can never be split across a line. */
.cg-lockup{ position:relative; white-space:nowrap; }

/* SCALE. The lockup is ONE WORD: the core ring is the O, so it must be
   the same size as the G N U U M beside it — not a logo parked next to
   a word. Derived, not eyeballed:

     core outer diameter, as a fraction of the viewBox
       = 2 x radius x (coreRadiusRatio + coreStrokeRatio/2) / viewBox
       = 2 x 48 x (0.34 + 0.018) / 100            [config/cognuum-glyph.json]
       = 0.34368
     Montserrat cap height = sCapHeight/unitsPerEm = 700/1000 = 0.700em
     glyph box = 0.700 / 0.34368 = 2.0368em

   The ARCS then reach ~2.86x the cap height, above and below it. That is
   correct: the ring is the letter, the arcs are the flourish. Never
   shrink the arcs to fit the cap height — that is what made the previous
   1.34em box read as mark-plus-text (its ring was 0.46x a letter).

   GAP. Measured from the RING, not from the glyph's bounding box. The
   arcs overhang the ring on the right by exactly the seat distance, and
   the word tucks INTO the C's mouth — spacing off the bounding box
   instead pushes the letters clear of the arcs and the mark goes back to
   reading as a logo beside a word.
     overhang right of the ring        = 2.0368/2 - 0.700/2 = 0.6684em
     Montserrat O->G ink gap           = O.rsb + G.lsb = 0.096em
     lockup tracking                   = 0.02em
     margin-right = -0.6684 + 0.096 + 0.02 = -0.5524em
   The ring is drawn geometry with no sidebearings of its own, so it is
   lent a real O's. Stated as a margin because letter-spacing is applied
   only between typographic character units and an atomic inline (this
   <svg>) is not one; measured at exactly 0 in Chromium.

   SEAT. The ring's centre is W/2 above the glyph's bottom edge and has
   to land on the letters' optical centre, cap-height/2 above the
   baseline:
     vertical-align = -(W/2 - cap/2) = -(1.0184 - 0.350) = -0.6684em
   Expressed against the BASELINE rather than as flex centring, so it is
   exact and independent of whatever line-height each site sets. */
.cg-glyph{
  display:inline-block;
  width:2.0368em; height:2.0368em;
  margin-right:-0.5524em;
  vertical-align:-0.6684em;
}

/* The letters are the rest of a WORD, so they take word tracking — not the
   0.42em display letterspacing the old wordmark used — and the COLOUR of the
   C's top extremity, i.e. the top stop of the arcs' gradient. One lockup, one
   ink: the letters and the arcs are the same grey, and only the ring's accent
   separates from it. Palette-invariant, exactly as the arcs are. */
.cg-letters{ letter-spacing:0.02em; color:var(--glyph-arc-from); }
.cg-arc{ fill:none; stroke-linecap:round; }
.cg-core{ fill:none; stroke:var(--brand-accent); stroke-linecap:round; }
.cg-stop-a{ stop-color:var(--glyph-arc-from); }
.cg-stop-b{ stop-color:var(--glyph-arc-to); }

/* THE ACCESSIBLE NAME. The glyph carries "Co" as a graphic and the
   visible run carries "GNUUM", so a naive lockup announces — and
   indexes — a word that is not the company name. This span holds the
   real text "Cognuum"; the graphic and the visible run are both
   aria-hidden, so the computed name is exactly "Cognuum".
   Deliberately NOT aria-label: these pages live on www precisely so
   a crawler reads TEXT, and aria-label is not text a crawler indexes.
   Deliberately not text-transform on a lowercase source either — the
   accessible name would then differ between jsdom and Chrome, which
   is a check that passes green while being wrong. */
.cg-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}