/* AUTO-GENERATED by scripts/export_tokens_css.py from design_tokens/css.py. * Do not edit this generated token stylesheet directly. * ----------------------------------------------------------------------- * tokens.css — design tokens (:root), base resets. */ :root { color-scheme: light; /* Light surfaces: warm cream and near-white cards. */ --bg-page: #F7F4EF; --bg-card: #FFFEFC; /* Primary navigation — navy with high contrast labels. */ --bg-sidebar: #0D2742; --bg-sidebar-hover: rgba(76,102,130,0.16); --bg-sidebar-active: rgba(76,102,130,0.30); --sidebar-text: #FFFEFC; --sidebar-text-muted: rgba(247,244,239,0.72); --sidebar-border: rgba(247,244,239,0.22); --bg-topbar: rgba(255,254,252,0.92); --bg-page-header: #F7F4EF; /* Brand identity — navy. --brand-blue remains a semantic alias. */ --brand-blue: #0D2742; --brand-blue-bright: #4C6682; --brand-slate: #4C6682; --brand-terracotta: #B96549; --brand-peach: #F2B49F; --terracotta-rgb: 185,101,73; --navy-rgb: 13,39,66; --card-rgb: 255,254,252; --overlay-scrim: rgba(13,39,66,0.38); /* Information and AI cues share slate; navy remains the action color. */ --brand-info: #4C6682; --brand-info-bright: #4C6682; /* Muted status colors; use high-contrast labels beside status cues. */ --brand-amber: #8A7046; --brand-amber-bright: #8A7046; --brand-amber-text: #0D2742; --brand-green: #557565; --brand-red: #98645E; --border-subtle: rgba(76,102,130,0.18); /* Text — navy primary with slate support copy. */ --text-primary: #0D2742; --text-secondary: #4C6682; --text-muted: #4C6682; --text-on-dark: #FFFEFC; --border: #E6DED5; --border-cool: #E6DED5; --border-strong: rgba(76,102,130,0.38); /* Alpha tints derive from shared slate and status colors. */ --tint-blue: rgba(76,102,130,0.10); /* cool brand tint */ --tint-info: rgba(76,102,130,0.10); /* restrained slate information tint */ --tint-amber: rgba(138,112,70,0.10); --tint-green: rgba(85,117,101,0.10); --tint-red: rgba(152,100,94,0.10); --tint-slate: rgba(76,102,130,0.08); /* Quiet navy shadows. */ --shadow-sm: 0 1px 2px rgba(13,39,66,0.04); --shadow-md: 0 2px 6px rgba(13,39,66,0.05), 0 1px 2px rgba(13,39,66,0.04); --shadow-lg: 0 12px 32px -12px rgba(13,39,66,0.12), 0 2px 6px rgba(13,39,66,0.04); --shadow-xl: 0 20px 60px rgba(13,39,66,0.16); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-card: 12px; /* Dual-ring focus (Osperan identity) — inner ring matches card bg, outer ring uses the terracotta focus cue, visible against either light surface. */ --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px rgba(185,101,73,0.82); /* Instrument Serif display, Manrope work typography, Space Grotesk mono. */ --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Space Grotesk', ui-monospace, 'Cascadia Mono', monospace; /* Typography scale */ --text-xs: 0.72rem; --text-compact: 0.78rem; --text-sm: 0.82rem; --text-base: 0.95rem; --text-md: 1.05rem; --text-lg: 1.25rem; --text-xl: clamp(1.25rem, 1.5vw, 1.75rem); --text-2xl: clamp(1.75rem, 2vw, 2.5rem); --text-hero: clamp(2.5rem, 3.5vw, 4rem); /* Semantic typography roles */ --type-page-title-size: 24px; --type-page-title-family: 'Instrument Serif', Georgia, serif; --type-page-title-weight: 400; --type-page-title-line-height: 1.1; --type-page-title-letter-spacing: -0.02em; --type-kpi-value-size: 32px; --type-kpi-value-family: 'Instrument Serif', Georgia, serif; --type-kpi-value-weight: 400; --type-kpi-value-line-height: 1.1; --type-kpi-value-letter-spacing: -0.02em; --type-brand-wordmark-size: 32px; --type-brand-wordmark-family: 'Instrument Serif', Georgia, serif; --type-brand-wordmark-weight: 400; --type-brand-wordmark-line-height: 1.1; --type-brand-wordmark-letter-spacing: -0.02em; --type-display-hero-size: clamp(2.4rem, 5.25vw, 5.6rem); --type-display-hero-family: 'Instrument Serif', Georgia, serif; --type-display-hero-weight: 400; --type-display-hero-line-height: 0.96; --type-display-hero-letter-spacing: -0.025em; --type-section-title-size: 18px; --type-section-title-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-section-title-weight: 600; --type-section-title-line-height: 1.25; --type-section-title-letter-spacing: normal; --type-panel-title-size: 16px; --type-panel-title-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-panel-title-weight: 600; --type-panel-title-line-height: 1.25; --type-panel-title-letter-spacing: normal; --type-body-size: 14px; --type-body-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-body-weight: 400; --type-body-line-height: 1.5; --type-body-letter-spacing: normal; --type-body-emphasis-size: 14px; --type-body-emphasis-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-body-emphasis-weight: 600; --type-body-emphasis-line-height: 1.5; --type-body-emphasis-letter-spacing: normal; --type-body-secondary-size: 13px; --type-body-secondary-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-body-secondary-weight: 400; --type-body-secondary-line-height: 1.4; --type-body-secondary-letter-spacing: normal; --type-table-cell-size: 13px; --type-table-cell-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-table-cell-weight: 400; --type-table-cell-line-height: 1.4; --type-table-cell-letter-spacing: normal; --type-table-header-size: 13px; --type-table-header-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-table-header-weight: 600; --type-table-header-line-height: 1.4; --type-table-header-letter-spacing: normal; --type-field-label-size: 12px; --type-field-label-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-field-label-weight: 600; --type-field-label-line-height: 1.25; --type-field-label-letter-spacing: normal; --type-caption-size: 12px; --type-caption-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-caption-weight: 400; --type-caption-line-height: 1.4; --type-caption-letter-spacing: normal; --type-navigation-size: 13px; --type-navigation-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-navigation-weight: 500; --type-navigation-line-height: 1.25; --type-navigation-letter-spacing: normal; --type-eyebrow-size: 12px; --type-eyebrow-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --type-eyebrow-weight: 600; --type-eyebrow-line-height: 1.25; --type-eyebrow-letter-spacing: 0.04em; --type-technical-size: 12px; --type-technical-family: 'Space Grotesk', ui-monospace, 'Cascadia Mono', monospace; --type-technical-weight: 500; --type-technical-line-height: 1.4; --type-technical-letter-spacing: normal; /* Shared text line-height variants */ --type-compact-line-height: 1.35; --type-supporting-line-height: 1.45; --type-label-transform: uppercase; --type-label-letter-spacing: 0.08em; /* Extended radius tokens */ --radius-xs: 4px; --radius-pill: 999px; --radius-none: 0; /* Spacing tokens */ /* Plan 72: numeric spacing scale (4px base with 2px half steps) so views stop free-typing '10px 16px' / 'gap:12px' / 'margin-top:10px'. */ --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 40px; /* Plan 72: canonical workspace width (was hardcoded max-w-[1600px] in layout.page_root). */ --page-max-width: 1600px; --layout-card-min-width: 220px; --layout-document-queue-score-min-inline-size: 80px; --layout-drawer-width: 480px; --layout-drawer-max-inline-size: 100%; --layout-dialog-min-inline-size: min(320px, calc(100vw - var(--space-8))); --layout-dialog-compact-max-inline-size: 460px; --layout-dialog-standard-max-inline-size: 480px; --border-width-default: 1px; --border-width-none: 0; --border-style-default: solid; --layout-dialog-product-create-min-inline-size: min(520px, calc(100vw - var(--space-8))); --layout-dialog-product-create-max-inline-size: 680px; --layout-dialog-product-delete-min-inline-size: min(400px, calc(100vw - var(--space-8))); --layout-dialog-product-delete-max-inline-size: 560px; --layout-dialog-settings-archive-min-inline-size: min(360px, calc(100vw - var(--space-8))); --layout-dialog-settings-archive-max-inline-size: 480px; --layout-dialog-settings-applicability-min-inline-size: min(380px, calc(100vw - var(--space-8))); --layout-dialog-settings-applicability-max-inline-size: 520px; --layout-dialog-settings-restore-min-inline-size: min(320px, calc(100vw - var(--space-8))); --layout-dialog-settings-restore-max-inline-size: 480px; --layout-dialog-scope-reason-max-inline-size: 560px; --layout-dialog-scope-standard-max-inline-size: 620px; --layout-document-preview-height: 320px; --layout-draft-preview-drawer-width: 520px; --layout-draft-preview-drawer-fluid-inline-size: auto; --layout-responsive-card-grid-columns: repeat(auto-fit, minmax(min(100%, var(--layout-card-min-width)), 1fr)); --layout-source-intake-mobile-uploader-block-size: 132px; --layout-upload-dialog-min-block-size: 54px; --layout-feedback-upload-max-block-size: 78px; --layout-declaration-review-dialog-inline-size: min(960px, 95vw); --layout-declaration-review-dialog-max-block-size: 90vh; --layout-declaration-review-scroll-block-size: 55vh; --layout-mobile-full-inline-size: 100vw; --layout-monitoring-source-family-icon-column-size: 24px; --layout-monitoring-source-family-grid-columns: var(--layout-monitoring-source-family-icon-column-size) minmax(0, 1fr) auto; --layout-monitoring-source-family-row-min-block-size: 38px; --layout-min-content-size: 0; --layout-full-inline-size: 100%; --layout-unbounded-size: none; --layout-sidebar-expanded-width: 240px; --layout-mobile-topbar-action-inline-size: 40px; --layout-mobile-breadcrumb-max-inline-size: min(40vw, 300px); --layout-scope-workspace-gap: 14px; --layout-scope-regulation-list-padding: 2px 0 5px; --layout-product-workspace-columns-tablet: minmax(0, 1fr); --layout-stage-action-columns-tablet: repeat(2, minmax(0, 1fr)); --layout-manager-decision-columns-mobile: minmax(0, 1fr) auto; --layout-scope-workspace-columns-mobile: minmax(0, 1fr); --layout-settings-field-columns-mobile: minmax(0, 1fr); --layout-settings-field-columns-desktop: repeat(2, minmax(0, 1fr)); --layout-product-process-columns-desktop: repeat(4, minmax(0, 1fr)); --layout-product-process-columns-mobile: repeat(2, minmax(0, 1fr)); --layout-page-gutter-top-responsive: clamp(12px, 4vw, 24px); --layout-page-gutter-x-responsive: clamp(12px, 5vw, 32px); /* Font weight tokens */ --font-weight-display: 400; --font-weight-medium: 500; --font-weight-strong: 700; --font-weight-extra-bold: 800; /* Motion tokens — durations + easings used by global transitions, .lift/.press utilities, and page/component keyframes. */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* AI surfaces use slate; primary actions use navy. */ --brand-ai: #4C6682; --brand-ai-hover: #0D2742; --brand-ai-tint: rgba(76,102,130,0.12); --brand-ai-glow: rgba(76,102,130,0.45); /* pulse ring + focus affordance for AI controls */ /* Extended navy palette for hover/active states. */ --brand-blue-dark: #0D2742; /* Surface utility tokens — used in components that need layered bg levels */ --bg-soft: rgba(76,102,130,0.08); /* subtle inset / pill backgrounds */ --bg-elevated: var(--bg-card); /* floated elements above bg-card */ --bg-subtle: var(--bg-page); /* section dividers, even lighter */ --bg-hover: rgba(76,102,130,0.08); /* hover state tint on warm cream */ /* Warm white card surface role. */ --color-white: #FFFEFC; /* High-contrast ink for danger-state text. */ --brand-red-dark: #0D2742; /* Navy text on status backgrounds preserves contrast. */ --brand-green-dark: #0D2742; /* KPI tile tinted borders — paired with matching --tint- backgrounds */ --kpi-border-amber: rgba(138,112,70,0.38); --kpi-border-red: rgba(152,100,94,0.38); --kpi-border-green: rgba(85,117,101,0.38); /* Warm accent for selected navigation and high-priority actions. */ --sidebar-icon-accent: #B96549; /* Login page body text. */ --login-text: #4C6682; /* Obligation tabs default to semantic slate; renderers may supply scoped --oblig-accent overrides. */ --oblig-slate: var(--brand-slate); /* Product page (4-stage layout) — semantic accents + tinted surfaces. Aliased to existing tokens where possible. */ --border-amber: rgba(138,112,70,0.38); --border-green: rgba(85,117,101,0.38); --bg-muted: var(--tint-slate); --bg-panel: var(--bg-card); --text-amber: var(--brand-amber-text); --tint-amber-hover: rgba(242,180,159,0.30); /* Compatibility aliases for migrated CSS consumers. Values still originate in design_tokens so active CSS never carries fallback literals. */ --border-danger: rgba(152,100,94,0.42); --button-primary-bg: #0D2742; --button-primary-bg-hover: #4C6682; --button-primary-bg-active: #0D2742; --button-primary-border: var(--button-primary-bg); --button-primary-text: #F7F4EF; --button-ai-bg: #A45038; --button-ai-bg-hover: #8C3F2D; --button-ai-border: var(--button-ai-bg); --button-ai-text: #F7F4EF; --button-ai-focus: 0 0 0 2px var(--button-ai-bg); --button-secondary-bg: transparent; --button-secondary-bg-hover: #0D2742; --button-secondary-border: var(--border); --button-secondary-text: var(--text-secondary); --button-secondary-text-hover: var(--color-white); --button-danger-bg: transparent; --button-danger-bg-hover: var(--tint-red); --button-danger-border: var(--brand-red); --button-danger-text: #0D2742; --brand-amber-dark: #0D2742; --brand-brown: #B96549; --brand-primary: var(--brand-blue); --color-info-border: var(--brand-info-bright); --color-info-surface: var(--tint-info); --color-warning-border: var(--brand-amber-bright); --color-warning-surface: var(--tint-amber); --lane-color: var(--brand-blue); --surface-accent: var(--tint-info); --surface-alt: var(--bg-soft); --surface-amber: var(--tint-amber-hover); --surface-control-active: var(--bg-card); --surface-control-hover: var(--bg-hover); --surface-control-selected: var(--tint-info); --surface-elevated: var(--bg-elevated); --surface-hover: var(--bg-hover); --surface-muted: var(--bg-muted); --surface-primary: var(--bg-card); --surface-raised: var(--bg-elevated); --surface-secondary: var(--bg-soft); --text-body: var(--text-primary); --text-danger: var(--brand-red-dark); --text-on-brand: var(--color-white); --tint-danger: var(--tint-red); --tint-green-fg: var(--brand-green-dark); --tint-primary: var(--tint-info); --tint-secondary: var(--tint-slate); --tint-success: var(--tint-green); } /* Work typography uses Manrope; display headings use Instrument Serif. */ html, body, .q-page, .q-layout, input, button, textarea, select { font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } body { color: var(--text-primary); background: var(--bg-page-header); font-family: var(--font-body); } /* NiceGUI/Quasar page chrome — zero padding/margin so .forge-shell + .forge-sidebar reach the viewport edges (top, LHS, RHS). Without this, Quasar's .q-page-container + NiceGUI's .nicegui-content wrapper leave a cream/white halo around the deep-violet sidebar, which makes the rail read as a floating card instead of an anchored navigation wall. `.nicegui-content` also defaults to align-items: start, which would collapse .forge-shell to content-width once it becomes a flex child without padding — same family of fix as the .nicegui-column override in components.css. Source-order specificity (this file loads after quasar.css and nicegui.css) is enough — no !important needed. min-height: 100vh on .q-page keeps short pages from exposing the body background below .forge-shell. */ .q-page-container, .q-page, .nicegui-content { padding: 0; margin: 0; } .q-page { min-height: 100vh; } .nicegui-content { align-items: stretch; gap: 0; } /* Display headings use the bundled Instrument Serif face. */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.015em; font-weight: 400; } h1 { letter-spacing: -0.02em; } /* ---- Display typeface ---- * Applied to KPI values and standalone page-header output only. * Body copy, labels, and UI chrome stay in Manrope (var(--font-body)). */ .kpi-value, .metric-mini .mm-value, .render-page-header h1 { font-family: var(--font-display); } /* Tabular numerals — scoped to data elements only, not body copy */ .tabular, table td, .kpi-value, .kpi-delta, .metric-mini .mm-value, .cert-card .cert-count-item .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Accessible focus ring — suppress browser ring for pointer users only; * keyboard / switch users keep full focus visibility via :focus-visible. */ :focus:not(:focus-visible) { outline: none; } button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-sm); } /* Global base interaction transitions — every interactive element shares the same colour/border transition rhythm so hovers and focus state changes feel consistent across the product. */ button, a, [role="button"], [role="tab"], [role="menuitem"] { transition: background-color var(--motion-base) var(--ease-out-quart), color var(--motion-base) var(--ease-out-quart), border-color var(--motion-base) var(--ease-out-quart); } /* Plan 798 — WCAG 2.1 SC 2.3.3 / 2.3.1: respect OS reduced-motion preference. * Suppresses page-fade, skeleton pulse, card hover transforms, and progress-bar * fill transitions. Component-scoped AI button states have their own counterparts. * * Osperan identity (Jun 2026): also disables the new .lift/.press/.row-hover/ * .story-link transforms and underline animation, plus the page-in keyframe * (now a short fade). The base interaction * transitions remain (background/color/border) since those are non-motion. */ @media (prefers-reduced-motion: reduce) { .forge-page { animation: none !important; } .skeleton { animation: none !important; background: var(--tint-slate); } .card { transition: none !important; } .card:hover { transform: none !important; } .card:active { transform: none !important; } .progress-bar .fill { transition: none !important; } /* New utility classes (Phase 1) */ .lift:hover, .lift:active, .glow-hover:hover, .glow-hover:active, .press:active { transform: none !important; } .row-hover { transition: none !important; } .story-link::after { transition: none !important; } }