/*
* Lev Credit — canonical design tokens (spec §3.8, amended by AMD-002 brand
* colours and AMD-003 design-quality / accessibility standard).
*
* THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR BRAND COLOUR VALUES. It is the ONLY
* place a hex colour literal may appear anywhere in the product. Every other
* surface — public site, /blog, /promotions, /client, /office, the Django admin,
* charts, and WeasyPrint PDFs — references these custom properties via var(--lc-…)
* and never hardcodes a colour or a magic px.
*
* Loaded as a static asset (STATICFILES_DIRS → static/), e.g.
*
* WeasyPrint PDF templates @import the same file by path so print and screen share
* one palette. The Phase-1 component library (§9.1) is built on these tokens; every
* component composes only them.
*
* INHERITANCE (AMD-003). Every surface still to be built — the public startup /
* landing page, /client, /office, and the §3.8 component library — inherits these
* tokens AND the quality bar they encode: WCAG AA contrast (verified, never
* eyeballed), a visible ≥3:1 focus ring, ≥44px hit targets (ADR 0186, which
* supersedes the AMD-003 §4 40px floor), and consistent radius /
* spacing / elevation / type. The Django admin theme (admin-theme.css) is the
* reference implementation of that bar, not a one-off. Changing a token here
* reshapes every surface at once — that is the point.
*
* Brand assignment (AMD-002): orange is PRIMARY (CTAs, primary buttons, accents),
* blue is SECONDARY (headers, large text, links, chrome). To swap, exchange the
* --lc-brand-primary / --lc-brand-secondary values (and their hover/soft variants);
* nothing else changes.
*/
:root {
/* --- Brand (AMD-002) — BRIGHT brand colours. Used as fills with WHITE text on
* the INTERNAL admin / back-office (an owner-accepted sub-AA exception; see
* AMD-003), and as accents elsewhere. --- */
--lc-brand-primary: #EF7F1B; /* orange — CTAs, primary buttons, accents */
--lc-brand-primary-hover: #CB6C17; /* ~15% darker, tunable */
--lc-brand-primary-soft: #FDEFE0; /* tinted backgrounds / callouts */
--lc-brand-secondary: #01A0E2; /* blue — headers, large text, links, chrome */
--lc-brand-secondary-hover: #0188C0; /* ~15% darker, tunable */
--lc-brand-secondary-soft: #E2F4FD; /* subtle tinted surfaces */
/* --- Accessible brand variants (AMD-003) — for CUSTOMER-FACING surfaces
* (public site, /client) built later, where white text on a brand fill MUST
* meet WCAG AA. White on these passes: white on #B35F14 = 4.60:1, white on
* #007CB0 = 4.66:1. NOT used on the internal admin (which uses the bright
* brand colours above). --- */
--lc-brand-primary-aa: #B35F14; /* darkened orange — AA with white text */
--lc-brand-secondary-aa: #007CB0; /* darkened blue — AA with white text */
/* --- Neutrals --- */
--lc-white: #FFFFFF; /* primary surface background */
--lc-cream: #F8F5F0; /* warm background for content sections */
--lc-grey-900: #1C1C1C; /* body text on white */
--lc-grey-700: #555555; /* secondary text */
--lc-grey-500: #8A8A8A; /* tertiary text, captions */
--lc-grey-300: #D0D0D0; /* borders, dividers */
--lc-grey-100: #F0F0F0; /* disabled backgrounds */
/* --- INK LEDGER (ADR 0108) — the /office "book of record" plane set. The
* ink pair is the sidebar rail (dark chrome); the canvas is the cool
* paper the white sheet panels sit on. Ink text computes ≥ 4.5:1 on BOTH
* inks (≈13.2:1 on --lc-ink, ≈11.0:1 on --lc-ink-soft — verified by the
* branding contrast backstop). Literal hexes by design: the backstop
* resolver reads flat colour literals, never var() aliases. --- */
--lc-ink: #1F242B; /* the sidebar rail fill */
--lc-ink-soft: #2A313A; /* rail hover / active wash */
--lc-ink-text: #E8EAED; /* rail text — AA on both inks */
--lc-canvas: #F4F6F8; /* the /office paper canvas */
/* --- Semantic state (kept visually distinct from the brand orange) --- */
--lc-success: #1E8E3E; /* CURRENT, pass */
--lc-warning: #F2B600; /* near-due, 1–30 day delinquency, CAUTION */
--lc-error: #D23B2D; /* errors, delinquency > 30 days, rejected, FAIL */
--lc-info: #1A6FB0; /* informational callouts, neutral KPIs */
/* --- Semantic soft tints (AMD-003 / ADR 0024) — light tints, the analog of the
* brand-*-soft tints, for AA status badges / toasts / alerts. The solid
* semantic fills can't carry AA text (white-on-success is 4.21, white-on-warning
* fails), so the component library pairs these soft tints with grey-900 ink
* (≥ 12:1) and a semantic-coloured border/icon. Used customer-facing. --- */
--lc-success-soft: #E6F4EA; /* grey-900 on this = AA (light green) */
--lc-warning-soft: #FCF4D9; /* grey-900 on this = AA (light amber) */
--lc-error-soft: #FBEAE8; /* grey-900 on this = AA (light red) */
--lc-info-soft: #E8F1FA; /* grey-900 on this = AA (light blue) */
/* --- Decorative --- */
--lc-gold: #D4B035; /* emblem star-ring accent only (not general UI) */
/* --- Layering (AMD-001): header below modals/toasts/CMP so the consent banner
* is never obscured. --- */
--lc-z-header: 1000;
--lc-z-modal: 2000;
--lc-z-toast: 3000;
--lc-z-cmp: 4000;
/* Sticky-header height — used for scroll-padding so in-page anchors land below
* the fixed header (AMD-001 accessibility). */
--lc-header-height: 4rem;
/* ======================================================================== *
* AMD-003 — design-quality, ergonomics & accessibility tokens.
* ======================================================================== */
/* --- Text-on-colour (AMD-003 surface-scoped policy) -----------------------
* RULE: white text on dark fills; dark/ink text on light fills. Text on a brand
* fill is WHITE (--lc-on-brand). On the INTERNAL admin the bright brand colours
* carry white text (white-on-orange 2.72:1, white-on-blue 2.95:1 — below AA, an
* explicit owner-accepted exception limited to staff surfaces). CUSTOMER-FACING
* surfaces must instead use --lc-brand-*-aa with white text (which passes AA).
* Brand orange/blue are NEVER used as text or links on white — use --lc-link. */
--lc-on-brand: var(--lc-white); /* text & icons on a brand fill — WHITE */
--lc-link: #0E6A9E; /* link / brand-coloured text on white — 5.87:1 */
--lc-link-hover: #0B5580; /* link hover, further darkened — 8.0:1 */
/* --- Focus ring (AMD-003 §1, §4): always visible; ink so it clears the ≥ 3:1
* boundary bar on white (17:1), orange (6.27:1), blue (5.78:1) and cream. */
--lc-focus-ring-color: var(--lc-grey-900);
--lc-focus-ring-width: 2px;
--lc-focus-ring-offset: 2px;
/* --- Radius scale (AMD-003 §2): rounded corners applied consistently. --- */
--lc-radius-xs: 4px; /* chips, inline tags, cell affordances */
--lc-radius-sm: 6px; /* inputs, selects, small buttons, table container */
--lc-radius-md: 10px; /* buttons, dropdowns, controls, section headers */
--lc-radius-lg: 16px; /* cards, panels, modals, evidence panels */
--lc-radius-pill: 9999px; /* badges, status pills, toggles */
/* --- Spacing scale (AMD-003 §2): 4px base. Use the scale; never arbitrary px. */
--lc-space-1: 4px;
--lc-space-2: 8px;
--lc-space-3: 12px;
--lc-space-4: 16px;
--lc-space-5: 24px;
--lc-space-6: 32px;
--lc-space-8: 48px;
--lc-space-10: 64px;
/* --- Hairline width (so borders are tokenised too, not magic px) --- */
--lc-border-width: 1px;
/* --- Type scale (AMD-003 §3): rem-based so it honours the user's font size.
* Body 16px; dense regulated data tables step down to sm / xs. --- */
--lc-text-xs: 0.6875rem; /* 11px — table micro-labels */
--lc-text-sm: 0.8125rem; /* 13px — dense tabular data */
--lc-text-base: 1rem; /* 16px — body */
/* --- Elevation scale (AMD-003 §2): soft, low-opacity, layered. Shadow ink is
* grey-900's channels, so depth stays neutral and on-brand. --- */
--lc-shadow-color-rgb: 28, 28, 28; /* = --lc-grey-900 (#1C1C1C) channels */
--lc-shadow-sm: 0 1px 2px rgba(var(--lc-shadow-color-rgb), 0.06),
0 1px 2px rgba(var(--lc-shadow-color-rgb), 0.08);
--lc-shadow-md: 0 2px 6px rgba(var(--lc-shadow-color-rgb), 0.10),
0 1px 2px rgba(var(--lc-shadow-color-rgb), 0.08);
--lc-shadow-lg: 0 8px 24px rgba(var(--lc-shadow-color-rgb), 0.14),
0 2px 6px rgba(var(--lc-shadow-color-rgb), 0.10);
/* --- THE HIT-TARGET LAW, TWO TIERS (ADR 0186, owner item 3; the DP1 density
ruling ADR 0191 — DENSE-36, three graders unanimous, owner "Approve all"
07-08-2026) ---
Every interactive element renders at the TIER FLOOR of EFFECTIVE target
(padding counts, and a control's label counts as part of its target), with
≥ 8px of clear space to the next target ON BOTH TIERS. The CLIENT tier
(public, portal, wizard) keeps the 44px touch floor byte-unchanged from
ADR 0186; the /OFFICE tier takes 36px — a staff console is worked with a
mouse, and the graders consistently chose one more data row per band over
thumb-sized controls. `--lc-target-floor` is the TIER-RESOLVED floor every
shared consumer reads; the `.lc-office` scope re-points it at the office
tier (office.css). THE REVERSAL PATH IS ONE TOKEN: setting
`--lc-hit-target-office: var(--lc-hit-target);` restores the ADR-0186
geometry byte-for-byte on every surface. `-touch` still DERIVES from the
client floor so a call site that means "thumb-sized on purpose" stays 44px
on any tier. */
--lc-hit-target: 44px;
--lc-hit-target-office: 36px;
--lc-target-floor: var(--lc-hit-target);
--lc-hit-target-touch: var(--lc-hit-target);
/* The second half of the law: the clear space between two adjacent targets.
ONE value for both tiers — density buys row count, never separation. */
--lc-target-gap: 8px;
/* Dense internal menus ONLY (owner item 32, ADR 0105): the /office sidebar +
/admin menu rows trade the floor for scanning density — an explicit owner
decision scoped to staff navigation chrome, never customer surfaces. It is
the ONE named exemption the ADR-0186 detector carries (`dense-staff-nav`),
and it survives INSIDE the office tier (32 < 36). */
--lc-hit-target-dense: 32px;
/* --- THE DP1 MECHANICAL-LAW FLOORS (ADR 0191; CALIBRATION.md §6) ---
Every floor the new detector classes measure against is a TOKEN here, and
`tools/design/detect.py` asserts its constants EQUAL to these values (the
ADR-0186 idiom), so the instrument and the system state ONE law. The
zero-tolerance classes (token-integrity, ink-clip, sticky-occlusion,
raw-vocabulary, empty-interpolation, glyph-coverage) have no numeric floor
to carry — their floor IS zero. */
--lc-ink-border-min: 6px; /* text ink to any visible ancestor border/rule */
--lc-ink-control-min: 8px; /* text ink to a foreign control's painted edge */
--lc-edge-clear-min: 6px; /* painted edge to painted edge, sibling controls */
--lc-field-measure-ratio: 2.5; /* a field may not exceed 2.5x its content measure */
--lc-density-low-fill: 0.35; /* a container under 35% filled ... */
--lc-density-high-fill: 0.75; /* ... beside a band sibling over 75% is flagged */
/* The A4 per-type content measures (ch of the field's own font). The shared
control layer sizes fields from these (components.css measure classes +
the name/type attribute rules); the detector's expectation table asserts
equal. `data-lc-measure=""` on a control overrides the expectation. */
--lc-measure-date: 12ch;
--lc-measure-datetime: 20ch;
--lc-measure-egn: 11ch;
--lc-measure-year: 5ch;
--lc-measure-postcode: 5ch;
--lc-measure-amount: 12ch;
--lc-measure-phone: 14ch;
--lc-measure-iban: 24ch;
--lc-measure-otp: 7ch;
/* --- Motion (AMD-003 §5): fast & eased; gated by prefers-reduced-motion. --- */
--lc-motion-fast: 150ms;
--lc-motion-base: 200ms;
--lc-ease: cubic-bezier(0.2, 0, 0.2, 1);
/* ======================================================================== *
* Ergonomics refinement (ADR 0087) — type, weight, font, rhythm tokens.
* Non-colour additions: they sharpen hierarchy and density without touching
* the verified contrast contract (no new hex, no new colour pairing).
* ======================================================================== */
/* Font stacks (ADR 0114 — owner directive 10-07-2026). The UI face of EVERY
* web surface is NUNITO — the self-hosted VARIABLE font declared in
* fonts.css and preloaded by the page shells (SIL OFL 1.1, full Bulgarian
* Cyrillic, wght 200–1000); the system stack trails as the loading/e-mail
* fallback. ZERO external font fetches, ever (no-CDN doctrine + GDPR).
*
* FIGURES render on NUNITO too (ADR 0119 — owner directive 13-07-2026,
* retiring the ADR-0114 mono figure stack): the committed face's digits are
* natively monowidth at every owner weight (gate-measured — the alignment
* property columns rely on), so money, IDs and numeric columns ride
* --lc-font-sans and the dotted-zero system-mono look is gone. --lc-font-mono
* REMAINS a true monospace for genuinely code-like content only (the one
* sanctioned consumer today is the 2FA enrolment secret; the census is
* gate-pinned) — never re-point it at Nunito, and never use it for figures. */
--lc-font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--lc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* Type scale (rem; honours the user's base size). xs/sm/base exist above; these
* extend UP for subheads, section + page titles, and the hero summary figure. */
--lc-text-lg: 1.1875rem; /* 19px — subheads, card titles */
--lc-text-xl: 1.4375rem; /* 23px — page title */
--lc-text-2xl: 1.875rem; /* 30px — section stat values */
--lc-text-3xl: 2.375rem; /* 38px — the summary-band hero figure */
/* Line-heights — tight for figures/headings, normal for prose. */
--lc-leading-tight: 1.15;
--lc-leading-snug: 1.3;
--lc-leading-normal: 1.5;
/* Weights — the owner's named Nunito set (ADR 0114), one stop per type role:
* regular 400 body, prose, table cells
* medium 500 quiet header chrome (whoami pill, breadcrumbs)
* semibold 600 labels, controls (buttons/tabs/nav), emphasised values,
* section titles
* bold 700 table heads, eyebrows, card/panel titles, status pills,
* micro-labels (summary band, office field labels)
* extrabold 800 display — page titles, hero headings, the brand name
* black 900 the brand marks (LC tile, public wordmark)
* Weight is set ONLY through these tokens in first-party web CSS (the sweep
* gate is apps/backoffice/tests/test_web_typography.py). */
--lc-weight-regular: 400;
--lc-weight-medium: 500;
--lc-weight-semibold: 600;
--lc-weight-bold: 700;
--lc-weight-extrabold: 800;
--lc-weight-black: 900;
/* Letter-spacing — wide tracking for uppercase micro-labels (table heads,
* eyebrows); tight tracking for large display titles. */
--lc-tracking-wide: 0.06em;
--lc-tracking-tight: -0.01em;
/* KPI chart style constants (ADR 0126 — owner o30 restyle; EXTENDED, never
* forked, by ADR 0176 — owner item 5). lc-charts.js reads every one of them
* at runtime (the token-colour pattern applied to geometry), so the restyle
* is a token edit and never a draw-site edit. Weights are NOT duplicated
* here: chart text reads the --lc-weight-* role tokens directly (ADR 0114).
*
* The FILL pair: a STACKED band keeps the flat translucent fill, because a
* stacked band is read by its THICKNESS and a gradient fading inside it
* would dissolve the boundary with the band beneath. An UN-STACKED mountain
* carries the vertical gradient instead — full at the line, transparent at
* the baseline — so a tall fill never swamps the gridlines under it. */
--lc-chart-area-alpha: 0.28; /* stacked band, flat */
--lc-chart-area-gradient-top: 0.42; /* mountain fill AT the line */
--lc-chart-area-gradient-bottom: 0.00; /* …fading to transparent */
--lc-chart-line-width: 3; /* ADR 0176: 2.5 -> 3 */
/* The KPI projection's future marking (ADR 0137, EXTENDED by ADR 0176). The
* white veil dims the projected segment behind the today line; the FILL
* SCALE additionally paints the future segment's own fill at this FRACTION
* of the historic fill, so on a gradient mountain the future is a visibly
* different fill and not only a dimmed one. An expectation never reads as
* an actual. */
--lc-chart-future-veil-alpha: 0.45;
--lc-chart-future-fill-scale: 0.33;
--lc-chart-today-line-width: 3; /* ADR 0176: 1.5 -> 2; ADR 0185: -> 3 */
/* The TODAY MARKER (ADR 0185 — owner item 8). On a chart that carries both
* an observed past and a modelled future, the boundary is the single most
* important thing to find, so it says so IN TEXT beside its rule — the house
* rule that colour is never alone. The label sits in a white chip at the top
* of the boundary; the PAD is the chip's inset around the text. */
--lc-chart-today-label-size: 12; /* ADR 0190: 11 -> 12, with the axis labels */
--lc-chart-today-label-pad: 5;
/* Y-axis gridlines (ADR 0176): bolder MAJORS at the labelled ticks over
* lighter, thinner MINORS. DIVISIONS is how many parts each major interval
* is cut into — 2 puts exactly one minor line between adjacent majors.
* ADR 0190 (owner redo item on grid boldness): the minors were re-weighted
* UP to visibility — at 0.30/0.75 they vanished at the staff review widths,
* and a subdivision nobody can see subdivides nothing — while staying
* clearly lighter and thinner than the majors (the owner's "less bold"
* relation, gate-pinned). */
--lc-chart-grid-major-alpha: 0.75; /* ADR 0176: 0.5 -> 0.75 */
--lc-chart-grid-major-width: 1.25; /* ADR 0176: 1 -> 1.25 */
--lc-chart-grid-minor-alpha: 0.40; /* ADR 0190: 0.30 -> 0.40 */
--lc-chart-grid-minor-width: 1; /* ADR 0190: 0.75 -> 1 */
--lc-chart-grid-minor-divisions: 2;
/* Chart label geometry (ADR 0176 — px in SVG user units, deliberately apart
* from the rem type scale). LABEL-SIZE-MIN is the COMPACTION FLOOR: the axis
* shrinks toward it, and coarsens its bucket granularity, rather than ever
* dropping a period label. */
--lc-chart-label-size: 12; /* ADR 0176: 10 -> 11; ADR 0190: -> 12 */
--lc-chart-label-size-min: 8;
--lc-chart-legend-size: 13; /* ADR 0176: 11 -> 12; ADR 0190: -> 13 */
/* THE DISTINCT SERIES PALETTE (ADR 0185 — owner item 8, "distinct colours
* where series crowd"). The BRAND ramp (brand blue, brand orange, then
* descending alpha steps over that pair) is right for one or two series and
* turns a third into a washed-out blue that reads as the first — which is
* exactly what the cash chart's „Total cash" / „At the bank" pair did. A
* chart declares this palette on its ChartSpec (apps/kpi/dashboards.py), the
* same way it declares mountain-vs-line: never a per-chart hack in the
* drawing module.
*
* FOUR SLOTS, and EVERY ONE OF THEM IS MEASURED rather than chosen. Slots 1
* and 2 are var() references, so the brand pair stays single-sourced and
* re-branding moves the charts with it. Slots 3 and 4 were SEARCHED for
* under the bar the gate applies — pairwise separation under normal, protan,
* deutan and tritan vision at EVERY pair, not merely adjacent ones, because
* two lines on one plot can cross anywhere.
*
* Two results of that search are worth keeping, because both are the kind of
* thing taste gets wrong. A GREEN cannot be one of these slots: with brand
* orange fixed, every green collapses toward it under protanopia (the first
* candidate measured 7.97, under the 8.0 target). And the far side of the
* wheel from blue, orange and violet is the crimson family — so slot 4 is
* the member of it that stays FURTHEST from the reserved --lc-error red
* (16.3 apart, above the normal-vision floor), because a series colour that
* reads as "something is wrong" on a staff console is a defect whatever its
* separation score. The margins are recomputed from these very values by the
* permanent gate (apps/kpi/tests/test_cash_chart.py), so a later edit that
* quietly muddies the set fails rather than ships. */
--lc-chart-series-1: var(--lc-brand-secondary); /* brand blue */
--lc-chart-series-2: var(--lc-brand-primary); /* brand orange */
--lc-chart-series-3: #7C3AED; /* violet */
--lc-chart-series-4: #843D56; /* deep plum */
/* ------------------------------------------------------------------------ *
* CANONICAL BREAKPOINT SCALE (ADR 0108 — THE LAW for every first-party
* surface). CSS custom properties cannot appear in @media conditions, so the
* scale is pinned as literal rem values, documented here and enforced by the
* CSS-source gate (apps/backoffice/tests/test_responsive_layout.py):
*
* sm = 40rem (640px) — large phone
* md = 60rem (960px) — tablet; the office sidebar off-canvas boundary
* lg = 75rem (1200px) — desktop; multi-column detail compositions engage
* xl = 100rem (1600px) — wide monitors; the widest compositions
*
* Width @media conditions in first-party CSS may use ONLY these four values
* (min-width preferred for new rules; the pre-existing max-width: 60rem
* office/kpi collapses remain). prefers-* media queries are unrestricted.
* ------------------------------------------------------------------------ */
/* Layout dimensions — tokenised so the shell frame is not magic px. */
--lc-sidebar-width: 15.5rem;
--lc-content-max: 84rem;
/* The comfortable fill-in MEASURE of a single stacked text control (ADR 0179).
It bounds a stacked office form, and it bounds a loose field once a packed
form widens — one value, because it answers one question. */
--lc-field-measure: 40rem;
/* A subtle hairline-depth elevation, below --lc-shadow-sm, for resting rows/cards. */
--lc-shadow-xs: 0 1px 1px rgba(var(--lc-shadow-color-rgb), 0.05);
/* ======================================================================== *
* MORNING LEV — the client-side colour architecture (ADR 0118).
*
* Brand-DERIVED layers for the customer surfaces (public site, wizard,
* portal): tint ladders, transparency veils, gradient washes and
* brand-tinted elevation. Every derived value is NAMED HERE — zero raw hex
* anywhere else (the branding gate enforces it). The bright brand fills
* stay OFF the customer stylesheets (the test_public.py pin): these layers
* are how the brand reaches the client side — as light, air and depth,
* never as a sub-AA text pairing.
*
* Verified pairings (WCAG, computed — see ADR 0118): grey-900 ≥ 10:1 on
* every tint; grey-700 and --lc-link hold AA on the 50/100 tints and
* cream; the deep accents hold AA on white and the 50/100 tints; white
* holds AA on --lc-sky-deep (7.24:1) and on both --lc-brand-*-aa gradient
* stops. The 200/300 tints are ILLUSTRATION / ACCENT fills — never
* text-bearing backgrounds.
* ======================================================================== */
/* Brand channel triplets — the rgba() source for the transparency veils. */
--lc-brand-primary-rgb: 239, 127, 27; /* = --lc-brand-primary */
--lc-brand-secondary-rgb: 1, 160, 226; /* = --lc-brand-secondary */
/* Tint ladders — hand-derived mixes of the two brand hues on white. */
--lc-sun-50: #FEF7EF; /* barely-there warm wash */
--lc-sun-100: #FBE3CE; /* light amber tint */
--lc-sun-200: #F8CCA1; /* illustration mid tint */
--lc-sun-300: #F5B276; /* illustration deep tint */
--lc-sky-50: #F2FAFE; /* barely-there cool wash */
--lc-sky-100: #D3EEFA; /* light sky tint */
--lc-sky-200: #A6DEF5; /* illustration mid tint */
--lc-sky-300: #67C6EE; /* illustration deep tint */
/* Deep anchors — accent ink; AA on white and on the 50/100 tints. */
--lc-sun-deep: #8F4A0D;
--lc-sky-deep: #065D83;
/* Transparency veils — brand light layered over any surface. */
--lc-veil-sun: rgba(var(--lc-brand-primary-rgb), 0.08);
--lc-veil-sun-strong: rgba(var(--lc-brand-primary-rgb), 0.18);
--lc-veil-sky: rgba(var(--lc-brand-secondary-rgb), 0.08);
--lc-veil-sky-strong: rgba(var(--lc-brand-secondary-rgb), 0.18);
--lc-veil-paper: rgba(255, 255, 255, 0.78); /* frosted card over a wash */
/* ADR 0177: the faint pair carries the page-canvas TIDE far below the fold,
* where the ADR-0131 corner veils have long since faded out. Half the
* strength of nothing — deliberately at the threshold of visibility, because
* a page treatment a reader NOTICES is a page treatment competing with the
* copy. Never text-bearing: these ride under the whole document. */
--lc-veil-sun-faint: rgba(var(--lc-brand-primary-rgb), 0.035);
--lc-veil-sky-faint: rgba(var(--lc-brand-secondary-rgb), 0.035);
/* n1 (ADR 0134): the scroll-edge hint — the soft ink shadow the one-line
* header's nav strip paints at a cut-off edge (visible only in a direction
* more content exists; the white covers ride the content). Decorative,
* never text-bearing. */
--lc-edge-hint: rgba(var(--lc-shadow-color-rgb), 0.18);
/* Gradient washes. --lc-wash-dawn is the page-opening signature (sky →
* paper → sun); --lc-wash-deep is the dark chrome band — white text holds
* AA on both of its stops. --lc-dawn-bar is the two-tone accent rule. */
--lc-wash-dawn: linear-gradient(150deg, var(--lc-sky-50) 0%, var(--lc-white) 45%, var(--lc-sun-50) 100%);
--lc-wash-sun: linear-gradient(140deg, var(--lc-sun-50) 0%, var(--lc-sun-100) 100%);
--lc-wash-sky: linear-gradient(140deg, var(--lc-sky-50) 0%, var(--lc-sky-100) 100%);
--lc-wash-deep: linear-gradient(170deg, var(--lc-brand-secondary-aa) 0%, var(--lc-sky-deep) 100%);
--lc-dawn-bar: linear-gradient(90deg, var(--lc-sun-300) 0%, var(--lc-sky-300) 100%);
/* THE PAGE CANVAS (ADR 0131, s16): no client page ever sits on stark white.
* --lc-canvas-day is the warm page paper (one breath above white — the sheet
* components stay pure white so elevation reads as paper-on-desk), and
* --lc-wash-page is the full-document dawn: two soft brand veils high in the
* page over a sky-to-sun vertical drift. Painted by .lc-public on BOTH
* customer shells; every band/panel/wash composes over it.
*
* THE ADR-0177 TIDE (layer 3). The ADR-0131 treatment decorated only the
* FIRST SCREENFUL: both corner veils are anchored near the top and the base
* drift is flat --lc-canvas-day between 26rem and the last 22rem, so on the
* 5,753px landing page some five thousand pixels sat on one flat colour. The
* repeating layer carries the dawn on down — a 120rem tide, sky cresting at
* 30rem and sun at 90rem — so a long page keeps breathing to its end. It is
* a REPEATING gradient rather than a taller fixed one on purpose: the rhythm
* is then a property of the design and not of how long a given page happens
* to be. */
--lc-canvas-day: #FEFCF8;
--lc-wash-page:
radial-gradient(64rem 44rem at 88% -6rem, var(--lc-veil-sun) 0%, transparent 68%),
radial-gradient(56rem 40rem at -12% 14rem, var(--lc-veil-sky) 0%, transparent 68%),
repeating-linear-gradient(180deg,
transparent 0rem,
var(--lc-veil-sky-faint) 30rem,
transparent 60rem,
var(--lc-veil-sun-faint) 90rem,
transparent 120rem),
linear-gradient(180deg, var(--lc-sky-50) 0%, var(--lc-canvas-day) 26rem,
var(--lc-canvas-day) calc(100% - 22rem), var(--lc-sun-50) 100%);
/* THE PHOTOGRAPHIC SCRIM (ADR 0177). A photograph behind text is decorative
* and buys its legibility with a scrim. These are the ONLY two scrims a
* text-bearing photographic surface may use, and they are tokens precisely so
* the legibility proof has ONE subject: the imagery gate parses the stops out
* of these declarations, composites the COMMITTED BACKDROP PIXELS at the
* weakest alpha the copy can sit over, and refuses below 4.5:1 for every text
* role that renders there. Raise a stop and the gate re-measures; lower one
* past what the photograph can carry and it fails.
*
* TWO of them because the copy column can only be CONSTRAINED once the page
* is wide enough to constrain it. Below 75rem the copy fills the hero, so the
* scrim is FLAT and the whole frame is measured; from 75rem the copy is
* capped at 30rem - under half the 65rem inner hero, provably inside the 52%
* stop - so the scrim may open to the right and let the photograph actually
* be SEEN. A directional scrim on a narrow screen would put copy over the
* transparent end, which is the one way this design could hurt a reader. */
--lc-scrim-flat: linear-gradient(rgba(255, 255, 255, 0.94),
rgba(255, 255, 255, 0.94));
--lc-scrim-copy: linear-gradient(92deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.94) 52%,
rgba(255, 255, 255, 0.72) 74%,
rgba(255, 255, 255, 0.34) 100%);
/* Brand-tinted elevation — decorative depth under CTAs / feature cards. */
--lc-shadow-sun: 0 6px 18px rgba(var(--lc-brand-primary-rgb), 0.20),
0 2px 6px rgba(var(--lc-shadow-color-rgb), 0.08);
--lc-shadow-sky: 0 6px 18px rgba(var(--lc-brand-secondary-rgb), 0.16),
0 2px 6px rgba(var(--lc-shadow-color-rgb), 0.08);
}