/* Cison — global tokens + baseline · global_v100.css
   Brand tokens from research.md §9 (and CLAUDE.md). The Prism design files are
   the visual spec; this is the framework-native translation of its tokens.
   Font-size floor: never below 0.875rem (0.75rem only for footnote-like text);
   always rem, never px. */

/* ── Brand typeface — self-hosted Geist + Geist Mono (Phase 5.7 · D3) ─────────
   Never a third-party font beacon: the woff2 files live in /cdn/lib/geist/ and
   the relative src below resolves from this file (/cdn/s/ → ../lib/geist/).
   font-display:swap paints the system fallback instantly, then swaps to Geist
   on load — no invisible text, no layout beacon. --font-sans/--font-mono list
   'Geist' first, so these faces take over automatically once loaded. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('../lib/geist/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../lib/geist/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../lib/geist/Geist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('../lib/geist/Geist-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../lib/geist/GeistMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../lib/geist/GeistMono-Medium.woff2') format('woff2'); }

:root {
	/* neutrals */
	--surface:    #FAFAF7;
	--panel:      #FFFFFF;
	--ink:        #0E0E0C;
	--ink-2:      #4A4A44;
	--ink-3:      #8A8A82;
	--rule:       #E8E6DE;
	--wordmark:   #2A2730;

	/* jewel face / facet / soft — one triple per module */
	--ruby:       #C62F3E;  --ruby-facet:     #AB2936;  --ruby-soft:     #F8E1E4;  /* Messages */
	--amethyst:   #7B5BB5;  --amethyst-facet: #5C4193;  --amethyst-soft: #EFE9F7;  /* Connections */
	--emerald:    #2E8B57;  --emerald-facet:  #267347;  --emerald-soft:  #E2F0E9;  /* Follows */
	--sapphire:   #2A56A8;  --sapphire-facet: #244A91;  --sapphire-soft: #E0E7F3;  /* Communities */
	--citrine:    #B58A2C;  --citrine-facet:  #7A5A14;  --citrine-soft:  #F5ECD6;  /* Local */

	/* tier metals (+ a darker ink per metal for text on light) + accent */
	--gold:       #D4A23A;  --gold-ink:   #876010;
	--silver:     #A4ADB8;  --silver-ink: #4E5763;
	--bronze:     #B97A3D;  --bronze-ink: #7A4A1E;
	--accent:     #9270D6;  /* "explore" amethyst-bright — also selection/active accent */
	--accent-ink: #5B3A8F;

	/* structural tokens — the Prism's surface variants, radii, shadow.
	   Cards sit flat (border only) on the light surface; --shadow-pop is for
	   transient/raised chrome (hover, the marketing CTA), never feed cards. */
	--surface-soft: #F3F2EE;   /* quiet fills: meta tiles, inset notes, search field */
	--rule-soft:    #F0EFE9;
	--radius-card:  1rem;      /* 16px — post / panel cards */
	--radius-tile:  0.875rem;  /* 14px — tier tiles, meta cards, breakpoint cards */
	--radius-media: 0.75rem;   /* 12px — media frames */
	--radius-pill:  999px;
	--shadow-pop:   0 12px 30px rgba(14,14,12,0.12);

	/* type — Geist is the brand face, self-hosted from /cdn/lib/geist/ via the
	   @font-face block above (no third-party beacon). System stack is the
	   font-display:swap fallback while the woff2 loads. */
	--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* baseline — the shared vendored reset.css (cdn/lib/, symlinked out of git)
   does the hard reset; this sets the brand defaults. Universal border-box is
   OUR decision and lives here, in git — NOT in the shared reset, which other
   tenants load. Every element sizes width/height to include its own padding +
   border, so `width: 100%` + padding never overflows its container. Class-scoped
   rules still win by specificity — Font Awesome's `.svg-inline--fa` keeps
   content-box, and any rule using `all: unset` must re-declare border-box itself
   (see .group-new-row / .msg-new-row). */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }                 /* 1rem = 16px */
body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1rem;                       /* floor is 0.875rem; body sits above it */
	line-height: normal;                   /* tight default; raise per-element as needed */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* the ONLY place 0.75rem is allowed */
.footnote { font-size: 0.75rem; color: var(--ink-3); }

/* --- home (Phase 0 boot proof) --- */
.home {
	min-height: 100vh;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.home .mark { width: 96px; height: 96px; }
.home .wordmark {
	margin: 1.25rem 0 0;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wordmark);
}
.home .tagline {
	margin: 0.5rem 0 0;
	font-size: 1.125rem;
	color: var(--ink-2);
}
.home .jewels { display: flex; gap: 0.5rem; margin-top: 2rem; }
.home .jewels span { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.home .footnote { margin-top: 2.5rem; }

.j-ruby     { background: var(--ruby); }
.j-amethyst { background: var(--amethyst); }
.j-emerald  { background: var(--emerald); }
.j-sapphire { background: var(--sapphire); }
.j-citrine  { background: var(--citrine); }

/* ── The not-found page (views/common/404.php via CorePage::not_found) ────────
   Lives here, not in a module sheet, because it renders in BOTH skeletons —
   the lean public one loads only global. Self-contained: no .btn (that is
   components_v100.css, default-skeleton only). --mod is the module accent
   under the app chrome and falls back to the neutral ink elsewhere. */
.notfound { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: clamp(3rem, 12vh, 7rem) 1.5rem 4rem; color: var(--ink); font-family: var(--font-sans); }
.notfound-mark { width: 4.5rem; height: 4.5rem; margin-bottom: 0.5rem; }
.notfound-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; }
.notfound-lede { margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; max-width: 30rem; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1rem 0 0; }
.notfound-links a { display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; border-radius: var(--radius-pill); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; text-decoration: none; transition: background 120ms ease, border-color 120ms ease; }
.notfound-links a:hover { text-decoration: none; background: var(--surface-soft); border-color: var(--mod, var(--ink-3)); }
.notfound-links a.notfound-primary { background: var(--mod, var(--ink)); border-color: var(--mod, var(--ink)); color: #fff; }
.notfound-links a.notfound-primary:hover { background: var(--mod-deep, #000); border-color: var(--mod-deep, #000); }

/* The standing banner (views/_standing_banner.php) — a paused account. */
.standing-banner { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.25rem; background: rgba(198,47,62,.08); color: #9b2230; border-bottom: 1px solid rgba(198,47,62,.22); font-size: 0.9375rem; }
.standing-banner a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: auto; white-space: nowrap; }