/* ───────────────────────────────────────────────────────────────────────── COHERENCE THEME — the `apps` cascade layer. Coherence's theme lives here rather than in the platform's crm/css/tokens/apps.css because it draws on Coherence-owned brand primitives (tokens/brand.css). Platform CSS referencing an app's tokens would point the dependency arrow upward, against CLAUDE.md's layer rules. Apps whose theme needs only platform primitives stay in apps.css. Loaded only on Coherence routes (shell/_tokens_css.html), keyed off the same app_slug that sets . Source: specs/coherence-style.zip. Teal #4BDBDB is the only accent; Instrument Serif display, Lexend Light body, calligraphy ink motifs. ───────────────────────────────────────────────────────────────────────── */ @layer apps { /* ── Page-wide ───────────────────────────────────────────────────── The accent pair. Teal is light, so it takes near-black text. APPROVED EXCEPTION — --font-ui. docs/dev/web/design-system.md §4.2 locks the UI typeface because a body-face swap changes metrics in every shared component at once: taller table rows, fewer rows per screen, earlier truncation. The call was made deliberately for Coherence, knowing that, and is recorded in §9. Coherence is the only app permitted to do this; a second one is a conversation about the type system, not a copy of this block. */ [data-app="coherence"] { --color-accent: var(--co-teal-500); --color-accent-text: var(--co-ink-900); --font-ui: var(--co-font-body); } /* ── Coherence's own content area ────────────────────────────────── The brand serif for display text, and the teal decorative tint. Both faces are requested only on Coherence routes, from _fonts_css.html. */ [data-app="coherence"] main, [data-app="coherence"][data-app-content] { --color-decor: var(--co-teal-300); --font-display: var(--co-font-display); } } @layer components { /* ── Body metrics ────────────────────────────────────────────────── Lexend has a wider x-height than Red Hat Display, so the brand tightens tracking slightly and runs a relaxed line height. Applied at the body level rather than per component, so nothing has to opt in. */ [data-app="coherence"] body, [data-app="coherence"] { font-weight: var(--co-w-light); letter-spacing: var(--co-tracking-body); } /* ── Display type ────────────────────────────────────────────────── The :not() keeps the display face off user-authored HTML — a description is Quill output rendered verbatim, so headings someone typed into their prose would otherwise come out in the brand serif. Same fix as gathering/css/theme.css, where the problem was first spotted. Instrument Serif, light, tight. The one permitted typographic flourish is one or two italic words in deep teal inside a display heading — never bold, all-caps or colour on the sans side (style.md §5). */ [data-app="coherence"] main :where(h1, h2, .co-display):not(:where(.field-value, .chat-message, .ql-editor) *), [data-app="coherence"][data-app-content] :where(h1, h2, .co-display):not(:where(.field-value, .chat-message, .ql-editor) *) { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--co-tracking-tight); line-height: var(--co-lh-tight); } /* The holon chip's name is a title, not a label — the event it names is the page's context, so it takes the display face like any other title inside a Coherence screen. Typography only: the chip's shape stays platform. */ [data-app="coherence"] main .holon-chip__name, [data-app="coherence"][data-app-content] .holon-chip__name { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--co-tracking-tight); } [data-app="coherence"] main :where(h1, h2, .co-display):not(:where(.field-value, .chat-message, .ql-editor) *) em, [data-app="coherence"][data-app-content] :where(h1, h2, .co-display):not(:where(.field-value, .chat-message, .ql-editor) *) em { font-style: italic; font-weight: 400; color: var(--co-teal-800); } /* Uppercase tracked label for section eyebrows and category labels. Never run a sentence in this style. */ [data-app="coherence"] .co-overline { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--co-tracking-overline); color: var(--co-ink-500); } /* ── Surfaces ────────────────────────────────────────────────────── White-dominant with cold-neutral hairlines, per the brand's ink scale. Resting cards are flat with a 1px hairline; shadow is a hover affordance, not a resting state (style.md §7). */ [data-app="coherence"] { --color-border: var(--co-ink-200); --color-border-light: var(--co-ink-100); --color-surface-2: var(--co-ink-050); --color-bg: var(--co-surface-off); } [data-app="coherence"] .card { box-shadow: var(--elev-0); border-color: var(--co-ink-200); } [data-app="coherence"] .card--link:hover { box-shadow: var(--co-shadow-2); border-color: var(--co-ink-300); } /* Focus: 3px teal at 35% alpha, per the brand. Never removed. That 35% is the brand's *halo* — the bloom around a field that is already visible. The solid focus outline is a different token and needs to be seen, so it is left to derive from the accent (teal darkened), which is already this brand's teal. Setting the halo value on the outline is how the ring became invisible in the first place. On `*`, not on [data-app] alone: tokens/components.css declares --focus-halo on the universal selector, so a rule matching only is re-asserted away on every descendant and reaches nothing. Same trap as --btn-bg on :root, described in tokens/semantic.css. */ [data-app="coherence"], [data-app="coherence"] *, [data-app="coherence"] ::before, [data-app="coherence"] ::after { --focus-halo: color-mix(in oklab, var(--co-teal-500) 35%, transparent); } /* ── Page motif placement ────────────────────────────────────────── The shell's page motif sits bottom-left by default, against the content edge beside the rail. Coherence anchors it bottom-right instead: the calligraphy strokes are weighted to the left of their frame, so on the left they crowd the content column, and on the right they fall away into the empty margin the way the brand's own layouts use them. The three tokens move together — left/right swap the anchored edge, and background-position has to follow or the crop bleeds the wrong way. */ [data-app="coherence"] .main::after { --app-motif-left: auto; --app-motif-right: var(--app-motif-bleed); --app-motif-anchor: right bottom; } /* ── Calligraphy ink motifs ──────────────────────────────────────── The brand's decorative system in place of illustration. Opt-in per page via .co-flavour on a positioned container — never app-wide, and never behind body copy: the motif sits under the content's own surface layer (docs/dev/web/design-system.md §4.6, style.md §5). Placement variants exist so motifs are deliberately varied down a page rather than stamped in the same spot. Pick one not used by an adjacent section. */ [data-app="coherence"] .co-flavour { position: relative; overflow: hidden; } [data-app="coherence"] .co-flavour > * { position: relative; z-index: 1; } [data-app="coherence"] .co-flavour::before { content: ""; position: absolute; z-index: 0; background-image: var(--app-backdrop); background-repeat: no-repeat; background-size: contain; background-position: center; /* Multiply so black ink reads through white paper as a charcoal whisper rather than a grey rectangle. */ mix-blend-mode: multiply; opacity: 0.07; pointer-events: none; user-select: none; /* Default placement: bottom-right corner, clear of body copy. */ right: -140px; bottom: -160px; width: 420px; height: 420px; } [data-app="coherence"] .co-flavour--subtle::before { opacity: 0.045; } [data-app="coherence"] .co-flavour--faint::before { opacity: 0.035; } [data-app="coherence"] .co-flavour--edge-right::before { right: -180px; top: 18%; bottom: auto; width: 520px; height: 520px; } [data-app="coherence"] .co-flavour--edge-left::before { left: -180px; right: auto; top: 22%; bottom: auto; width: 520px; height: 520px; } [data-app="coherence"] .co-flavour--corner-bl::before { left: -140px; right: auto; bottom: -160px; } /* Motif files. A page picks one; the token is the opt-in. Relative url() so ManifestStaticFilesStorage rewrites it to a hashed filename. */ [data-app="coherence"] .co-flavour--ink-01 { --app-backdrop: url("../img/calligraphy/calligraphy-01.jpg"); } [data-app="coherence"] .co-flavour--ink-07 { --app-backdrop: url("../img/calligraphy/calligraphy-07.jpg"); } [data-app="coherence"] .co-flavour--ink-21 { --app-backdrop: url("../img/calligraphy/calligraphy-21.jpg"); } [data-app="coherence"] .co-flavour--ink-26 { --app-backdrop: url("../img/calligraphy/calligraphy-26.jpg"); } [data-app="coherence"] .co-flavour--ink-33 { --app-backdrop: url("../img/calligraphy/calligraphy-33.jpg"); } /* ── Signature gradient ──────────────────────────────────────────── Teal → white, vertical, full-bleed. Hero / section opener / masthead only — never a card background, never short or squat (style.md §7). */ [data-app="coherence"] .co-hero { background: var(--co-grad-hero); } /* ── Brand mark ──────────────────────────────────────────────────── Never tinted, never recoloured, never below 32px. */ [data-app="coherence"] .co-mark { width: 44px; height: 44px; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { /* The brand's canonical entrance: a 12px upward fade. No slide from the side, no scale, no bounce. */ [data-app="coherence"] .co-enter { animation: co-fade-up var(--co-dur-3) var(--co-ease-out) both; } } @keyframes co-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }