/** * APM Monaco — Design Tokens (CSS Custom Properties) * Version 1.0.0 — April 2026 * * Usage: Include this file at the root of your project. * All components reference these tokens — never use raw values. * * Dark mode: Override tokens under [data-theme="dark"] selector. * Reduced motion: Handled via @media (prefers-reduced-motion: reduce). */ /* ================================================================ FONTS ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&family=Montserrat:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&family=Noto+Sans+SC:wght@400;500;700&display=swap'); /* ================================================================ ROOT — LIGHT MODE (Default) ================================================================ */ :root { /* ────────────────────────────────────────────── FONT FAMILIES ────────────────────────────────────────────── */ --apm-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --apm-font-secondary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --apm-font-mono: 'Source Code Pro', 'Fira Code', 'Consolas', monospace; --apm-font-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; /* ────────────────────────────────────────────── BRAND — APM NAVY ────────────────────────────────────────────── */ --apm-color-navy-950: #030A18; --apm-color-navy-900: #071431; --apm-color-navy-800: #0E2450; --apm-color-navy-700: #183870; --apm-color-navy-600: #234D91; --apm-color-navy-500: #3063AD; --apm-color-navy-400: #5080C2; --apm-color-navy-300: #7EA2D4; --apm-color-navy-200: #ABC3E5; --apm-color-navy-100: #D5E1F2; --apm-color-navy-50: #EDF1F8; /* ────────────────────────────────────────────── NEUTRALS ────────────────────────────────────────────── */ --apm-color-neutral-950: #0D1117; --apm-color-neutral-900: #1A1F2B; --apm-color-neutral-800: #2E3440; --apm-color-neutral-700: #454B57; --apm-color-neutral-600: #5C6370; --apm-color-neutral-500: #7D8490; --apm-color-neutral-400: #A8ADB5; --apm-color-neutral-300: #C9CDD4; --apm-color-neutral-200: #E1E3E7; --apm-color-neutral-100: #F1F2F4; --apm-color-neutral-50: #F8F9FA; --apm-color-white: #FFFFFF; /* ────────────────────────────────────────────── SEMANTIC — SUCCESS (Teal) ────────────────────────────────────────────── */ --apm-color-success-900: #053B2C; --apm-color-success-700: #0A5E47; --apm-color-success-600: #0D7C5F; --apm-color-success-500: #12A37D; --apm-color-success-200: #8CD8BF; --apm-color-success-100: #C3ECDE; --apm-color-success-50: #EFFAF5; /* ────────────────────────────────────────────── SEMANTIC — CRITICAL (Brick Red) ────────────────────────────────────────────── */ --apm-color-critical-900: #4E120C; --apm-color-critical-700: #8C1A12; --apm-color-critical-600: #B42318; --apm-color-critical-500: #D4351C; --apm-color-critical-200: #F5A69B; --apm-color-critical-100: #FBD5D0; --apm-color-critical-50: #FEF3F2; /* ────────────────────────────────────────────── SEMANTIC — WARNING (Orange, hue 30°) A clearly ORANGE scale — unambiguously distinguishable from critical red. Two previous iterations failed: 1. An amber scale (#916A00 etc.) read as muddy olive / brown and was mistaken for a neutral tone. 2. A red-orange scale (#C2410C, hue 17°) sat too close to critical red (#B42318, hue 4°) — only ~13° of hue separation, so at a glance users could not tell them apart. This scale sits at hue 28–33° (unambiguously "orange"), giving ~26° of separation from critical red — a perceptually distinct jump. The 600 token is reserved for NON-TEXT use (icons, borders, fills, dots); text uses 700 for AA compliance on white and on 100. ────────────────────────────────────────────── */ --apm-color-warning-900: #451A03; --apm-color-warning-700: #B54708; /* Text on white 5.4:1 / on #FFEDD5 4.7:1 — AA (hue 22°) */ --apm-color-warning-600: #DC6803; /* Primary non-text (icons/borders/fills) — hue 30°, AA-Large + non-text 3.9:1 on white */ --apm-color-warning-500: #F79009; /* Interactive / hover — hue 33° */ --apm-color-warning-200: #FDBA74; /* Muted accents, text on dark warning bg (9.3:1 on #1A1A1A — AAA) */ --apm-color-warning-100: #FFEDD5; /* Badges, light bg (hue 30°) */ --apm-color-warning-50: #FFF7ED; /* Subtle surface tint */ /* ────────────────────────────────────────────── SEMANTIC — INFO (Steel Blue) ────────────────────────────────────────────── */ --apm-color-info-900: #0E2F54; --apm-color-info-700: #1A4D85; --apm-color-info-600: #2563AA; --apm-color-info-500: #3A7BC8; --apm-color-info-200: #9DC2EB; --apm-color-info-100: #CDDFF4; --apm-color-info-50: #EFF6FF; /* ────────────────────────────────────────────── CHART COLORS APM charts follow a three-branch rule: 1. SINGLE-SERIES (one metric along a labelled axis — single line chart, single-metric bar / horizontal bar, non-state sparkline, progress fill, brand gauge) → use --apm-color-chart-primary (equals navy-600). Comparison vs period -1 uses the SAME hue at 30-35% opacity, never a different color. 2. MULTI-CATEGORY (color is the only discriminator — stacked bar, stacked area, donut/pie, multi-line) → use --apm-color-chart-1 through --apm-color-chart-8 in strict index order. 3. SEMANTIC (color conveys meaning — up/down trend, goal hit/miss, threshold breach, status) → use success-600 / warning-600 / critical-600 / info-600 / neutral-500 tokens. --apm-color-chart-primary and --apm-color-chart-1 are intentionally different tokens. Do NOT substitute --apm-color-chart-1 (a brighter categorical "blue", #2E6BED) for --apm-color-chart-primary (navy-600, #234D91) on a single-series chart. ────────────────────────────────────────────── */ --apm-color-chart-primary: #234D91; /* navy-600 — single-series canonical blue */ --apm-color-chart-primary-comp: rgba(35, 77, 145, .30); /* same hue @ 30% for period-1 bars */ --apm-color-chart-primary-line: rgba(35, 77, 145, .35); /* same hue @ 35% for dashed comparison lines */ --apm-color-chart-primary-fill: rgba(35, 77, 145, .06); /* same hue @ 6% for line area fills */ --apm-color-chart-1: #2E6BED; /* multi-category only — never use as single-series primary */ --apm-color-chart-2: #00B887; --apm-color-chart-3: #F5A623; --apm-color-chart-4: #A855F7; --apm-color-chart-5: #EF4444; --apm-color-chart-6: #06B6D4; --apm-color-chart-7: #EC4899; --apm-color-chart-8: #84CC16; /* ────────────────────────────────────────────── SURFACES & BACKGROUNDS ────────────────────────────────────────────── */ --apm-color-bg-primary: #F8F9FA; --apm-color-bg-secondary: #F1F2F4; --apm-color-surface-primary: #FFFFFF; --apm-color-surface-secondary: #F8F9FA; --apm-color-surface-tertiary: #F1F2F4; --apm-color-surface-brand: #EDF1F8; --apm-color-surface-selected: #D5E1F2; --apm-color-surface-hover: #F1F2F4; --apm-color-surface-pressed: #E1E3E7; /* ────────────────────────────────────────────── TEXT ────────────────────────────────────────────── */ --apm-color-text-primary: #141618; --apm-color-text-secondary: #5C6370; --apm-color-text-tertiary: #7D8490; --apm-color-text-disabled: #A8ADB5; --apm-color-text-on-navy: #FFFFFF; --apm-color-text-brand: #071431; --apm-color-text-link: #234D91; --apm-color-text-link-hover: #183870; /* ────────────────────────────────────────────── BORDERS ────────────────────────────────────────────── */ --apm-color-border-primary: #E1E3E7; --apm-color-border-secondary: #C9CDD4; --apm-color-border-tertiary: #F1F2F4; --apm-color-border-focused: #234D91; --apm-color-border-critical: #B42318; --apm-color-border-success: #0D7C5F; /* ────────────────────────────────────────────── SPACING (4px base unit) ────────────────────────────────────────────── */ --apm-space-0: 0px; --apm-space-0-5: 2px; --apm-space-1: 4px; --apm-space-1-5: 6px; --apm-space-2: 8px; --apm-space-3: 12px; --apm-space-4: 16px; --apm-space-5: 20px; --apm-space-6: 24px; --apm-space-8: 32px; --apm-space-10: 40px; --apm-space-12: 48px; --apm-space-16: 64px; --apm-space-20: 80px; --apm-space-24: 96px; /* ────────────────────────────────────────────── TYPOGRAPHY — SIZES ────────────────────────────────────────────── */ /* Display */ --apm-text-display-xl-size: 2rem; --apm-text-display-lg-size: 1.75rem; --apm-text-display-md-size: 1.5rem; /* Heading */ --apm-text-heading-lg-size: 1.25rem; --apm-text-heading-md-size: 1.125rem; --apm-text-heading-sm-size: 1rem; --apm-text-heading-xs-size: 0.875rem; /* Body */ --apm-text-body-lg-size: 1rem; --apm-text-body-md-size: 0.875rem; --apm-text-body-sm-size: 0.8125rem; --apm-text-body-xs-size: 0.75rem; /* Label */ --apm-text-label-lg-size: 0.875rem; --apm-text-label-md-size: 0.8125rem; --apm-text-label-sm-size: 0.75rem; /* Button */ --apm-text-button-lg-size: 0.9375rem; --apm-text-button-md-size: 0.875rem; --apm-text-button-sm-size: 0.8125rem; /* Code */ --apm-text-code-size: 0.8125rem; /* ────────────────────────────────────────────── TYPOGRAPHY — WEIGHTS ────────────────────────────────────────────── */ --apm-font-weight-regular: 400; --apm-font-weight-medium: 500; --apm-font-weight-semibold: 600; --apm-font-weight-bold: 700; /* ────────────────────────────────────────────── TYPOGRAPHY — LINE HEIGHTS ────────────────────────────────────────────── */ --apm-text-body-md-line-height: 1.43; --apm-text-body-sm-line-height: 1.38; --apm-text-body-xs-line-height: 1.33; --apm-text-body-lg-line-height: 1.5; /* ────────────────────────────────────────────── BORDER RADIUS ────────────────────────────────────────────── */ --apm-radius-none: 0px; --apm-radius-sm: 4px; --apm-radius-md: 6px; --apm-radius-lg: 8px; --apm-radius-xl: 12px; --apm-radius-full: 9999px; /* ────────────────────────────────────────────── BORDER WIDTH ────────────────────────────────────────────── */ --apm-border-thin: 1px; --apm-border-medium: 2px; --apm-border-thick: 3px; /* ────────────────────────────────────────────── SHADOWS ────────────────────────────────────────────── */ --apm-shadow-none: none; --apm-shadow-xs: 0 1px 2px rgba(13, 17, 23, 0.05); --apm-shadow-sm: 0 1px 3px rgba(13, 17, 23, 0.08), 0 1px 2px rgba(13, 17, 23, 0.04); --apm-shadow-md: 0 4px 6px rgba(13, 17, 23, 0.07), 0 2px 4px rgba(13, 17, 23, 0.04); --apm-shadow-lg: 0 10px 15px rgba(13, 17, 23, 0.08), 0 4px 6px rgba(13, 17, 23, 0.03); --apm-shadow-xl: 0 20px 25px rgba(13, 17, 23, 0.08), 0 8px 10px rgba(13, 17, 23, 0.03); --apm-shadow-focus: 0 0 0 3px rgba(35, 77, 145, 0.4); /* ────────────────────────────────────────────── ANIMATION — DURATIONS ────────────────────────────────────────────── */ --apm-duration-instant: 0ms; --apm-duration-fast: 100ms; --apm-duration-normal: 200ms; --apm-duration-slow: 300ms; --apm-duration-slower: 500ms; /* ────────────────────────────────────────────── ANIMATION — EASING ────────────────────────────────────────────── */ --apm-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0); --apm-ease-in: cubic-bezier(0.42, 0, 1, 1); --apm-ease-out: cubic-bezier(0, 0, 0.58, 1); --apm-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --apm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ────────────────────────────────────────────── Z-INDEX SCALE ────────────────────────────────────────────── */ --apm-z-base: 0; --apm-z-dropdown: 100; --apm-z-sticky: 200; --apm-z-sidebar: 300; --apm-z-topbar: 400; --apm-z-modal-backdrop: 500; --apm-z-modal: 510; --apm-z-popover: 600; --apm-z-tooltip: 700; --apm-z-toast: 800; --apm-z-command-palette: 900; /* ────────────────────────────────────────────── LAYOUT ────────────────────────────────────────────── */ --apm-layout-sidebar-expanded: 220px; /* Default Sidebar § 2.8.2 / § 4.9.1 — mandatory */ --apm-layout-sidebar-collapsed: 64px; /* Default Sidebar collapsed rail */ --apm-layout-topbar-height: 56px; /* generic topbar (NOT the Default Header — see chrome block below) */ --apm-layout-page-header-min: 64px; --apm-layout-content-max: 1200px; /* prose / design-system canvas (§ 6.1 Implementation Guide) */ --apm-layout-content-narrow: 640px; --apm-layout-content-medium: 960px; --apm-layout-content-wide: 1200px; --apm-layout-block-grid: 1440px; /* data-viz Block Grid fixed PC width (§ 11.0.2 Design System) */ --apm-layout-grid-columns: 12; --apm-layout-grid-gutter: 24px; --apm-layout-grid-margin: 32px; /* ────────────────────────────────────────────── APP CHROME — DEFAULT HEADER & DEFAULT SIDEBAR Immutable. See § 2.8 Design System / § 4.9 Implementation Guide. ────────────────────────────────────────────── */ --apm-chrome-x: 8px; /* 1X base unit inside the chrome */ --apm-chrome-header-bg: #071431; /* navy-900 — identical in light & dark */ --apm-chrome-header-logo-w: 48px; /* fixed, non-modifiable */ --apm-chrome-header-logo-h: 27px; /* rendered height at 48px width (80:45 aspect) */ --apm-chrome-header-height: 59px; /* 27px logo + 2X top + 2X bottom at 1X = 8px */ --apm-chrome-header-sep-w: 1px; --apm-chrome-header-sep-h: 20px; /* NEVER full height */ --apm-chrome-header-sep-color: rgba(255, 255, 255, 0.24); --apm-chrome-header-tool-size: 14px; --apm-chrome-header-tool-weight: 600; --apm-chrome-header-tool-color: #FFFFFF; --apm-chrome-header-version-size: 11px; --apm-chrome-header-version-color: rgba(255, 255, 255, 0.55); --apm-chrome-header-action-color: rgba(255, 255, 255, 0.75); --apm-chrome-header-action-hover-bg: rgba(255, 255, 255, 0.08); --apm-chrome-header-avatar-bg: rgba(255, 255, 255, 0.14); --apm-chrome-sidebar-w-expanded: 220px; /* mirrors --apm-layout-sidebar-expanded */ --apm-chrome-sidebar-w-collapsed: 64px; --apm-chrome-sidebar-transition: width 0.25s ease; --apm-chrome-sidebar-collapse-btn: 28px; /* top toggle square */ --apm-chrome-sidebar-icon: 18px; /* nav-link icon size, stroke 1.5 */ --apm-chrome-sidebar-title-size: 10px; /* category / section title */ /* Long-form charter HTML (`APM-Monaco-Digital-Charter.html`): fixed header offset for body padding-top and scroll-margin on in-page anchors. */ --apm-layout-charter-header-offset: var(--apm-chrome-header-height); /* ────────────────────────────────────────────── BREAKPOINTS (for reference — use in @media) Cannot be used directly in media queries, use the values in @media blocks. ────────────────────────────────────────────── */ --apm-bp-sm: 640px; --apm-bp-md: 768px; --apm-bp-lg: 1024px; --apm-bp-xl: 1280px; --apm-bp-2xl: 1536px; --apm-bp-3xl: 1920px; /* ────────────────────────────────────────────── COMPONENT SIZES ────────────────────────────────────────────── */ --apm-size-btn-sm: 32px; --apm-size-btn-md: 36px; --apm-size-btn-lg: 44px; --apm-size-input-sm: 32px; --apm-size-input-md: 36px; --apm-size-input-lg: 44px; --apm-size-icon-xs: 14px; --apm-size-icon-sm: 16px; --apm-size-icon-md: 20px; --apm-size-icon-lg: 24px; --apm-size-icon-xl: 32px; --apm-size-icon-2xl: 48px; --apm-size-avatar-xs: 24px; --apm-size-avatar-sm: 32px; --apm-size-avatar-md: 40px; --apm-size-avatar-lg: 56px; --apm-size-avatar-xl: 80px; /* ────────────────────────────────────────────── DATA VIZ — NUMERIC CAP & BLOCK-GRID FOOTPRINTS See § 11.0.1 (numeric cap) and § 11.0.2 (Block Grid) of the Design System. Canonical width spans : w-3 / w-4 / w-6 / w-8 / w-12 (no w-2 / w-9). Canonical height spans : h-1 / h-2 / h-3 / h-4 (h-5 / h-6 don't exist). Canonical concrete footprints (the only allowed combinations on a real dashboard) are listed with their unique role — every other footprint is forbidden: 3x1 KPI card (no exception) 4x1 Period Comparison (no exception) 6x1 Sparkline strip 3x2 Circular gauge (no exception) 4x2 Linear gauge / Multi-Stat (no exception) 12x2 Multi-metric header strip 3x3 Horizontal bar — top-N ranking (no exception) 6x3 Donut chart — split layout (no exception) 12x3 Funnel / Table / Pivot / Timeline 4x4 Side panel paired with an 8x4 chart 8x4 DEFAULT chart format — Line, Bar, Stacked, Multi-line, Variance, H-stacked, Scatter, Area, Combo, Bubble, Radar, Heatmap (no exception) Removed from the system (do NOT use): 12x5, 6x2, 8x2, 9x3, 12x1. Layout rule (Shopify-admin row-aligned): every brick on a given row of a real dashboard shares the same h-N. Sums to 12 columns: 3+3+3+3, 4+4+4, 6+6, 8+4, 12. ────────────────────────────────────────────── */ --apm-dataviz-numeric-cap: 28px; /* absolute max for KPI / gauge / scorecard numbers */ --apm-dataviz-numeric-sm: 20px; /* compact KPI / inline metric */ --apm-dataviz-numeric-xs: 16px; /* status indicator / ultra-compact */ --apm-dataviz-kpi-padding: 16px; /* brick shell padding (h-1 KPI card) */ --apm-dataviz-scorecard-padding: 16px; --apm-dataviz-brick-radius: 12px; --apm-dataviz-brick-padding: 16px; --apm-dataviz-sparkline-h: 44px; --apm-dataviz-gauge-md: 28px; /* canonical gauge number size — matches numeric cap */ /* Gauge "lg" variant has been retired — do not introduce a gauge-lg token. */ /* Circular & linear gauge — geometry tokens (§ 11.7 Scorecards & Gauges) */ --apm-gauge-circle-stroke: 10px; /* progression ring */ --apm-gauge-bg-stroke: 10px; /* background ring (full bounds) */ --apm-gauge-range-stroke: 6px; /* acceptable-range arc inside the ring */ --apm-gauge-tick-thickness: 2px; --apm-gauge-tolerance-pct: 5; /* default % of range width that counts as "close" → orange */ /* KPI delta — semantic colours for ↗ +X,X% / ↘ −X,X% / → 0,0% */ --apm-kpi-trend-up: var(--apm-color-success-600); --apm-kpi-trend-down: var(--apm-color-critical-600); --apm-kpi-trend-neutral: var(--apm-color-neutral-500); /* Block-Grid Lego Normalization (§ 11.0.2) */ --apm-dataviz-grid-cols: 12; --apm-dataviz-grid-row: 80px; /* base row height */ --apm-dataviz-grid-gap: 16px; /* ────────────────────────────────────────────── FILTERS (§ 10) — Canonical filter bar, controls & functional demos. Five-control catalog: search, single-select dropdown, multi-select dropdown, filter chips, date range picker (with built-in preset + custom + comparison). The segmented period control is DEPRECATED — temporal scope is owned by the date range picker. Active filter pills auto-collapse when empty (.filter-applied:empty {display:none}) — no reserved height when no filter is set. ────────────────────────────────────────────── */ --apm-filter-bar-radius: 8px; /* card mode — wrapping .dv-brick keeps 12 px */ --apm-filter-control-radius: 8px; /* search, filter-btn, dp-btn, multiselect track */ --apm-filter-panel-radius: 12px; /* floating dropdowns */ --apm-filter-chip-radius: 4px; /* chips & applied pills (.btn--pill family) */ --apm-filter-control-h: 32px; /* search input, filter-btn, dp-btn */ --apm-filter-chip-h: 28px; --apm-filter-group-gap: 8px; --apm-filter-search-debounce: 200ms; --apm-filter-active-bg: var(--apm-color-navy-900); /* active chip / counter */ --apm-filter-selection-bg: var(--apm-color-navy-50); /* .filter-btn.has-selection */ --apm-filter-selection-fg: var(--apm-color-navy-900); --apm-filter-dropdown-z: 200; /* 300 when nested in a brick */ /* ────────────────────────────────────────────── DATE RANGE PICKER (§ 10.5) — Single temporal control. Carries three buttons: preset, custom range (opens dual-month .dp-modal calendar) and comparison. Compare-to-Custom mode displays a locked primary-range strip at the top of the modal. Calendar uses event delegation + class-only updates (dpUpdateDayClasses) — no DOM rebuild on day click or hover. ────────────────────────────────────────────── */ --apm-dp-modal-w: 640px; --apm-dp-modal-radius: 16px; --apm-dp-preset-radius: 8px; --apm-dp-primary-strip-radius: 10px; --apm-dp-day-cell: 36px; --apm-dp-day-radius: 8px; /* range endpoints — middle days flat (in-range) */ --apm-dp-in-range-bg: var(--apm-color-navy-50); --apm-dp-in-range-primary-bg: var(--apm-color-navy-100); /* primary range cue */ } /* ================================================================ DARK MODE ================================================================ */ [data-theme="dark"] { /* NOTE: --apm-chrome-header-bg is intentionally NOT overridden — the Default Header stays navy-900 in both light and dark mode (§ 2.8.1). Do not theme-swap the header background. */ /* Surfaces & Backgrounds — pure neutral grays, no blue tint */ --apm-color-bg-primary: #111111; --apm-color-bg-secondary: #111111; --apm-color-surface-primary: #1A1A1A; --apm-color-surface-secondary: #212121; --apm-color-surface-tertiary: #2A2A2A; --apm-color-surface-brand: #1F1F1F; --apm-color-surface-selected: #333333; --apm-color-surface-hover: #212121; --apm-color-surface-pressed: #2A2A2A; /* Text — pure neutral grays */ --apm-color-text-primary: #E8E8E8; --apm-color-text-secondary: #9E9E9E; --apm-color-text-tertiary: #757575; --apm-color-text-disabled: #525252; --apm-color-text-on-navy: #FFFFFF; --apm-color-text-brand: #BDBDBD; --apm-color-text-link: #BDBDBD; --apm-color-text-link-hover: #E0E0E0; /* Borders — pure neutral grays */ --apm-color-border-primary: #2A2A2A; --apm-color-border-secondary: #3A3A3A; --apm-color-border-tertiary: #1A1A1A; --apm-color-border-focused: #757575; --apm-color-border-critical: #D4351C; --apm-color-border-success: #12A37D; /* Shadows (darker for dark mode) */ --apm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --apm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --apm-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --apm-shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --apm-shadow-xl: 0 24px 32px rgba(0, 0, 0, 0.5), 0 8px 12px rgba(0, 0, 0, 0.3); --apm-shadow-focus: 0 0 0 3px rgba(158, 158, 158, 0.4); /* Semantic — Warning (dark mode — lifted orange for surface contrast, hue 31°) */ --apm-color-warning-600: #FDBA74; /* Primary on dark — 9.3:1 on #1A1A1A — AAA, hue 31° (clearly orange) */ --apm-color-warning-500: #FEC989; --apm-color-warning-200: #FED7AA; /* Even lighter peach — used as text color over the rgba warning bg */ --apm-color-warning-100: rgba(220, 104, 3, .18); --apm-color-warning-50: rgba(220, 104, 3, .10); /* Chart single-series primary (dark mode — same role, lifted for contrast) */ --apm-color-chart-primary: #5080C2; /* navy-400 */ --apm-color-chart-primary-comp: rgba(80, 128, 194, .30); --apm-color-chart-primary-line: rgba(80, 128, 194, .35); --apm-color-chart-primary-fill: rgba(80, 128, 194, .08); /* Chart categorical (dark mode variants) */ --apm-color-chart-1: #5080C2; --apm-color-chart-2: #12A37D; --apm-color-chart-3: #B88A00; --apm-color-chart-4: #A78BFA; --apm-color-chart-5: #D4351C; --apm-color-chart-6: #22B8CF; --apm-color-chart-7: #EC4899; --apm-color-chart-8: #84CC16; } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --apm-duration-instant: 0ms; --apm-duration-fast: 0ms; --apm-duration-normal: 100ms; --apm-duration-slow: 100ms; --apm-duration-slower: 100ms; } }