/* ============================================================
Sanctom Design System — Colors & Type
============================================================
The Sanctom palette is intentionally wide. It is built around
a contemplative, sanctuary core (Navy + Light Tan) with a
spectrum of "vibe" colors — earth, sky, water, fire — that
express the breadth of human transition the brand serves.
Use 1 grounding background + 1 accent at a time. The full
spectrum is for variety across pages, learning paths, and
marketing surfaces — never within a single composition.
============================================================ */
/* ---------- Fonts (self-hosted, served from /fonts) ---------- */
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 800;
font-style: italic;
font-display: swap;
}
/* Merriweather REMOVED 2026-05-21 per Knox-direct disposition. Inter (full
variable-weight range 100-900) now carries both body AND display/hero
contexts. The two-family system (Inter + Merriweather) collapses to a
one-family system + JetBrains Mono for code. Inter Black (weight 900)
is the new canonical hero weight. */
/* Both brand families (Inter + JetBrains Mono) are self-hosted from /fonts. */
/* ---------- Original Google-Fonts CDN snippet (kept for reference;
safe to remove from HTML now that fonts are local) ----------
*/
/*
*/
:root {
/* ===========================================================
1. RAW BRAND COLORS (from Sanctom Color Palette v2.0)
=========================================================== */
--sanctom-purple: #B30FFA;
--sanctom-magenta: #5C0047;
--sanctom-navy: #011C42;
--ink-light: #FFFFFF; /* stable white — does NOT flip with Auras (unlike the --paper-* scale) */
/* Text color for ink sitting ON an --admin-accent fill (buttons, active seg, etc.).
Default = navy, correct for light/bright accents (lime, pink, yellow). Products whose
accent is dark/saturated (e.g. Heard's blue) override this to --ink-light on .canvas-shell. */
--ink-on-accent: var(--sanctom-navy);
--sanctom-dark-green: #003327;
--sanctom-lime-green: #34E8BB;
--sanctom-bright-blue: #096FFF;
--sanctom-light-blue: #70D6FF;
--sanctom-dark-sky-blue: #0078A8; /* Knox-approved 2026-07-14 — darkened --sanctom-light-blue (same hue 197°, same saturation, L 72%→33%); 4.93:1 on white; foreground-safe companion to --sanctom-light-blue. Mirrors how --sanctom-dark-chartreuse serves --sanctom-light-yellow. */
--sanctom-dream-blue: #00B4FF; /* Dream product accent — vibrant sky blue; added 2026-06-28 */
--dream-bg-0: #000C1F; /* Dream shell gradient start — deep space-black */
--dream-bg-mid: #001A4A; /* Dream shell gradient mid — deep blue */
--dream-bg-end: #000E2E; /* Dream shell gradient end — dark blue-black */
--sanctom-orange: #FC9258;
--sanctom-bright-pink: #FB9CE5;
--sanctom-flat-pink: #FFCCF3;
--sanctom-light-yellow: #CDFA02;
--sanctom-dark-chartreuse: #6B7A00; /* Knox-ratified 2026-06-17 — darkened chartreuse; ~4.8:1 on white; foreground-safe companion to --sanctom-light-yellow */
--sanctom-bright-yellow: #FFCC14;
--sanctom-light-tan: #F9F3E9;
/* Note: the brand doc lists Light Gray as #F9F3E9 (same as
Light Tan). We split them so neutral surfaces can differ
from warm paper. Flagged in README. */
--sanctom-light-gray: #ECEAE4;
/* Suggested addition (flagged in README): a system Red for
errors / destructive states. Tuned to sit harmoniously
with Magenta and Orange in the palette. */
--sanctom-red: #E5384B;
/* EXCEPTION-009 promoted 2026-04-29: stronger pink for higher-contrast
surfaces (used in PATHS.mental.displayColor and themes.css bloom
--cta-bg). Brand-owner sign-off on file. */
--sanctom-bright-pink-strong: #FF59A8;
/* ===========================================================
1.5 SANCTOM GRADIENT — canonical cinematic-register hero treatment
(Knox 2026-05-21 disposition · Marketing-Strategy v0.3.2 §8.1.1)
The Sanctom Gradient is the canonical visual register for
emotional/cinematic surfaces (hero, founder narrative, video
opens + closes, end-frames, pitch deck title/closing, /Invest,
LinkedIn quote/stat cards). Pairs with the paper-warm-tone
architectural register (paper-200 bg + Mira's v0.4 diagrams)
for informational/architectural surfaces. Two registers, same
soul-first dialect.
Use --gradient-sanctom on a `background` declaration. Use the
-reverse variant when the surface needs purple-on-the-left.
The -darkened variant is for hero surfaces where headline density
requires a 40-50% darkening to keep white type legible.
=========================================================== */
--gradient-sanctom: linear-gradient(
135deg,
var(--sanctom-navy) 0%, /* #011C42 — top-left anchor */
var(--sanctom-magenta) 50%, /* #5C0047 — transition midpoint */
var(--sanctom-purple) 100% /* #B30FFA — bottom-right anchor */
);
--gradient-sanctom-reverse: linear-gradient(
315deg,
var(--sanctom-navy) 0%,
var(--sanctom-magenta) 50%,
var(--sanctom-purple) 100%
);
--gradient-sanctom-darkened: linear-gradient(
135deg,
color-mix(in srgb, var(--sanctom-navy) 100%, black 14%) 0%,
color-mix(in srgb, var(--sanctom-magenta) 100%, black 20%) 50%,
color-mix(in srgb, var(--sanctom-purple) 100%, black 20%) 100%
);
/* CTA-punctuation accent — the "SUMMARY emphasis / $2M / 5X ROI /
sanctom.io/invest" treatment from Thumbnail-ExecSummary-v62.png.
Knox 2026-05-21 correction: canonical CTA accent is #CDFA02
(chartreuse/lime — what Knox calls "bright yellow" colloquially;
stored as --sanctom-light-yellow in the token system). Previous
mapping to #FFCC14 was incorrect — #FFCC14 is a golden-warm tone
used as a secondary/warm-context accent, NOT the primary CTA color.
Reserve --gradient-sanctom-cta-accent for stat callouts, URL
highlights, CTA-pill hover states, header emphasis ON gradient
surfaces. */
--gradient-sanctom-cta-accent: var(--sanctom-light-yellow);
/* Secondary warm accent (use sparingly; primary above is canon) */
--gradient-sanctom-warm-accent: var(--sanctom-bright-yellow);
/* ─── Sanctom Vibrant Palette (Knox 2026-05-21 codification) ──────
The 5 bright accent colors that carry Sanctom's "alive · vibrant ·
energetic · spiritual" register. Use freely on gradient surfaces
(hero, marketing, cinematic-register). Use selectively on
architectural surfaces for state indicators, stat callouts,
emphasis moments — but never let muted variants stand in when
the surface is meant to feel ALIVE. Brand thesis (Knox verbatim):
"Sanctom needs to be a brand that is alive, vibrant, energetic,
spiritual. I feel like we have somehow got away from that."
─────────────────────────────────────────────────────────────── */
--vibrant-yellow: var(--sanctom-light-yellow); /* #CDFA02 — chartreuse/lime — primary CTA accent */
--vibrant-lime: var(--sanctom-lime-green); /* #34E8BB — vibrant teal-green */
--vibrant-pink: var(--sanctom-flat-pink); /* #FFCCF3 — flat pink — soft-vibrant text accent */
--vibrant-pink-bold: var(--sanctom-bright-pink); /* #FB9CE5 — bright-pink — louder accent */
--vibrant-blue: var(--sanctom-bright-blue); /* #096FFF — bright blue — stat callouts ("$2M") */
--vibrant-blue-soft: var(--sanctom-light-blue); /* #70D6FF — light blue — secondary blue accent */
--vibrant-orange: var(--sanctom-orange); /* #FC9258 — vibrant orange */
--vibrant-cyan: #34E8FF; /* Cyan — Knox-ratified 2026-05-28 as Partner Platform App product accent + Monitor AN-service color */
--vibrant-sage: #A8D8B9; /* Sage — Knox-ratified 2026-05-28 as Monitor CL-service color (adjacent-to-lime, distinct from CTA-yellow) */
--vibrant-pink-strong: #FF59A8; /* Strong-pink — Executive product accent (formerly inline-only; promoted to canonical token 2026-05-28) */
/* ===========================================================
2. NEUTRAL SCALE (built around Navy & Tan)
=========================================================== */
--ink-900: #011C42; /* Navy — primary ink on light */
--ink-800: #0A2A55;
--ink-700: #1B3A6B;
--ink-600: #3A5784;
--ink-500: #6B81A3;
--ink-400: #9AAAC2;
--ink-300: #C5CFDD;
--ink-200: #E1E6EE;
--ink-100: #EFF2F7;
--paper-50: #FFFFFF;
--paper-100: #FDFBF6; /* warmest paper */
--paper-200: #F9F3E9; /* Light Tan — primary surface */
--paper-300: #ECEAE4; /* Light Gray */
--paper-400: #D8D4CB;
/* ===========================================================
3. SEMANTIC SURFACES (light theme — the default)
=========================================================== */
--bg: var(--paper-50); /* WHITE app/page background — warm "parchment" permanently retired (Knox 2026-06-04). Cards (--surface) separate via border + shadow, not a warm page tint. */
--bg-elevated:var(--paper-50);
--bg-sunken: var(--paper-100);
--surface: var(--paper-50); /* card / sheet */
--surface-2: var(--paper-100);
--fg: var(--ink-900); /* primary text */
--fg-muted: var(--ink-600); /* secondary text */
--fg-subtle: var(--ink-500); /* tertiary / meta */
--fg-faint: var(--ink-400); /* disabled / placeholders */
--fg-on-dark: var(--paper-200);
/* ALWAYS white — text/icons on the fixed brand gradient (gradient rail, gradient
top/bottom bars). Deliberately NOT overridden in any Aura block: the gradient is
a fixed dark asset, so its foreground never flips. Do NOT use --paper-50 for this
(Auras remap --paper-50 to a dark value in dark themes → invisible text). */
--fg-on-gradient: #FFFFFF;
--border: var(--ink-200);
--border-strong: var(--ink-300);
--border-ink: var(--ink-900); /* sanctuary outline */
/* ===========================================================
4. SEMANTIC SURFACES (dark theme — the sanctuary at night)
Toggle with .theme-dark on or any container.
=========================================================== */
/* defaults are set below in .theme-dark */
/* ===========================================================
5. ACCENT / "VIBE" SEMANTICS
The wide palette maps to journey-states, not UI severity.
=========================================================== */
--accent-primary: var(--sanctom-navy); /* sanctuary */
--accent-secondary:var(--sanctom-light-tan); /* parchment */
--accent-spirit: var(--sanctom-purple); /* spiritual development */
--accent-shadow: var(--sanctom-magenta); /* descent / depth */
--accent-growth: var(--sanctom-lime-green); /* renewal */
--accent-grounded: var(--sanctom-dark-green); /* health, body */
--accent-clarity: var(--sanctom-bright-blue); /* career, finance */
--accent-air: var(--sanctom-light-blue); /* mental wellness */
--accent-warmth: var(--sanctom-orange); /* relationships, joy */
--accent-tender: var(--sanctom-bright-pink); /* intimacy, love */
--accent-soft: var(--sanctom-flat-pink); /* lifestyle */
--accent-vital: var(--sanctom-light-yellow);/* awakening */
--accent-sun: var(--sanctom-bright-yellow);/* fulfillment */
/* Status (UI feedback) */
--status-info: var(--sanctom-bright-blue);
--status-success: var(--sanctom-lime-green);
--status-warning: var(--sanctom-bright-yellow);
--status-danger: var(--sanctom-red);
/* Aliases used by StatusDot + ProgressBar (ok/warn/error register) */
--status-ok: var(--sanctom-lime-green); /* #34E8BB — replaces #38D87A literal */
--status-warn: var(--sanctom-bright-yellow); /* #FFCC14 — replaces #F5A623 literal */
--status-error: var(--sanctom-red); /* #E5384B */
/* Surface hairlines + overlays — use these instead of raw rgba(255,255,255,…) */
--hairline: rgba(255,255,255,0.06);
--hairline-faint: rgba(255,255,255,0.04);
--overlay-subtle: rgba(255,255,255,0.05);
--overlay-soft: rgba(255,255,255,0.08);
--overlay-medium: rgba(255,255,255,0.10);
--overlay-glow: rgba(255,255,255,0.12); /* animation box-shadow start state */
--overlay-raised: rgba(255,255,255,0.20); /* idle/muted dot surfaces */
--overlay-strong: rgba(255,255,255,0.35);
--overlay-muted: rgba(255,255,255,0.40); /* secondary text on dark surfaces */
--overlay-dim: rgba(255,255,255,0.60); /* muted text on dark gradient shells */
--overlay-warm: rgba(255,255,255,0.70); /* icon / action text on dark gradient shells */
--overlay-near: rgba(255,255,255,0.90); /* near-white text on dark gradient shells */
--dream-popover-bg: #0a1628; /* Dream aura popover forced-dark background */
--dream-popover-fg: #e8edf4; /* Dream aura popover text on forced-dark */
/* Knowledge-base category colors — KBHome tiles; never hardcode as hex in surfaces */
--category-1: var(--sanctom-bright-blue); /* technology / dev */
--category-2: var(--sanctom-lime-green); /* growth / wellness */
--category-3: var(--sanctom-orange); /* creative / design */
--category-4: var(--sanctom-purple); /* strategy / leadership */
--category-5: var(--sanctom-red); /* operations / process */
--category-6: var(--sanctom-bright-yellow); /* finance / business */
/* Sanctom Learn product accent — certification, knowledge, achievement register.
(Product renamed "Universe" -> "Sanctom Learn", Knox 2026-07-12 · Learn·Create·Share.)
SKY BLUE — Knox-approved 2026-07-14. The accent follows the logo wordmark: the
Sanctom Learn lockup Knox supplied renders "Learn" in #70D6FF, which is exactly
--sanctom-light-blue. Per the accents-match-the-logo rule, a product's accent is
sampled from its wordmark (the same rule that set Reports to orange).
SUPERSEDES the chartreuse accent (Knox-ratified 2026-06-16, when the product was
"Universe" and Knox set its chartreuse logo + accent together — it inherited
Growth's chartreuse-lime register, deliberately sharing the global CTA hue). The
new lockup retires that rationale: Learn no longer shares the CTA hue. Do NOT
"restore" chartreuse from the old ratification note — it is superseded, not lost. */
--accent-learn: var(--sanctom-light-blue); /* #70D6FF — sky blue, = the logo wordmark; safe as a FILL with navy ink (10.2:1), NOT as text on light surfaces (1.65:1) */
--accent-learn-ink: var(--sanctom-dark-sky-blue); /* #0078A8 — foreground-safe companion; text/icon/border on light surfaces (4.93:1 on white) */
/* DEPRECATED aliases — the Universe -> Learn rename (2026-07-12) is repo-wide here,
but consumers OUTSIDE this repo (the @sanctom/craft-ui package, product code) may
still read the old names. These keep them working and now resolve to the new sky-blue
values. Remove once no consumer references them. Do not author new surfaces against
these. */
--accent-universe: var(--accent-learn);
--accent-universe-ink: var(--accent-learn-ink);
/* ===========================================================
5a. LIFECYCLE STATE COLORS (Knox-approved 2026-04-30)
The canonical visual register for any agent action,
supervised approval, async task, or workflow step.
Reuse these tokens; never invent a new color for a state.
Documented in README → State color spectrum.
=========================================================== */
--state-scheduled: var(--sanctom-orange); /* future · not yet started */
--state-waiting: var(--sanctom-bright-yellow); /* held · awaiting decision */
--state-approved: var(--sanctom-lime-green); /* go · cleared to run */
--state-processing: var(--sanctom-bright-blue); /* in flight · running now */
--state-completed: var(--ink-900); /* finalized · settled */
--state-errored: var(--sanctom-red); /* hollow ring · attention required */
--state-rejected: var(--sanctom-red); /* solid fill · turned back */
--state-paused: var(--ink-500); /* off-spectrum · meta-control */
/* Cost-flag is a MODIFIER, not a state. Stacks on any state via a
$ icon + red saturation. See README → State color spectrum →
"Modifiers" for the full pattern. */
--state-flag: var(--sanctom-red);
/* Severity alias — used by Moderation surfaces to map severity
register (critical/high/medium/low) onto the lifecycle state
spectrum. Critical is the same red as rejected; the alias exists
so SeverityRow's TSX contract reads `--state-critical` directly
rather than aliasing in the component. Added 2026-05-03 as part
of primitives-v1 pre-slot prep. */
--state-critical: var(--state-rejected);
/* META-STATUS — distinct from lifecycle states. Documented in
README → State color spectrum → "Meta-status: acknowledged".
Acknowledged ≠ Completed: completed is "this run finished its
lifecycle" (state); acknowledged is "I saw this signal" (meta-
status). Visual continuity: action button = deep blue;
destination surface = light blue tint. Knox-approved 2026-04-30. */
--meta-acknowledged: var(--sanctom-bright-blue);
/* Focus ring */
--focus-ring: 0 0 0 3px rgba(9, 111, 255, 0.35);
/* ===========================================================
6. LEARNING PATH COLOR MAP (10 paths × 1 hue each)
Apply via .path-{slug} or read --path-color directly.
=========================================================== */
--path-sexuality: var(--sanctom-bright-pink);
--path-relationships:var(--sanctom-orange);
--path-emotional: var(--sanctom-light-blue);
--path-joy: var(--sanctom-bright-yellow);
--path-spiritual: var(--sanctom-purple);
--path-career: var(--sanctom-bright-blue);
--path-finance: var(--sanctom-dark-green);
--path-health: var(--sanctom-lime-green);
--path-mental: var(--sanctom-magenta);
--path-lifestyle: var(--sanctom-flat-pink);
/* ===========================================================
7. TYPE SYSTEM — Knox 2026-05-21: Merriweather REMOVED.
Inter (variable-weight, 100-900) is the universal family for
body + display + hero contexts. Hero contexts use weight 900
(Inter Black) + tight tracking. JetBrains Mono for code only.
=========================================================== */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Knox 2026-06-04: Inter is the ONLY font, system-wide. JetBrains Mono retired.
--font-mono retained as a backward-compat alias pointing at Inter so existing
consumer code referencing var(--font-mono) (eyebrows, labels, badges, code)
renders in Inter without per-file edits. The mono *look* for labels comes from
uppercase + letter-spacing, not a monospace family. */
--font-mono: var(--font-sans);
/* --font-serif retained as a backward-compat alias pointing at Inter so
existing consumer code referencing var(--font-serif) doesn't break.
DEPRECATED — new code should use --font-display (for hero/headlines)
or --font-body (for everything else). Remove --font-serif in a future
cleanup pass once consumer migration is complete. */
--font-serif: var(--font-sans);
/* Type roles */
--font-display: var(--font-sans); /* hero, marketing, headlines — pair with font-weight: 900 + tight tracking for cinematic hero */
--font-body: var(--font-sans); /* UI, body, paragraphs */
--font-ui: var(--font-sans);
--font-code: var(--font-mono);
/* Hero recipe — Inter Black for cinematic gradient-register surfaces */
--font-hero-weight: 900;
--font-hero-tracking: -0.02em;
/* Fluid type scale (1.250 minor third on body, 1.333 on display) */
--fs-xs: 0.75rem; /* 12 — meta, captions */
--fs-sm: 0.875rem; /* 14 — small UI */
--fs-base: 1rem; /* 16 — body */
--fs-md: 1.125rem; /* 18 — lead body */
--fs-lg: 1.25rem; /* 20 — h6 / large UI */
--fs-xl: 1.5rem; /* 24 — h5 */
--fs-2xl: 1.875rem; /* 30 — h4 */
--fs-3xl: 2.5rem; /* 40 — h3 */
--fs-4xl: 3.25rem; /* 52 — h2 */
--fs-5xl: 4.5rem; /* 72 — h1 / hero */
--fs-6xl: 6rem; /* 96 — display */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed:1.65;
--lh-loose: 1.8;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow:0.18em; /* SECTION LABELS */
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
--weight-bold: 700;
/* ════════════════════════════════════════════════════════════════════
APP-SURFACE TYPE SCALE — CANONICAL · SET IN STONE (Knox 2026-06-04)
The definitive type sizes for IN-PRODUCT pages (every Sanctom app, every
page). Sized for large monitors — compact, not oversized. NEVER hand-size
page text: use these semantic roles (or the canonical .pg-h1 / .pg-lede /
.pill / .app-* classes that consume them). If a surface needs a size that
isn't here, that's a gap to raise — not a one-off literal.
ROLE TOKEN px used for
Page title (H1) --type-page-title 24 one per page, top of every page
Page subtitle / lede --type-page-subtitle 14 the line under the H1
Section / card title --type-section-title 16 card + section headers (H2/H3)
Body / list item --type-body 14 paragraphs, list rows, form values
Field label --type-label 14 form field labels
Meta / caption --type-meta 12 timestamps, sublabels, helper text
Eyebrow (uppercase) --type-eyebrow 11 KPI labels, section eyebrows
Button label --type-button 14 every button
Pill / badge --type-pill 10 status pills, tags, chips
Hero amount --type-amount-hero 32 THE one big number (≤1 per page)
Stat / KPI number --type-stat 20 KPI tiles, stat cards
List amount --type-amount 14 $ amounts in rows/lists (bold)
The left-rail keeps its own standardized sizes (already locked) — these
govern the main page surface only.
════════════════════════════════════════════════════════════════════ */
--type-page-title: var(--fs-xl); /* 24 */
--type-page-subtitle: var(--fs-sm); /* 14 */
--type-section-title: var(--fs-base); /* 16 */
--type-body: var(--fs-sm); /* 14 */
--type-label: var(--fs-sm); /* 14 */
--type-meta: var(--fs-xs); /* 12 */
--type-eyebrow: 0.6875rem; /* 11 */
--type-button: var(--fs-sm); /* 14 */
--type-pill: 0.625rem; /* 10 */
--type-amount-hero: 2rem; /* 32 */
--type-stat: var(--fs-lg); /* 20 */
--type-amount: var(--fs-sm); /* 14 */
/* ===========================================================
8. SPACING, RADII, SHADOW, MOTION
=========================================================== */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--radius-xs: 6px; /* tight corner — icon pills, inline badges, small chips; added 2026-06-28 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 22px;
--radius-2xl: 32px;
--radius-pill: 999px;
/* Logo minimum sizes (STANDING RULE — Knox-ratified with visual examples 2026-07-10,
supersedes the 2026-07-08 values). A Sanctom product/brand logo must NEVER render
below these, anywhere, in any lockup. Smaller than this and the wordmark stops
being legible, so the logo stops earning its place. Kern gates every logo against
these (a logo below its form's floor is a design return). Because the canonical
product PNGs carry a wordmark, the SQUARE floor is 64px (at 64px the lockup reads;
no separate name caption is needed under it).
--logo-min-square : square mark / square product logo, min HEIGHT & WIDTH (64px)
--logo-min-horizontal : side-by-side lockup (mark + wordmark), min HEIGHT (48px)
--logo-min-vertical : stacked lockup (mark over wordmark), min HEIGHT (64px) */
--logo-min-square: 64px;
--logo-min-vertical: 64px;
--logo-min-horizontal: 48px;
/* Shadows are restrained — sanctuary, not Silicon Valley.
Two scales: soft (low elevation, warm-tinted) and ink
(deeper, cooler — used on dark surfaces). */
--shadow-1: 0 1px 2px rgba(1, 28, 66, 0.06), 0 1px 1px rgba(1, 28, 66, 0.04);
--shadow-2: 0 4px 12px rgba(1, 28, 66, 0.08), 0 2px 4px rgba(1, 28, 66, 0.04);
--shadow-3: 0 12px 32px rgba(1, 28, 66, 0.12), 0 4px 10px rgba(1, 28, 66, 0.06);
--shadow-4: 0 28px 64px rgba(1, 28, 66, 0.18), 0 10px 24px rgba(1, 28, 66, 0.08);
--shadow-inner: inset 0 1px 2px rgba(1, 28, 66, 0.08);
/* Motion — calm, breath-paced. Avoid bounces. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.5, 0, 0.75, 0);
--dur-1: 120ms;
--dur-2: 220ms;
--dur-3: 360ms;
--dur-4: 600ms;
--dur-breath: 4000ms; /* slow ambient pulses */
/* Layout */
--container-sm: 640px;
--container-md: 960px;
--container-lg: 1200px;
--container-xl: 1440px;
}
/* ============================================================
Dark theme — sanctuary at night
Navy becomes the surface; tan becomes the ink.
============================================================ */
.theme-dark,
:root.theme-dark {
--bg: var(--ink-900);
--bg-elevated:var(--ink-800);
--bg-sunken: #00112B;
--surface: var(--ink-800);
--surface-2: var(--ink-700);
--fg: var(--paper-200);
--fg-muted: var(--ink-300);
--fg-subtle: var(--ink-400);
--fg-faint: var(--ink-500);
--fg-on-dark: var(--paper-200);
--border: rgba(249, 243, 233, 0.12);
--border-strong: rgba(249, 243, 233, 0.24);
--border-ink: var(--paper-200);
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
--shadow-3: 0 14px 36px rgba(0, 0, 0, 0.55);
--shadow-4: 0 30px 70px rgba(0, 0, 0, 0.6);
}
/* ============================================================
Element role styles (apply directly OR via the class names)
============================================================ */
html, body {
margin: 0; /* canonical reset — chrome (rail/header) must reach the viewport edges (Knox 2026-06-04) */
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
font-weight: var(--weight-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ===========================================================
ORG-BRAND PRIMITIVE — render org logo or text-fallback
(Knox 2026-05-21 disposition)
===========================================================
Canonical pattern for displaying an organization's brand in any
Sanctom surface (Hub strip, Monitor My Org banner, Build Org review,
future customer-tenant headers, etc.). Replaces ad-hoc text-rendering
of "SANCTOM" or "{org name}" as plain Inter Black.
THREE RENDERING PATHS:
1. CANONICAL SANCTOM (internal product surfaces)
→ use .org-brand-wordmark — masks sanctom-wordmark.svg, tinted
via background-color. Any color works (default = currentColor).
2. CUSTOMER ORG WITH UPLOADED LOGO (in-app for paying tenants)
→ use .org-brand-logo with the customer's uploaded image.
3. CUSTOMER ORG WITHOUT UPLOADED LOGO (fallback)
→ use .org-brand-text — renders the customer's org name in
canonical Sanctom brand-text style (Inter Black + tracking +
uppercase). Color/size customizable via inline style.
{customer.org_name}
PRODUCTION USE: render exactly one of the three. App-layer logic
(renderer) decides which to render based on the org-config record:
if org.logo_url exists → render .org-brand-logo; else if org is the
internal Sanctom tenant → render .org-brand-wordmark; else render
.org-brand-text with org.name.
Logo upload affordance lives in the Build Org form + Org Settings
surface (TBD in Studio v0.2 spec — Petra-A pinged 2026-05-21).
─────────────────────────────────────────────────────────────── */
.org-brand-wordmark {
display: inline-block;
width: 320px;
height: 84px;
-webkit-mask-image: url('assets/sanctom-wordmark.svg');
mask-image: url('assets/sanctom-wordmark.svg');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor; /* overridable inline or via parent */
}
.org-brand-logo {
max-width: 320px;
max-height: 84px;
object-fit: contain;
}
.org-brand-text {
font-family: 'Inter', system-ui, sans-serif;
font-size: 44px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.0;
color: currentColor; /* overridable */
}
/* Display & Hero — Inter Black, the cinematic voice (Merriweather removed 2026-05-21). */
.h-display, .display-1 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--fs-6xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
h1, .h1 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--fs-5xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--fs-4xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: var(--fs-3xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg);
}
h4, .h4 {
font-family: var(--font-body);
font-weight: var(--weight-semi);
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
color: var(--fg);
}
h5, .h5 {
font-family: var(--font-body);
font-weight: var(--weight-semi);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--fg);
}
h6, .h6 {
font-family: var(--font-body);
font-weight: var(--weight-semi);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--fg);
}
/* Eyebrow — uppercase tracked label that sits above titles */
.eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-semi);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--fg-muted);
}
p, .p {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--fg);
text-wrap: pretty;
}
.lead {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
}
.meta, small {
font-size: var(--fs-sm);
color: var(--fg-subtle);
}
/* Long-form quote / testimonial — display serif italic */
blockquote, .quote {
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-style: italic;
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
color: var(--fg);
border-left: 2px solid var(--border-ink);
padding-left: var(--space-5);
}
code, kbd, samp, pre, .code {
font-family: var(--font-code);
font-size: 0.9em;
}
code {
background: var(--bg-sunken);
border: 1px solid var(--border);
padding: 0.1em 0.4em;
border-radius: var(--radius-sm);
}
pre {
background: var(--bg-sunken);
border: 1px solid var(--border);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
line-height: var(--lh-normal);
}
a {
color: var(--accent-clarity);
text-decoration-color: color-mix(in oklab, var(--accent-clarity) 40%, transparent);
text-underline-offset: 0.18em;
transition: color var(--dur-1) var(--ease-out),
text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent-clarity); }
hr {
border: 0;
border-top: 1px solid var(--border);
margin: var(--space-6) 0;
}
::selection {
background: var(--sanctom-light-yellow);
color: var(--ink-900);
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
/* ──────────────────────────────────────────────────────────────────────────────
LOGO USAGE — STANDING RULE (Knox directive 2026-05-30)
⚠ ALWAYS use the official Sanctom asset files. NEVER hand-draw or approximate
the mark, wordmark, or logomark via CSS shapes, text, or gradients.
Canonical assets in Sanctom Design System/assets/:
sanctom-lockup-horizontal.svg — horizontal combo (mark + SANCTOM text)
sanctom-lockup-vertical.svg — vertical stacked combo
sanctom-logo-vertical.png — PNG combo (mark + SANCTOM text)
sanctom-logo-horizontal.png — PNG horizontal combo
sanctom-logomark.svg — mark only
Recolor pattern for self-contained/deployed surfaces (Echo 2026-05-30):
Use CSS mask with the SVG as a base64 data-URL so the mark recolors via
`background-color: currentColor` (e.g. navy on light nav, white on dark footer).
Example:
.logo-mark {
width: 32px; height: 32px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;base64,...") center/contain no-repeat;
mask: url("data:image/svg+xml;base64,...") center/contain no-repeat;
}
This is the canonical pattern for deployed/Vercel surfaces where external
file references cannot be relied on. Prototype pages may use with a
relative path to assets/ + filter: brightness(0) invert(1) for dark BGs.
──────────────────────────────────────────────────────────────────────────────
Product Logo Component — canonical rail/header lockup
Sanctom combo PNG (mark + SANCTOM wordmark) + product name in Inter Black lime
Knox 2026-05-28 directive: ALL apps use this standard.
CSS background-url (base64 PNG) version lives in knox-reports.css (reports).
Prototype pages use img tag + relative path to assets/.
──────────────────────────────────────────────────────────────────────────── */
.product-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.product-logo__combo {
display: block;
height: 48px;
width: auto;
flex-shrink: 0;
}
.product-logo--rail .product-logo__combo { height: 44px; }
.product-logo__name {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: #CDFA02; /* vibrant-yellow — safe ONLY as a fill (dark ink on top); NOT as text/icon foreground on light surfaces — use --accent-learn-ink (#6B7A00) for Sanctom Learn foreground */
white-space: nowrap;
}
.product-logo--rail { align-items: center; gap: 12px; }
.product-logo--sm .product-logo__combo { height: 32px; }
/* ════════════════════════════════════════════════════════════════════════
RAIL PRODUCT LOGO — LOCKED STANDARD (Knox 2026-06-03 directive)
════════════════════════════════════════════════════════════════════════
The logo at the top of every product's left rail is ONE approved
product-logo image, designed by Knox at a fixed 250×150 (5:3) canvas and
substituted per Sanctom product.
ENFORCED RULES — no exceptions:
• Use ONLY the approved logo PNG Knox provides for each product
(assets/product-logos/.png). PNG ONLY — never SVG for a
product logo (Knox 2026-06-03: SVG re-renders live text in a fallback
font → clipping). The PNG must be TRANSPARENT (sits on the dark rail).
• NO other logos, NO substitutions, NO free-drawing / hand-built marks
or wordmarks in this area, EVER.
• The placement box is locked to the 250×150 (5:3) aspect; the image is
`object-fit: contain` so it never distorts or gets cropped.
• This supersedes the prior `.product-logo--rail` (mark + text) pattern
for the rail. That composite caused recurring drift — retired here.
USAGE (the only permitted rail-logo markup):
──────────────────────────────────────────────────────────────────────── */
.rail-product-logo {
display: block;
width: 100%;
aspect-ratio: 250 / 150; /* locked 5:3 — Knox's design canvas */
margin: 0 0 var(--space-2, 8px);
flex-shrink: 0;
}
.rail-product-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* never distort, never crop the approved logo */
}
/* ── Stacked (vertical) lockup variant ──────────────────────────────────────
For products whose logo stacks the Sanctom MARK above a wordmark label
(e.g. Platform), instead of the wide horizontal OS lockup (Studio / Agent
Manager / Monitor / Executive).
Brand-consistency rule (Knox 2026-06-04): the Sanctom mark must render at
the SAME size in every product rail. In the wide 5:3 lockups the mark is
~one-third of the image and lands at ~63px (triangle) / ~81px (mark + SANCTOM).
So a stacked lockup, which carries ONLY the mark as its image, is sized by an
explicit mark height that reproduces that exact size — never by filling the
5:3 box (which would blow the mark up). --rail-mark-h is that canonical height.
USAGE:
Platform
──────────────────────────────────────────────────────────────────────── */
.rail-product-logo.is-stacked {
aspect-ratio: auto;
width: 100%;
height: auto;
padding: var(--space-4, 22px) var(--space-3, 18px) var(--space-3, 18px);
text-align: center;
}
.rail-product-logo.is-stacked img {
width: auto;
height: var(--rail-mark-h, 86px); /* 86px image → ~81px mark = matches the OS lockups */
max-width: 100%;
margin: 0 auto var(--space-1, 6px);
}
.rail-product-logo .rail-product-name {
font-family: var(--font-body);
font-weight: 900;
font-size: 22px;
letter-spacing: -0.01em;
line-height: 1;
color: var(--rail-wordmark-color, currentColor);
}
/* ─────────────────────────────────────────────────────────────────────────
PILL STANDARD — ratified 2026-05/06-03 (Knox). Color encodes a pill's
meaning-family, never decoration. Compound selectors (.pill.pill--x) so
these win over any page-local `.pill` base regardless of load order.
Canonical legend: prototypes/_system/pill-standard.html
───────────────────────────────────────────────────────────────────────── */
/* Canonical base pill — the shape/padding/typography every pill shares. Previously
this lived only inline in the pill-standard reference page, so pages that forgot
to copy it got pill colors with no pill shape. Now canonical here (Knox 2026-06-04). */
.pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border-radius: var(--radius-pill, 999px);
border: 1px solid transparent;
font-family: var(--font-body);
font-size: var(--type-pill); font-weight: 700; /* 10px — canonical pill text (Knox 2026-06-04) */
letter-spacing: 0.03em; text-transform: uppercase;
line-height: 1.5; white-space: nowrap;
}
/* Status — universal 5-color scale (use with `dot` for the leading indicator) */
.pill.pill--positive { background:#E6F6EE; color:#0F7B47; border:1px solid #B6E3CC; }
.pill.pill--claimed { background:#FFEAD5; color:#C2620E; border:1px solid #F3C99A; } /* Orange — Claimed/Picked up (Knox 2026-06-03): sits between Active(green) and In progress(amber) */
.pill.pill--progress { background:#FFF4D6; color:#92660A; border:1px solid #F0D58A; }
.pill.pill--attention { background:#FCE9E9; color:#C13030; border:1px solid #F2C0C0; }
.pill.pill--info { background:#E5EFFF; color:#0A52C4; border:1px solid #B9D2FF; }
.pill.pill--neutral { background:#EEF1F6; color:#5A6B85; border:1px solid #D5DCE6; }
/* Priority extra */
.pill.pill--high { background:#FFEEDD; color:#B85A1A; border:1px solid #F5CFA8; }
/* Source / brand key — the Sanctom gradient */
.pill.pill--sanctom { background:var(--gradient-sanctom); color:#fff; border:none; box-shadow:0 2px 8px rgba(179,15,250,.28); }
/* Type-Tier */
.pill.pill--org { background:#F3E3FF; color:#7A1A8F; border:1px solid #E0B8F5; }
.pill.pill--team { background:#E5EFFF; color:#0A52C4; border:1px solid #B9D2FF; }
.pill.pill--agent { background:#DEF7FF; color:#0883A8; border:1px solid #A8E6F5; }
.pill.pill--perm { background:#FFF4D6; color:#92660A; border:1px solid #F0D58A; }
/* Optimize-For — Speed=attention(red) · Cost=positive(green) · Quality=purple */
.pill.pill--quality { background:#F3E3FF; color:#7A1A8F; border:1px solid #E0B8F5; }
/* Status leading dot */
.pill.dot::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; flex:0 0 auto; }
