/* ⚠️ GENERATED FILE — do not edit. Source of truth: src/styles/tokens.ts (scoped to :host for shadow roots). This mirror exposes the same tokens at :root for light-DOM consumers. Regenerated by scripts/generate-token-css.cjs on every npm build (`prebuild` hook). Edit tokens.ts, then run `npm run build`. */ :root { /* ── Core palette — primitives ──────────────────── Hue scales. The ONLY place a colour hex appears. Every semantic token below is a var() alias so that the relationship between intent (danger) and hue (red-500) is explicit. Add a primitive only when ≥2 semantic tokens resolve to the same value — single-consumer values stay inline (e.g. --la-color-primary, locked-bg, the cool-grey border family). See decision 41. */ --la-red-500: oklch(0.581 0.171 25.273); /* #CC4643 · base red — urgent / danger / border-danger */ --la-red-700: oklch(0.493 0.159 26.346); /* #A92F2C · darker red — danger-hover / urgent-text / danger-text */ --la-red-50: oklch(0.972 0.011 17.342); /* #FDF3F3 · tint — urgent-bg / surface-danger */ --la-amber-500: oklch(0.769 0.165 70.08); /* #F59E0B · base amber — proactive / warning / border-warning */ --la-amber-700: oklch(0.555 0.146 48.998); /* #B45309 · darker amber — proactive-text / warning-text */ --la-amber-50: oklch(0.987 0.021 95.277); /* #FFFBEB · tint — proactive-bg / surface-warning */ --la-green-500: oklch(0.522 0.109 158.297); /* #1F7C51 · base green — resolved / success / success-text */ --la-green-600: oklch(0.647 0.133 157.808); /* #32A66E · punchier green — border-success accent only */ --la-green-700: oklch(0.446 0.089 160.23); /* #196343 · darker green — success-hover / resolved-text */ --la-green-50: oklch(0.975 0.015 158.255); /* #EFFAF3 · tint — resolved-bg / surface-success */ --la-blue-500: oklch(0.582 0.138 242.423); /* #0482C5 · base blue — processing / info */ --la-blue-600: oklch(0.623 0.188 259.815); /* #3B82F6 · focus blue — border-focus only */ --la-blue-700: oklch(0.479 0.084 228.87); /* #1B6683 · darker blue — processing-text / info-text */ --la-blue-50: oklch(0.979 0.014 207.878); /* #EEFBFD · tint — processing-bg / surface-info */ --la-purple-500: oklch(0.469 0.152 301.701); /* #6B3FA0 · base purple — doc */ --la-purple-50: oklch(0.944 0.031 302.303); /* #F0E8FE · tint — doc-bg */ --la-indigo-500: oklch(0.521 0.182 268.945); /* #405CD0 · brand accent blue — accent interactive elements, links, attention colour */ --la-indigo-50: oklch(0.962 0.018 272.314); /* #EEF2FF · tint — accent-bg */ /* Added for the fifth and sixth Legal Areas. Both stay clear of the status palette: teal is blue-leaning so it doesn't read as success green, and magenta is clear of danger red. */ --la-teal-500: #0E8C9B; /* base teal — Data Protection identity */ --la-teal-50: #ECFAFB; /* tint — Data Protection tile */ --la-magenta-500: #A93B8F; /* base magenta — Intellectual Property identity */ --la-magenta-50: #FCEEF8; /* tint — Intellectual Property tile */ --la-white: oklch(1 0 0); /* #FFFFFF · used as bg, all -fg foregrounds, text-invert */ /* ── Semantic colours — status ──────────────────── Status colours describe a STATE on something — overdue legal-area row, processing job, resolved insight. */ --la-color-urgent: var(--la-red-500); /* "you must act now" — overdue items, breach states, blocking errors. Solid on alert icons, badges, urgent dot in legal-area rows */ --la-color-urgent-bg: var(--la-red-50); /* tinted surface paired with -urgent-text on alerts and urgent legal-area row highlights */ --la-color-urgent-text: var(--la-red-700); /* readable dark-red text on -urgent-bg, kept dark enough for AA contrast */ --la-color-proactive: var(--la-amber-500); /* heads-up — "attention but not blocking yet". Pending reviews, upcoming deadlines, soft warnings */ --la-color-proactive-bg: var(--la-amber-50); /* surface for proactive alerts and row highlights */ --la-color-proactive-text: var(--la-amber-700); /* readable amber-on-amber for body text inside proactive surfaces */ --la-color-resolved: var(--la-green-500); /* done, signed, sorted. Success badges, signed-document chips, resolved insight markers */ --la-color-resolved-bg: var(--la-green-50); /* surface for success messages and resolved-state rows */ --la-color-resolved-text: var(--la-green-700); /* readable green text on -resolved-bg */ --la-color-processing: var(--la-blue-500); /* "we're working on it" — automated jobs, document analysis in flight, processing widgets */ --la-color-processing-bg: var(--la-blue-50); /* surface for processing widgets and live-status rows */ --la-color-processing-text: var(--la-blue-700); /* readable text on -processing-bg */ --la-color-doc: var(--la-purple-500); /* document classification — distinguishes document chips from generic status badges (Contract, Filed) */ --la-color-doc-bg: var(--la-purple-50); /* tinted surface for document chips and category labels */ --la-color-locked-bg: oklch(0.968 0.007 247.896); /* #F1F5F9 · soft inset background for gated content panels (la-unlock-panel) — bluish grey, no shared primitive */ --la-color-locked-text: var(--la-color-text-muted); /* muted label text on locked panels — soft enough to read as "not yet active" without disappearing */ /* ── Legal Area identity ────────────────────────── Each Legal Area gets a stable brand pair used in three places: its tile in the sidebar, its tile on the dashboard, and the gradient wash on its own page. Drawn only from non-status hues — the status palette (amber / green / red) means "needs attention" / "resolved" / "urgent", so an area coloured from it would read as a state rather than a place. The dashboard previously coloured these tiles by status, which is why an area's identity shifted every time its state did; the count badge carries state now. The -rgb variant is the same hue as a raw triplet, for gradient layers that need per-layer alpha. */ --la-area-governance-bg: var(--la-indigo-50); --la-area-governance-fg: var(--la-indigo-500); --la-area-governance-rgb: 64, 92, 208; --la-area-employment-bg: var(--la-blue-50); --la-area-employment-fg: var(--la-blue-500); --la-area-employment-rgb: 4, 130, 197; --la-area-fundraising-bg: var(--la-purple-50); --la-area-fundraising-fg: var(--la-purple-500); --la-area-fundraising-rgb: 107, 63, 160; /* IP now has its own hue — it was neutral only while the palette was short of primitives, which made the one gated area look disabled rather than distinct. */ --la-area-ip-bg: var(--la-magenta-50); --la-area-ip-fg: var(--la-magenta-500); --la-area-ip-rgb: 169, 59, 143; --la-area-data-bg: var(--la-teal-50); --la-area-data-fg: var(--la-teal-500); --la-area-data-rgb: 14, 140, 155; /* Commercial takes a steel hue — a sixth decorative colour that stays clear of both the status palette and the five above. */ --la-area-commercial-bg: #EEF2F6; --la-area-commercial-fg: #4A6382; --la-area-commercial-rgb: 74, 99, 130; /* Case-level scale — the L1→L3+ complexity standard. A warm cream→yellow→ amber→pink progression, dark ink on every chip (the la-level-indicator badge + leveling matrix). Distinct from status colours on purpose. */ --la-color-level-1: #FEF3C7; /* L1 routine — pale cream */ --la-color-level-2: #FCD34D; /* L2 moderate — yellow */ --la-color-level-3: #F59E0B; /* L3 complex — amber */ --la-color-level-3plus: #F4729B; /* L3+ external counsel — pink */ --la-color-level-text: var(--la-color-text); /* dark ink, all levels */ /* ── Action colours ─────────────────────────────── Action colours drive interactive elements — buttons, focus outlines. Actions get the full -hover / -fg / -text set; signals (warning, info) carry only base + -text by design, since they live on alerts and badges, not buttons. */ --la-color-primary: oklch(0.21 0.006 285.885); /* #18181B · primary action — only on interactive elements (buttons, active states, links). Never decorative. Marks "the next obvious step" */ --la-color-primary-hover: oklch(0.274 0.005 286.033); /* #27272A · hover state of primary buttons and active rails */ --la-color-primary-fg: var(--la-white); /* text and icons on top of solid -primary surfaces */ --la-color-secondary-bg: var(--la-white); /* resting fill for secondary buttons and outlined controls */ --la-color-secondary-text: var(--la-color-text); /* label colour on secondary buttons — full strength dark on white */ --la-color-secondary-border: oklch(0.915 0.002 247.841); /* #E2E3E4 · 1px outline of secondary buttons — slightly heavier than universal -border for clear button affordance */ --la-color-secondary-hover: oklch(0.967 0.002 247.839); /* #F3F4F5 · hover fill for secondary buttons and ghost interactions */ --la-color-success: var(--la-green-500); /* solid success buttons (Sign, Approve) and success accent on icons */ --la-color-success-hover: var(--la-green-700); /* hover state for solid success buttons */ --la-color-success-fg: var(--la-white); /* text on solid success */ --la-color-success-text: var(--la-green-500); /* dark text on tinted surface */ --la-color-danger: var(--la-red-500); /* solid destructive buttons (Delete, Revoke). Same hue as -urgent — irreversible action and urgent state share weight */ --la-color-danger-hover: var(--la-red-700); /* hover state for solid danger buttons */ --la-color-danger-fg: var(--la-white); /* text on solid danger */ --la-color-danger-text: var(--la-red-700); /* readable text on tinted-danger surfaces (alerts, ghost-danger button hover) */ --la-color-accent: var(--la-indigo-500); /* brand accent blue — attention colour, links, and accent interactive elements alongside the near-black primary */ --la-color-accent-hover: oklch(0.469 0.183 270.49); /* #374ABF · hover state for accent buttons and active elements */ --la-color-accent-bg: var(--la-indigo-50); /* tinted surface for accent badges, provisional states, and accent-tinted rows */ --la-color-accent-fg: var(--la-white); /* text on solid accent surfaces */ --la-color-neutral: oklch(0.373 0.031 259.733); /* #374151 · neutral CTA — softer than primary's near-black. Used where primary feels too heavy or where two solid CTAs sit side by side */ --la-color-neutral-hover: oklch(0.331 0.027 261.562); /* #2E3644 · hover state for neutral buttons */ --la-color-neutral-fg: var(--la-white); /* text on solid -neutral surfaces */ --la-color-warning: var(--la-amber-500); /* warning signal — non-blocking attention on icons and badges. Signal, not action: no -hover/-fg by design */ --la-color-warning-text: var(--la-amber-700); /* readable warning text on tinted-warning surfaces */ --la-color-info: var(--la-blue-500); /* info signal — neutral informational accent on icons and badges. Signal, not action: no -hover/-fg by design */ --la-color-info-text: var(--la-blue-700); /* readable info text on tinted-info surfaces */ /* ── Surfaces ─────────────────────────────────── */ --la-color-bg: var(--la-white); /* plain white — default surface for cards, widgets, modals */ --la-color-bg-subtle: oklch(0.985 0 0); /* #FAFAFA · page chrome — page header, tab bar, sidebar bg. Subtle depth separation from white cards without using a shadow */ --la-color-bg-muted: oklch(0.97 0 0); /* #F5F5F5 · warm neutral grey — hover state bg for interactive rows (e.g. la-document-item, sidebar nav) */ --la-color-bg-page: var(--la-color-bg); /* semantic name for page-level body bg */ --la-color-bg-surface: oklch(0.991 0 0); /* #FCFCFC · slightly off-white for aside panels and secondary content shells — a hair separation from pure white */ --la-color-bg-active: oklch(0.955 0 0); /* #F0F0F0 · active selection background — selected nav item, pressed state of a row */ --la-color-bg-invert: oklch(0.205 0 0); /* #171717 · dark surface for inverted contexts — dark toasts, tooltips, code blocks */ --la-color-surface-success: var(--la-green-50); /* success alert background, success-row highlights, ghost-success button hover */ --la-color-surface-warning: var(--la-amber-50); /* warning alert background, notification bars */ --la-color-surface-danger: var(--la-red-50); /* danger alert background, ghost-danger button hover */ --la-color-surface-info: var(--la-blue-50); /* info alert background, processing-state surfaces */ /* Scrim — overlay backdrop for modals, sheets, and any UI that dims the page behind a surface */ --la-color-scrim: rgba(0, 0, 0, 0.2); /* A deliberate variant (decision 27): the insight modal's scrim, ink at 32%, so a white panel reads as a layer over a near-white page (DA-63, 2 Oct 2026). */ --la-color-scrim-strong: rgba(3, 7, 18, 0.32); /* ── AI surface gradient ────────────────────────── Soft sage + sky + sand wash for AI-drafted / insight surfaces. Subtle and transparent — pair with background-color: var(--la-color-bg). Tune the three wash hues (colour + strength) in one place below. */ --la-ai-wash-sage: rgba(94, 158, 110, 0.12); /* upper-left */ --la-ai-wash-sky: rgba(71, 162, 230, 0.10); /* right */ --la-ai-wash-sand: rgba(222, 210, 165, 0.08); /* top */ --la-gradient-ai-surface: linear-gradient(118deg, var(--la-ai-wash-sage) 0%, rgba(94, 158, 110, 0) 62%), linear-gradient(255deg, var(--la-ai-wash-sky) 0%, rgba(71, 162, 230, 0) 60%), linear-gradient(180deg, var(--la-ai-wash-sand) 0%, rgba(255, 255, 255, 0) 70%); /* ── Text ───────────────────────────────────────── */ --la-color-text: oklch(0.263 0.015 235.56); /* #1E262B · primary readable text — body copy, headings, table values */ --la-color-text-secondary: oklch(0.446 0.026 256.802); /* #4B5563 · supporting copy and secondary labels — paragraph text under a heading, form helper text */ --la-color-text-muted: oklch(0.551 0.023 264.364); /* #6B7280 · captions, meta, dates — not the main message but still legible */ --la-color-text-faint: oklch(0.714 0.019 261.325); /* #9CA3AF · hint copy and placeholder text — recedes into the background */ --la-color-text-disabled: oklch(0.872 0.009 258.338); /* #D1D5DB · disabled label text — paired with opacity: 0.4 on interactive elements */ --la-color-text-invert: var(--la-white); /* text on dark/inverted surfaces — toasts, tooltips, dark-mode chrome */ /* ── Borders ────────────────────────────────────── */ --la-color-border: oklch(0.9 0.021 276.933); /* #DADDEC · default interactive border — buttons, inputs, cards, toasts */ --la-color-border-light: oklch(0.95 0.01 273.354); /* #ECEEF5 · structural dividers — table rows, panel edges, section lines. Quieter than the interactive border */ --la-color-border-focus: var(--la-blue-600); /* focus ring on form controls — paired with --la-input-shadow-focus */ --la-color-border-active: oklch(0.21 0.006 285.885); /* #18181B · active/selected outline — sidebar nav rail, active tab, selected card. Coincides with --la-color-primary but kept separate (border vs button concept) */ --la-color-border-success: var(--la-green-600); /* success alert border, ghost-success button hover border — punchier than -success base */ --la-color-border-warning: var(--la-amber-500); /* warning alert border */ --la-color-border-danger: var(--la-red-500); /* danger alert border, ghost-danger button hover border */ /* ── Shadows ────────────────────────────────────── */ /* xs — form-control scale. Subtle 1px depth for checkboxes, secondary buttons, inputs. Not an elevation shadow. See decision 40. */ --la-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --la-shadow-sm: 0 1px 2px rgba(3, 7, 18, 0.08); --la-shadow-sm-up: 0 -1px 2px rgba(3, 7, 18, 0.08); /* sm, cast upward — for sticky footers / bottom bars */ --la-shadow-md: 0 0 0 1px #F1F3FA, 0 1px 2px -1px rgba(3,7,18,.08), 0 2px 4px 0 rgba(3,7,18,.04); /* card — soft three-layer card lift. Pairs with a 1px border (the border carries the edge, the shadow carries the elevation). For in-place cards on near-white surfaces — la-upload-box has-file, etc. */ --la-shadow-card: 0 1px 2px 0 rgba(3, 7, 18, 0.04), 0 4px 8px -2px rgba(3, 7, 18, 0.06), 0 8px 16px -4px rgba(3, 7, 18, 0.04); --la-shadow-float: 0 2px 8px rgba(3, 7, 18, 0.08), 0 8px 24px rgba(3, 7, 18, 0.08); --la-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); /* frosted glass — a light take on the harness remote's Liquid glass (14 Oct 2026) for floating chrome over the page: see-through, blurred, a rim of light on top. Light rather than smoky so dark nav text keeps its contrast. First user: the app shell's nav on tablet and phone (16 Oct 2026). */ --la-glass-bg: rgba(250, 250, 250, 0.62); --la-glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.18) 100%); --la-glass-filter: blur(20px) saturate(185%); --la-glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(3, 7, 18, 0.06); /* dialog — a large panel over a scrim: a 1px ring for an edge, then contact, lift and falloff. The insight modal (DA-63, 2 Oct 2026). */ --la-shadow-dialog: 0 0 0 1px rgba(3, 7, 18, 0.08), 0 1px 2px rgba(3, 7, 18, 0.06), 0 8px 16px -4px rgba(3, 7, 18, 0.10), 0 24px 48px -12px rgba(3, 7, 18, 0.22); /* popover — for floating menus / select panels / dropdowns. Four-layer stack: hairline outline replaces the border, then contact, mid lift, and ambient falloff. Apply with no border. */ --la-shadow-popover: 0 0 0 1px rgba(3, 7, 18, 0.04), 0 1px 2px rgba(3, 7, 18, 0.05), 0 6px 12px -2px rgba(3, 7, 18, 0.06), 0 16px 32px -8px rgba(3, 7, 18, 0.10); /* Candidate — Framer smooth shadow (3-layer negative-spread stack). Softer and more perceptually smooth than --la-shadow-card. Good for elevated cards or panels on white surfaces. --la-shadow-framer: rgba(0, 0, 0, 0.07) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.063) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.024) 0px 10px 10px -3.75px; */ /* ── Input ──────────────────────────────────────── */ --la-input-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.12); /* ── Spacing ────────────────────────────────────── */ --la-space-3xs: 2px; --la-space-2xs: 6px; --la-space-xs: 4px; --la-space-sm: 8px; --la-space-md: 12px; --la-space-lg: 16px; --la-space-xl: 24px; --la-space-2xl: 32px; /* ── Border radius ──────────────────────────────── */ --la-radius-sm: 10px; --la-radius-md: 12px; --la-radius-lg: 16px; --la-radius-xl: 20px; --la-radius-xl1: 24px; --la-radius-xl2: 28px; --la-radius-2xl: 32px; --la-radius-pill: 9999px; /* ── Spinner sizing ─────────────────────────────── */ --la-spinner-sm: 12px; --la-spinner-md: 16px; --la-spinner-lg: 24px; --la-radius-circle: 50%; /* ── Focus ring ────────────────────────────────── */ --la-focus-ring-width: 2px; --la-focus-ring-offset: 2px; /* ── Checkbox ───────────────────────────────────── */ --la-checkbox-size: 16px; --la-checkbox-icon-size: 11px; --la-checkbox-offset: 1px; /* ── Step marker ────────────────────────────────── */ --la-step-marker-size: 22px; --la-step-marker-check-size: 20px; --la-step-marker-glyph-size: 12px; --la-step-marker-passed-glyph-size: 11px; --la-step-marker-ring: 1.5px; /* ── Progress bar ───────────────────────────────── */ --la-progress-height: 4px; /* la-progress default: beside a label in a row */ --la-progress-height-lg: 6px; /* la-progress lg: heading its own panel */ /* ── Disclosure ───────────────────────────────────── */ --la-disclosure-quiet-target: 32px; --la-disclosure-quiet-target-touch: 44px; /* ── Switch ─────────────────────────────────────── */ /* Off-state bg uses its own token — the shared --la-color-bg-* scale tops out at a warm light grey; the switch track needs more visible presence against white surfaces (iOS-convention). On-state reuses --la-color-primary / -primary-hover from the shared scale. */ --la-switch-bg-off: oklch(0.915 0.002 247.841); /* #E2E3E4 */ --la-switch-bg-off-hover: oklch(0.872 0.009 258.338); /* #D1D5DB */ /* ── Toast sizing ───────────────────────────────── */ --la-toast-min-width: 260px; --la-toast-max-width: 340px; /* ── Sources panel sizing ───────────────────────── */ --la-sources-min-width: 280px; --la-sources-max-width: 360px; /* ── Button sizing ──────────────────────────────── */ /* Button heights live off the --la-space scale — they're typography-driven dimensions, not layout distances. See decisions/12-button-padding-off-scale.md. */ --la-button-height-sm: 28px; --la-button-height-default: 32px; --la-button-height-md: 36px; --la-button-height-lg: 44px; /* ── Info hint sizing ───────────────────────────── */ /* Deliberately off the shared button-height scale — info-hint is inline text companion sizing, not a standalone button. See decisions/32-info-hint-token-family.md. */ --la-info-hint-height-sm: 16px; --la-info-hint-height-default: 20px; --la-info-hint-height-lg: 24px; --la-info-hint-icon-sm: 12px; --la-info-hint-icon-default: 14px; --la-info-hint-icon-lg: 16px; /* ── Typography ─────────────────────────────────── */ --la-font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Inter is self-hosted (variable woff2) via @font-face in la-base-root.css — no longer relies on a local install. Fallbacks only show if the webfont fails. See decision 85. */ --la-font-family-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace; /* OS-default mono stack — used for , , and any monospace UI (no web font loaded) */ --la-font-signature: 'Meow Script', 'Snell Roundhand', 'Brush Script MT', cursive; /* self-hosted OFL script for adopted e-signatures (.sig-mark); @font-face in la-base-root.css */ /* Font sizes are in rem so the scale respects the user's browser font-size preference (Geist-style). Comments show the px equivalent at the 16px default root for Figma sync — designers continue to think in px. */ --la-font-size-xs: 0.6875rem; /* 11px — accessibility floor; nothing informational below this */ --la-font-size-sm: 0.75rem; /* 12px */ --la-font-size-md: 0.8125rem; /* 13px */ --la-font-size-base: 0.8125rem; /* 13px */ --la-font-size-lg: 0.875rem; /* 14px */ --la-font-size-xl: 1rem; /* 16px */ --la-font-size-2xl: 1.125rem; /* 18px */ --la-font-size-3xl: 1.25rem; /* 20px */ --la-font-size-4xl: 1.5rem; /* 24px */ --la-font-weight-normal: 400; --la-font-weight-medium: 500; --la-font-weight-semibold: 600; --la-font-weight-bold: 700; --la-line-height: 1.5; /* ── Navigation ─────────────────────────────────── */ --la-nav-bg: oklch(0.985 0 0); /* #FAFAFA */ --la-nav-bg-active: oklch(0.949 0 0); /* #EEEEEE */ --la-nav-bg-hover: oklch(0.274 0.005 286.033); /* #27272A */ --la-nav-icon-color: oklch(0.263 0.015 235.56); /* #1E262B */ /* ── Sidebar ────────────────────────────────────── */ --la-sidebar-width: 220px; --la-sidebar-collapsed-width: 56px; --la-sidebar-collapsed-inset: 6px; --la-nav-header-padding-h: 22px; --la-nav-collapsed-header-padding: 22px; --la-nav-padding-h: 12px; --la-nav-padding-v: 8px; --la-nav-item-padding-h: 9px; --la-nav-item-padding-v: 9px; --la-nav-item-gap: 4px; --la-nav-item-radius: 10px; --la-sidebar-collapsed-padding: 8px; --la-nav-logo-size: 21px; --la-nav-logo-wordmark-height: 14px; --la-nav-logo-gap: 12px; --la-nav-logo-padding-v: 0px; --la-nav-expand-icon-size: 19px; --la-nav-logo-collapsed-offset-x: 6px; --la-nav-logo-collapsed-offset-y: 3px; --la-sidebar-padding-top: 8px; --la-nav-item-icon-size: 17px; --la-nav-sub-height: 26px; --la-nav-sub-padding-v: 6px; --la-nav-sub-padding-h: 12px; /* ── Page header ─────────────────────────────────── */ /* Lines the breadcrumb's first crumb up with the content beneath it: the shell's main pads its content in by --la-main-padding-inline, and the trail sits on that same line rather than 8px further in (nav direction B). */ --la-ph-padding-left: 24px; --la-ph-padding-right: 20px; --la-ph-title-size: 18px; --la-ph-title-weight: 600; --la-ph-bg: oklch(0.985 0 0); /* #FAFAFA */ /* One height for the page header and the sidebar's own header, so the logo lockup and the breadcrumb sit on the same line. 48 rather than 40: in the stacked direction the corner carries the whole navigation and needs the room (nav direction B, 5 Aug 2026). */ --la-ph-height: 48px; --la-ph-padding-v: 0px; --la-ph-gap: 0px; /* ── Main content area ───────────────────────────────── */ --la-main-margin: 8px; --la-main-radius: var(--la-radius-md); --la-main-shadow: var(--la-shadow-md); --la-aside-width: 320px; --la-drawer-size: var(--la-aside-width); /* ── Animation durations ─────────────────────────── */ --la-dur-fast: 150ms; --la-dur-base: 200ms; --la-dur-modal: 330ms; --la-dur-slow: 500ms; /* ── Motion — easing curves ──────────────────────── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring-sm: cubic-bezier(0.22, 1, 0.36, 1); --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* ── Motion — durations ──────────────────────────── */ --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms; --dur-modal: 250ms; --dur-page: 350ms; /* ── Motion — stagger ────────────────────────────── */ --stagger-sm: 30ms; --stagger-md: 50ms; --stagger-lg: 60ms; /* ── Motion — scale presets ──────────────────────── */ --scale-press: 0.97; --scale-enter: 0.96; --scale-hover: 1.02; /* ── Base ───────────────────────────────────────── */ font-family: var(--la-font-family); line-height: var(--la-line-height); color: var(--la-color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* "cv11" (Inter single-story a) removed 2026-07-21 — reverted to the default double-story a for consistency with light-DOM page text, which never carried the alternate. "tnum" = tabular numbers (relied on), "ss01" = open digits (does not affect the a). */ font-feature-settings: "ss01", "tnum"; /* Inherited default — kills orphaned last-line words in body text across the shadow root. Headings that want even line lengths opt into text-wrap: balance in their own rule. See decision 83. */ text-wrap: pretty; }