/* ============================================================
SeminaryU × APIIS — Blended Product Design System
============================================================
BASE + COMPONENTS. The token declarations that used to open this file
now live in tokens-raw.css; link that FIRST, then this:
Set the brand "depth" on or any wrapper (blocks in tokens-raw.css):
data-depth="marketing" -> azure-led, cream, Source Serif voice (Depth 01)
data-depth="account" -> azure-led threshold, warm neutral (Depth 02)
data-depth="classroom" -> azure-led, white, Montserrat voice (Depth 03)
Depth shifts the LEAD color, surfaces and heading font only — the
component shapes stay identical so the product feels like one system.
Built on the APIIS Brand Guidelines reconciled with SeminaryU's identity.
DO NOT re-add a `:root` block here. The split exists precisely so a shell
can take the tokens without taking `body`, `h1..h4` and `.btn` with them.
THE @import BELOW IS LOAD-BEARING. Nine templates link tokens.css directly
without a companion shell — welcome.html, public_base.html,
public_catalog.html and six standalone learner screens (celebrate, evaluate,
forgot_password, lesson, login, onboarding, register, reset_password). The
import is what keeps `` a complete, self-sufficient
contract for all of them, so a new standalone template cannot forget half
the system. Pinned by test_tokens_css_imports_the_raw_layer.
The contract, stated once:
link tokens.css -> tokens + base + components (everything)
link tokens-raw.css -> tokens only, no layout, no type (base.html)
============================================================ */
@import url("tokens-raw.css");
/* ============================================================
BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--body); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-family:var(--heading); letter-spacing:-0.015em; line-height:1.14; color:var(--ink); }
.display{ font-family:var(--display); }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm); }
.eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--lead); }
.muted{ color:var(--muted); }
/* ---- APIIS wordmark — paints from the CONTRACTUAL lock tokens, never from
the palette. These are the only rules permitted to reference them. ---- */
.ap-wm{ font-family:var(--mont); font-weight:800; letter-spacing:-0.01em; }
.ap-wm .ap{ color:var(--apiis-lock-blue); } .ap-wm .iis{ color:var(--apiis-lock-green); }
/* on dark chrome the AP turns white so it reads on navy */
.on-dark .ap-wm .ap{ color:#fff; }
/* ---- The Commons coin (inject SVG via cm() helper, see tokens.js) ----
A7 (RULING-2026-08-14): `.su-wm` is deleted (zero users — the wordmark is
artwork, never type; R40). `.coin` is still ordered deleted but remains
REACHABLE from three templates (_learner_chrome + admin_base on the
BRAND_MARK_V2-off path, learner/onboarding.html unconditionally), so it
goes when BRAND_MARK_V2 retires, per D1's sequence — not before. ---- */
.coin{ position:relative; flex:none; border-radius:50%; color:var(--su-cream);
display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.34), transparent 58%), linear-gradient(135deg,var(--su-bronze),var(--su-bronze-2));
box-shadow:0 6px 20px color-mix(in srgb,var(--su-bronze) 30%,transparent); }
.coin svg{ width:64%; height:64%; }
.coin .cm{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
/* ============================================================
COMPONENTS — identical shapes across depths; only --lead changes
============================================================ */
/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:48px; padding:0 22px; border:1px solid transparent; border-radius:var(--r-pill);
font-family:var(--body); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.btn[hidden]{ display:none; }
.btn:active{ transform:translateY(1px); }
.btn-sm{ height:40px; padding:0 16px; font-size:14px; }
.btn-lg{ height:54px; padding:0 28px; font-size:16px; }
.btn-block{ width:100%; }
/* Primary = the depth's LEAD color (bronze in account, blue in classroom) */
.btn-primary{ background:linear-gradient(135deg,var(--lead),var(--lead-2)); color:var(--lead-ink,#fff);
box-shadow:0 6px 18px color-mix(in srgb,var(--lead) 32%,transparent); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 11px 26px color-mix(in srgb,var(--lead) 40%,transparent); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; transform:translateY(-2px); }
.btn-quiet{ background:var(--surface); color:var(--ink); border-color:var(--outline-strong); }
.btn-quiet:hover{ border-color:var(--lead); color:var(--lead); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--outline-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
/* Inputs (floating-label friendly) */
.field{ position:relative; display:flex; flex-direction:column; }
.input{ font-family:var(--body); font-size:15px; height:52px; padding:0 16px;
border:1px solid var(--outline-strong); border-radius:var(--r-md);
background:var(--surface); color:var(--ink); width:100%; caret-color:var(--lead);
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.input::placeholder{ color:color-mix(in srgb,var(--muted) 75%,transparent); }
.input:hover{ border-color:var(--outline-strong); }
.input:focus{ outline:none; border-color:var(--lead); box-shadow:0 0 0 4px color-mix(in srgb,var(--lead) 16%,transparent); }
.flabel{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:7px; display:block; letter-spacing:.01em; }
/* Cards */
.card{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.card-2{ box-shadow:var(--shadow-2); }
/* Tag / pill */
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
padding:5px 12px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--muted); border:1px solid var(--outline); }
.tag-lead{ background:var(--lead-soft); color:var(--lead); border-color:transparent; }
/* The bronze-soft chip the lead-soft retune displaced — kept as warmth. */
.tag-warm{ background:var(--su-bronze-soft); color:var(--su-bronze); border-color:transparent; }
.tag-blue{ background:var(--ap-sky); color:var(--ap-blue-deep); border-color:transparent; }
.tag-green{ background:var(--ap-mint); color:var(--ap-green-deep); border-color:transparent; }
.tag-gold{ background:color-mix(in srgb,var(--ap-gold) 40%,#fff); color:#7a5a12; border-color:transparent; }
/* Progress */
.bar{ height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; border:1px solid var(--outline); }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--lead),var(--lead-2)); }
[data-depth="classroom"] .bar > span{ background:linear-gradient(90deg,var(--ap-blue),var(--ap-green)); }
/* Reduced motion */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }