/* =========================================================================
Atlas Claw — Brand tokens (Rebel Alliance command-tech refresh)
Single source of truth for the visual identity. app.css maps its internal
semantic variables onto these --ac-* tokens, so themes live here.
The system collapses the old brand-vs-accent split: the rebel insignia
IS the call-to-action. One hot color (mark-orange) carries both. Three
support accents — scope (hologram blue), vector (console green), and
target (HUD amber) — each with a single role that components must hold.
FONTS — temporarily routed through Google Fonts while assets/fonts/ is
empty. Swap to @font-face when the .woff2 files land. Manrope is the
display family (mid-century-modern humanist geometric sans, à la the
Sandgrouse Studio "A New Hope" poster); Inter for UI/body; JetBrains
Mono for readouts. No serif italic decorator — mid-century-modern uses
weight + color contrast for hierarchy, not italic typeface contrast.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* -- Foundation: command-deck surfaces ---------------------------------- */
/* Light side (default-light surface ramp): warm off-white with a poster
hue, but light value — keeps the printed Rebel-Alliance feel without
the heavy parchment soak. Dual-purpose: also the wordmark color on
the dark theme, so warming this token spills warm-on-navy into the
sidebar lockup. Earlier #E8DCC0 was too soaked; this dials it back. */
--ac-bone: #F7F4EC; /* page background — lifted pale stone, whisper of warmth */
--ac-bone-raised: #FBF8F0; /* raised surface — barely lifted from page (Sandgrain restraint) */
--ac-bone-line: #D8D2C3; /* hairline divider — warm-leaning soft grey */
--ac-ink: #0E1418; /* primary text (cool, almost charcoal) */
--ac-muted: #6E7785; /* secondary text — 4.12:1 on --ac-bone, so AA
only at 18.66px+, or 14px+ bold */
--ac-muted-paper: #5F6774; /* same hue darkened until small text clears AA
on BOTH light grounds — 5.19:1 on --ac-bone,
4.97:1 on --ac-paper. #656D7A also passes but
only reaches 4.54 on paper, too thin a margin
to survive a future tweak to either colour.
For muted text under 18.66px on either light
ramp. Not for .sidebar: that scope is dark,
where darker reads as less contrast. */
--ac-steel: #5B6671; /* dividers, disabled, plate edge */
--ac-steel-soft: #B8BFC7; /* soft pewter — secondary borders */
/* Paper ramp — the wiki reading room (`.wiki-surface`). A second light ramp,
half a step warmer and deeper than the bone ramp above, tuned separately
for long-form reading on a surface that is always light regardless of
theme. Bone and paper are close enough that they could plausibly collapse
into one ramp; they are kept apart because both values were tuned by hand
and merging them would shift a surface someone deliberately picked.
--ac-paper-raised / --ac-paper-line match --ac-bone-raised / --ac-bone-line
exactly, so those alias rather than repeat. */
--ac-paper: #F2EFE7; /* reading surface */
--ac-paper-raised: var(--ac-bone-raised);
--ac-paper-sunk: #EAE6DA; /* inset — code blocks, wells */
--ac-paper-line: var(--ac-bone-line);
--ac-paper-line-soft: rgba(14, 20, 24, 0.08);
--ac-paper-ink: #1A1A1A; /* body text on paper */
--ac-paper-ink-soft: #4A4F55; /* secondary text on paper — 7.19:1 */
/* Status ink for light surfaces. These are theme-INDEPENDENT on purpose:
the light theme points its ink tier at them, and `.wiki-surface` — which
is always paper no matter what data-theme says — uses them directly. Going
through the theme-dependent --ac-*-ink aliases would hand the wiki the
dark-ramp accents (2.1:1 on paper) whenever the app is in dark mode. */
/* Personal-tier paper — one step deeper again, so a personal wiki page is
distinguishable from an org page at a glance without a banner. */
--ac-paper-alt: #F0EBDE;
--ac-paper-alt-raised: #F8F4E8;
--ac-paper-alt-sunk: #E6E1D2;
--ac-paper-info: #1876A2; /* 4.60:1 on --ac-bone, 4.77:1 on paper */
--ac-paper-success: #357C46; /* 4.63:1 */
--ac-paper-warning: #976400; /* 4.62:1 */
/* Dark side (default surface ramp): twilight blue-grey. Lifted out of
near-black so the mark color doesn't read as a flag combo. */
--ac-void: #182734; /* deepest dark — page background */
--ac-slate: #213040; /* primary dark surface — sidebar, cards */
--ac-slate-panel: #2B3B4D; /* raised dark surface */
--ac-slate-line: #36475A; /* hairline border on dark */
--ac-slate-line-2: #44566B; /* hover / stronger borders on dark */
--ac-bone-dim: #BFC6CE; /* secondary text on dark */
/* -- Insignia & accents ------------------------------------------------- */
/* Rebel mark — flight-suit orange (X-wing pilot, R2-D2 panel). Warm, not
red. Brand AND primary action collapse here; the mark IS the alert
color. Don't introduce a separate "brand" color. One hot point per
screen. The previous red-orange #E83820 read as flag/military; this
warmer hue reads as ember/sunset. */
--ac-mark: #C25A1E; /* muted terra-cotta — mark, CTA, hover, active (Sandgrain restraint, dialed back from saturated flight-suit orange) */
--ac-mark-bright: #D86D2C; /* :hover lift */
--ac-mark-deep: #8F3F11; /* :active, deep borders */
--ac-mark-soft: #F3D6BD; /* tint for fills — pale peach */
--ac-mark-paper: #B0521A; /* terra-cotta dialled for AA on paper — 4.70:1 on bone. The
fill under --ac-on-mark; also the light-theme mark ink. */
--ac-scope: #4FB5E5; /* hologram blue — info, links, secondary action */
--ac-scope-deep: #2A85B5;
--ac-scope-soft: #DAECF7;
--ac-vector: #65BD7A; /* console green — live, success, online */
--ac-vector-deep: #3F8D52;
--ac-vector-soft: #DDF1E1;
--ac-target: #FFB627; /* HUD amber — warning, attention */
--ac-target-deep: #B07A0E;
--ac-target-soft: #FFEBC2;
/* Danger — cooler red, sits below the mark to keep the mark sovereign. */
--ac-danger: #C73424;
--ac-danger-tint: rgba(199, 52, 36, 0.10);
/* -- Type --------------------------------------------------------------- */
--ac-font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; /* wordmark + headings — mid-century-modern humanist geometric */
--ac-font-decorator: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; /* greeting decorator — same family at lighter weight + accent color */
--ac-font-ui: 'Inter', system-ui, -apple-system, sans-serif; /* UI + body text */
--ac-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* readouts, IDs, telemetry */
/* Long-form reading only — wiki article bodies and ledes on the paper ramp.
The one serif in the system; do not use it for UI chrome. Loaded from the
reader's system stack rather than webfonts, so it costs nothing. */
--ac-font-reading: 'Charter', 'Iowan Old Style', 'Source Serif Pro', 'Source Serif 4', Georgia, 'Times New Roman', serif;
/* -- Semantic aliases --------------------------------------------------- */
/* Components reference these, not the raw tokens. The aliases let us
re-skin without sweeping the component layer. Disciplined mapping:
mark = brand + interactive; scope = info/secondary; vector = success;
target = warning. Four roles, four colors. */
--ac-brand: var(--ac-mark);
--ac-accent: var(--ac-mark);
--ac-accent-hover: var(--ac-mark-bright);
--ac-accent-deep: var(--ac-mark-deep);
--ac-accent-soft: var(--ac-mark-soft);
--ac-info: var(--ac-scope);
--ac-info-soft: var(--ac-scope-soft);
--ac-success: var(--ac-vector);
--ac-success-soft: var(--ac-vector-soft);
--ac-warning: var(--ac-target);
--ac-warning-soft: var(--ac-target-soft);
/* -- Accent ink tier ---------------------------------------------------- */
/* An accent drawn as TEXT or an ICON needs a different value than the same
accent drawn as a fill or a dot: the fill sits on the surface, the ink
sits on top of it. Fills keep the raw token; ink resolves per theme so
body-size text clears WCAG AA (4.5:1).
On the dark ramp scope/vector/target already clear it comfortably
(5.8–7.7:1 on --ac-slate), so their ink is the raw token. The light ramp
re-points all three downward — the saturated values sit at 1.6–2.1:1 on
bone, which is why light-theme status text was unreadable.
Danger lifts on dark (#C73424 is only 2.5:1 on slate) and stays put on
light (4.8:1 on bone). The mark keeps its raw value here: at 3.1:1 on
slate it is *not* AA as dark-theme text, but changing it shifts the brand
hue, so that call is left open rather than made silently. */
--ac-info-ink: var(--ac-scope); /* 5.81:1 on --ac-slate */
--ac-success-ink: var(--ac-vector); /* 5.84:1 */
--ac-warning-ink: var(--ac-target); /* 7.67:1 */
--ac-danger-ink: #E4786C; /* 4.61:1 — danger lifted for text on slate */
--ac-mark-ink: var(--ac-mark);
/* Text/icon ON a mark-filled surface (primary button, unread pill).
Same value both themes; pairs with --ac-mark-paper at 4.90:1. */
--ac-on-mark: #FFF8EE;
/* Surface ramp resolves per theme. Default :root is the dark/command-deck
ramp; html[data-theme="light"] overrides to the bone ramp further down. */
--ac-surface: var(--ac-slate);
--ac-surface-raised: var(--ac-slate-panel);
--ac-surface-inverse: var(--ac-void);
}
/* =========================================================================
Header / lockup component
Orb mark + "ATLAS CLAW" wordmark (+ optional tagline). Used by
templates/partials/brand_lockup.html.twig and the brand preview.
Size by setting font-size on .ac-lockup; everything scales in em.
========================================================================= */
.ac-lockup {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--ac-font-display);
line-height: 1;
}
.ac-lockup__mark {
width: 2.6em;
height: 2.6em;
flex: none;
color: var(--ac-mark); /* rebel insignia — the mark is the alert color */
}
.ac-lockup__text {
display: flex;
flex-direction: column;
gap: 0.28em;
min-width: 0;
}
.ac-lockup__wordmark {
font-weight: 600;
font-size: 1.3em;
letter-spacing: 0.16em; /* wider tracking for command-bar feel */
text-transform: uppercase;
}
.ac-lockup__wordmark .ac-atlas { color: var(--ac-bone); } /* on dark surfaces */
.ac-lockup__wordmark .ac-claw { color: var(--ac-mark); }
.ac-lockup__tagline {
font-family: var(--ac-font-mono);
font-weight: 400;
font-size: 0.62em;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ac-muted);
}
/* Reversed treatment: ink wordmark on a bone surface. */
.ac-lockup--on-paper .ac-lockup__mark { color: var(--ac-mark); }
.ac-lockup--on-paper .ac-lockup__wordmark .ac-atlas { color: var(--ac-ink); }
.ac-lockup--on-paper .ac-lockup__tagline { color: var(--ac-muted); }
/* =========================================================================
Light theme — bone ramp
Default :root is dark. Light mode re-points the surface ramp and text
ramp to the bone palette; accents are saturated enough to work on both.
========================================================================= */
html[data-theme="light"] {
/* Surfaces — bone ramp */
--navy-0: var(--ac-bone); /* page background */
--navy-1: var(--ac-bone-raised); /* sidebar, primary surfaces */
--navy-2: #FFFFFF; /* most-raised surface */
--navy-3: var(--ac-bone-line); /* borders */
--navy-4: var(--ac-steel-soft); /* hover borders */
/* Text — ink ramp */
--paper-0: var(--ac-ink); /* primary text */
--paper-1: #353C45; /* secondary text */
--paper-2: var(--ac-muted); /* tertiary text */
/* Bronze maps to the mark, but the legacy name is kept (app.css internal). */
--bronze: var(--ac-mark);
--bronze-bright: var(--ac-mark-bright);
--bronze-dim: var(--ac-mark-deep);
--bronze-tint: rgba(229, 128, 47, 0.12);
/* Danger — ember red on light */
--rust: var(--ac-danger);
--rust-tint: var(--ac-danger-tint);
/* Accent ink — the saturated dark-ramp accents sit at 1.6–2.1:1 on bone, so
text and icons re-point to hue-matched darkenings that clear AA (≥4.6:1
on --ac-bone, ≥4.7:1 on --ac-bone-raised). Fills keep the raw tokens. */
--ac-info-ink: var(--ac-paper-info);
--ac-success-ink: var(--ac-paper-success);
--ac-warning-ink: var(--ac-paper-warning);
--ac-danger-ink: var(--ac-danger); /* 4.84:1 — already clears on bone */
--ac-mark-ink: var(--ac-mark-paper); /* 4.70:1 */
/* Semantic surface aliases point at the bone ramp. */
--ac-surface: var(--ac-bone);
--ac-surface-raised: var(--ac-bone-raised);
--ac-surface-inverse: var(--ac-slate);
}
/* Paper grain — light theme only. A subtle fractal-noise overlay applied
above all UI so the cream surfaces read as printed stock instead of
digital fill. pointer-events:none + fixed position means the grain
never intercepts input and never scrolls. multiply blend lets the
noise darken the cream by a hair, like ink soak. Dark theme skips
this — the same texture on navy reads as static, not paper. */
html[data-theme="light"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.12;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: light) {
html[data-theme="system"] {
--navy-0: var(--ac-bone);
--navy-1: var(--ac-bone-raised);
--navy-2: #FFFFFF;
--navy-3: var(--ac-bone-line);
--navy-4: var(--ac-steel-soft);
--paper-0: var(--ac-ink);
--paper-1: #353C45;
--paper-2: var(--ac-muted);
--bronze: var(--ac-mark);
--bronze-bright: var(--ac-mark-bright);
--bronze-dim: var(--ac-mark-deep);
--bronze-tint: rgba(229, 128, 47, 0.12);
--rust: var(--ac-danger);
--rust-tint: var(--ac-danger-tint);
--ac-info-ink: var(--ac-paper-info);
--ac-success-ink: var(--ac-paper-success);
--ac-warning-ink: var(--ac-paper-warning);
--ac-danger-ink: var(--ac-danger);
--ac-mark-ink: var(--ac-mark-paper);
--ac-surface: var(--ac-bone);
--ac-surface-raised: var(--ac-bone-raised);
--ac-surface-inverse: var(--ac-slate);
}
html[data-theme="system"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.12;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
}