/* OKOA Design System — all-variant theme picker stylesheet — bundle v2.3.0 Set to switch themes. */ :root { --okoa-backdrop-blur: saturate(180%) blur(8px); --okoa-bp-lg: 1024px; --okoa-bp-md: 768px; --okoa-bp-sm: 640px; --okoa-bp-xl: 1280px; --okoa-bp-xs: 0px; --okoa-bp-xxl: 1536px; --okoa-button-padding-x: 16px; --okoa-container-lg: 1024px; --okoa-container-md: 768px; --okoa-container-prose: 680px; --okoa-container-sm: 640px; --okoa-container-xl: 1200px; --okoa-measure-page: 1320px; --okoa-control-height: 40px; --okoa-control-radius: 2px; --okoa-cursor-lerp: 0.22; --okoa-cursor-ring-active: 46px; --okoa-cursor-ring-blend: difference; --okoa-cursor-ring-rest: 28px; --okoa-cursor-ring-stroke: 1.5px; --okoa-dataviz-axis-stroke: 0.5pt; --okoa-dataviz-count-duration: 560ms; --okoa-dataviz-draw-duration: 380ms; --okoa-dataviz-line-stroke: 2.5px; --okoa-dataviz-odometer-duration: 640ms; --okoa-dataviz-odometer-stagger: 55ms; --okoa-density-comfortable-control-height: 40px; --okoa-density-comfortable-gap: 12px; --okoa-density-comfortable-row-height: 44px; --okoa-density-compact-control-height: 32px; --okoa-density-compact-gap: 8px; --okoa-density-compact-row-height: 32px; --okoa-disabled-opacity: 0.4; --okoa-ease-in: cubic-bezier(0.4, 0, 1, 1); --okoa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --okoa-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --okoa-ease-standard: cubic-bezier(0.2, 0, 0, 1); --okoa-ease-settle: cubic-bezier(0.2, 0.6, 0.2, 1); --okoa-ease-snap: cubic-bezier(0.3, 0, 0.3, 1); --okoa-elevation-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --okoa-elevation-overlay: 0 12px 32px rgba(0, 0, 0, 0.12); --okoa-focus-ring-offset: 2px; --okoa-focus-ring-width: 2px; --okoa-grid-hairline-color: color-mix(in srgb, var(--okoa-semantic-fg1) 12%, transparent); --okoa-grid-hairline-weight: 1px; --okoa-grid-letter-columns: 16; --okoa-grid-letter-gutter: 8mm; --okoa-grid-letter-margin: 20mm; --okoa-grid-letter-page-height: 279mm; --okoa-grid-letter-page-width: 216mm; --okoa-grid-slide-columns: 12; --okoa-grid-slide-gutter: 4mm; --okoa-grid-slide-margin: 15mm; --okoa-grid-slide-page-height: 143mm; --okoa-grid-slide-page-width: 254mm; --okoa-hit-slop: 8px; --okoa-index-column: clamp(7rem, 14vw, 12rem); --okoa-index-label-size: 0.66rem; --okoa-index-label-tracking: 0.16em; --okoa-index-number-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); --okoa-index-number-weight: 500; --okoa-index-sticky-offset: 108px; --okoa-motion-default: 220ms; --okoa-motion-deliberate: 560ms; --okoa-motion-fast: 120ms; --okoa-motion-instant: 0ms; --okoa-motion-slow: 380ms; --okoa-motion-stagger: 40ms; --okoa-press-scale: 0.98; --okoa-radii-md: 4px; --okoa-radii-none: 0; --okoa-radii-pill: 9999px; --okoa-radii-sm: 2px; --okoa-radii-lg: 8px; --okoa-radii-circle: 50%; --okoa-rules-default: 1pt; --okoa-rules-emphasis: 1.2pt; --okoa-rules-hairline: 0.5pt; --okoa-border-hair: 1px; --okoa-border-thick: 2px; --okoa-border-emphasis: 3px; --okoa-scrim: rgba(0, 0, 0, 0.40); --okoa-scroll-distance: 16px; --okoa-scroll-duration: 700ms; --okoa-scroll-progress-after: 320px; --okoa-scroll-stagger: 60ms; --okoa-sp-0: 0mm; --okoa-sp-1: 1mm; --okoa-sp-13: 13mm; --okoa-sp-2: 2mm; --okoa-sp-21: 21mm; --okoa-sp-3: 3mm; --okoa-sp-5: 5mm; --okoa-sp-8: 8mm; --okoa-space-0: 0; --okoa-space-1: 4px; --okoa-space-10: 64px; --okoa-space-7: 40px; --okoa-space-9: 56px; --okoa-space-12: 96px; --okoa-space-2: 8px; --okoa-space-3: 12px; --okoa-space-4: 16px; --okoa-space-5: 24px; --okoa-space-6: 32px; --okoa-space-8: 48px; --okoa-space-section: clamp(5rem, 11vh, 11rem); --okoa-texture-grain-blend: multiply; --okoa-texture-grain-opacity: 0.04; --okoa-texture-grain-scale: 160px; --okoa-touch-target-comfortable: 48px; --okoa-touch-target-min: 44px; --okoa-transition-curtain-duration: 380ms; --okoa-transition-headline-duration: 700ms; --okoa-transition-headline-stagger: 90ms; --okoa-type-body-leading: 12pt; --okoa-type-body-size: 9pt; --okoa-type-body-strong-leading: 12pt; --okoa-type-body-strong-size: 9pt; --okoa-type-body-strong-tracking: 0; --okoa-type-body-strong-weight: 650; --okoa-type-body-tracking: 0; --okoa-type-body-weight: 425; --okoa-type-caption-leading: 9pt; --okoa-type-caption-size: 7pt; --okoa-type-caption-tracking: 0.01em; --okoa-type-caption-weight: 450; --okoa-type-display-l-leading: 1.0; --okoa-type-display-l-size: clamp(2rem, 1.35rem + 2.3vw, 3.5rem); --okoa-type-display-l-tracking: -0.016em; --okoa-type-display-l-weight: 500; --okoa-type-display-lg-leading: 72pt; --okoa-type-display-lg-size: 64pt; --okoa-type-display-lg-tracking: -0.04em; --okoa-type-display-lg-weight: 220; --okoa-type-display-md-leading: 54pt; --okoa-type-display-md-size: 48pt; --okoa-type-display-md-tracking: -0.03em; --okoa-type-display-md-weight: 250; --okoa-type-display-sm-leading: 36pt; --okoa-type-display-sm-size: 32pt; --okoa-type-display-sm-tracking: -0.03em; --okoa-type-display-sm-weight: 250; --okoa-type-display-xl-leading: 0.94; --okoa-type-display-xl-size: clamp(3.1rem, 1.4rem + 7.4vw, 7.5rem); --okoa-type-display-xl-tracking: -0.022em; --okoa-type-display-xl-weight: 500; --okoa-type-label-leading: 9pt; --okoa-type-label-size: 8pt; --okoa-type-label-tracking: 0.03em; --okoa-type-label-weight: 600; --okoa-type-subhead-leading: 15pt; --okoa-type-subhead-size: 12pt; --okoa-type-subhead-tracking: -0.01em; --okoa-type-subhead-weight: 650; --okoa-type-table-cell-leading: 9pt; --okoa-type-table-cell-size: 8pt; --okoa-type-table-cell-tracking: 0; --okoa-type-table-cell-weight: 425; --okoa-type-table-header-leading: 9pt; --okoa-type-table-header-size: 8pt; --okoa-type-table-header-tracking: 0; --okoa-type-table-header-weight: 650; --okoa-type-title-leading: 24pt; --okoa-type-title-size: 20pt; --okoa-type-title-tracking: -0.02em; --okoa-type-title-weight: 350; --okoa-z-base: 0; --okoa-z-modal: 1100; --okoa-z-overlay: 1000; --okoa-z-raised: 10; --okoa-z-sticky: 100; --okoa-z-toast: 1200; --okoa-z-tooltip: 1300; --okoa-z-behind: -1; --okoa-z-dock: 90; --okoa-z-drawer: 200; --okoa-z-drawer-high: 300; --okoa-z-cursor: 2147483647; /* ============================================================ INFINITE-CANVAS KIT — pan/zoom graph surfaces (system maps, node/edge diagrams). Colours derive from semantic roles, so the whole kit tracks all 21 themes with no per-theme entries. The canvas engine reads the behavioural values via getComputedStyle(root).getPropertyValue('--okoa-zoom-…'). ============================================================ */ /* surface + blueprint grid */ --okoa-canvas-surface: var(--okoa-semantic-surface-default); --okoa-canvas-grid-minor: color-mix(in srgb, var(--okoa-semantic-fg1) 7%, transparent); --okoa-canvas-grid-major: color-mix(in srgb, var(--okoa-semantic-fg1) 7%, transparent); --okoa-canvas-dot: color-mix(in srgb, var(--okoa-semantic-fg1) 9%, transparent); --okoa-canvas-grid-minor-size: 48px; --okoa-canvas-grid-major-size: 240px; --okoa-canvas-dot-size: 1.3px; /* zoom + pan behaviour (unitless / px — read by the engine) */ --okoa-zoom-min: 0.1; --okoa-zoom-max: 2.6; --okoa-zoom-step: 1.15; --okoa-zoom-wheel-sensitivity: 0.0012; --okoa-zoom-wheel-clamp: 0.06; --okoa-pan-click-threshold: 4px; /* node (canvas card) + its states */ --okoa-node-surface: color-mix(in srgb, var(--okoa-semantic-surface-alt) 90%, transparent); --okoa-node-border: var(--okoa-semantic-border-default); --okoa-node-border-hot: var(--okoa-semantic-fg-accent); --okoa-node-radius: var(--okoa-radii-none); --okoa-node-pad: var(--okoa-space-3); --okoa-node-gap: var(--okoa-space-1); --okoa-node-dim-opacity: 0.22; --okoa-node-intended-opacity: 0.66; /* edge (graph connection) */ --okoa-edge-data: color-mix(in srgb, var(--okoa-semantic-fg2) 80%, transparent); --okoa-edge-auth: var(--okoa-semantic-fg-accent); --okoa-edge-intended: color-mix(in srgb, var(--okoa-semantic-fg1) 34%, transparent); --okoa-edge-muted: color-mix(in srgb, var(--okoa-semantic-fg1) 26%, transparent); --okoa-edge-width: 1.6px; --okoa-edge-width-lit: 2.6px; --okoa-edge-dash: 1.5px 7px; --okoa-edge-dash-intended: 7px 7px; /* motion — canvas interactions (reuse global durations elsewhere) */ --okoa-ease-linear: linear; --okoa-motion-flow-duration: 1000ms; --okoa-motion-flow-distance: 17px; --okoa-motion-canvas-stagger: 9ms; } :root, [data-style="ridgeline"] { --okoa-accent-fill-surface: #FF795E; --okoa-accent-fill-text: #FEFEFE; --okoa-component-chrome-accent-rule: #FF795E; --okoa-component-chrome-breadcrumb: #6B6B6B; --okoa-component-chrome-footer-bg: #465D53; --okoa-component-chrome-footer-text: #FEFEFE; --okoa-component-chrome-page-number: #FEFEFE; --okoa-component-metric-label: #6B6B6B; --okoa-component-metric-rule: #D4D4D4; --okoa-component-metric-value: #3C3C3C; --okoa-component-table-header-bg: #465D53; --okoa-component-table-header-text: #FEFEFE; --okoa-component-table-rule: #D4D4D4; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #3C3C3C; --okoa-cursor-tag-text: #FEFEFE; --okoa-dataviz-axis: #D4D4D4; --okoa-dataviz-grid: #F0ECE9; --okoa-dataviz-point-color: #FF795E; --okoa-dataviz-series: #FF795E; --okoa-focus-ring-color: #465D53; --okoa-index-label-color: #6B6B6B; --okoa-index-number-color: #FF795E; --okoa-scroll-progress-stroke: #FF795E; --okoa-semantic-border-accent: #ff5735; --okoa-semantic-border-default: #D4D4D4; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #465D53; --okoa-semantic-entity-secondary-a: #678CA7; --okoa-semantic-entity-secondary-b: #104473; --okoa-semantic-fg-accent: #C8401F; --okoa-semantic-fg-on-dark: #FEFEFE; --okoa-semantic-fg1: #3C3C3C; --okoa-semantic-fg2: #6B6B6B; --okoa-semantic-fg3: #757575; --okoa-semantic-surface-alt: #F0ECE9; --okoa-semantic-surface-chrome: #465D53; --okoa-semantic-surface-default: #FEFEFE; --okoa-semantic-surface-warm: #F5EEE4; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #465D53; } [data-style="stillness"] { --okoa-accent-fill-surface: #3D4F6F; --okoa-accent-fill-text: #F7F5F2; --okoa-component-chrome-accent-rule: #3D4F6F; --okoa-component-chrome-breadcrumb: #4A4A45; --okoa-component-chrome-footer-bg: #1A1A18; --okoa-component-chrome-footer-text: #F7F5F2; --okoa-component-chrome-page-number: #F7F5F2; --okoa-component-metric-label: #4A4A45; --okoa-component-metric-rule: #E0DDD8; --okoa-component-metric-value: #1A1A18; --okoa-component-table-header-bg: #1A1A18; --okoa-component-table-header-text: #F7F5F2; --okoa-component-table-rule: #E0DDD8; --okoa-component-table-total-rule: #1A1A18; --okoa-cursor-tag-surface: #1A1A18; --okoa-cursor-tag-text: #F7F5F2; --okoa-dataviz-axis: #E0DDD8; --okoa-dataviz-grid: #EDEDEA; --okoa-dataviz-point-color: #3D4F6F; --okoa-dataviz-series: #3D4F6F; --okoa-focus-ring-color: #1A1A18; --okoa-index-label-color: #4A4A45; --okoa-index-number-color: #3D4F6F; --okoa-scroll-progress-stroke: #3D4F6F; --okoa-semantic-border-accent: #3D4F6F; --okoa-semantic-border-default: #E0DDD8; --okoa-semantic-border-strong: #1A1A18; --okoa-semantic-entity-primary: #1A1A18; --okoa-semantic-entity-secondary-a: #3D4F6F; --okoa-semantic-entity-secondary-b: #8B7355; --okoa-semantic-fg-accent: #3D4F6F; --okoa-semantic-fg-on-dark: #F7F5F2; --okoa-semantic-fg1: #1A1A18; --okoa-semantic-fg2: #4A4A45; --okoa-semantic-fg3: #6E6E66; --okoa-semantic-surface-alt: #EDEDEA; --okoa-semantic-surface-chrome: #1A1A18; --okoa-semantic-surface-default: #F7F5F2; --okoa-semantic-surface-warm: #FEFEFE; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3D4F6F; --okoa-signal-info-surface: #EDEDEA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #1A1A18; } [data-style="voltage"] { --okoa-accent-fill-surface: #00E676; --okoa-accent-fill-text: #F0F0F5; --okoa-component-chrome-accent-rule: #00E676; --okoa-component-chrome-breadcrumb: #A0A0AF; --okoa-component-chrome-footer-bg: #1C1C28; --okoa-component-chrome-footer-text: #F0F0F5; --okoa-component-chrome-page-number: #F0F0F5; --okoa-component-metric-label: #A0A0AF; --okoa-component-metric-rule: #2A2A38; --okoa-component-metric-value: #F0F0F5; --okoa-component-table-header-bg: #1C1C28; --okoa-component-table-header-text: #F0F0F5; --okoa-component-table-rule: #2A2A38; --okoa-component-table-total-rule: #6B6B7A; --okoa-cursor-tag-surface: #F0F0F5; --okoa-cursor-tag-text: #0C0C14; --okoa-dataviz-axis: #2A2A38; --okoa-dataviz-grid: #2A2A38; --okoa-dataviz-point-color: #00E676; --okoa-dataviz-series: #00E676; --okoa-focus-ring-color: #00E676; --okoa-index-label-color: #A0A0AF; --okoa-index-number-color: #00E676; --okoa-scroll-progress-stroke: #00E676; --okoa-semantic-border-accent: #00E676; --okoa-semantic-border-default: #2A2A38; --okoa-semantic-border-strong: #6B6B7A; --okoa-semantic-entity-primary: #00E676; --okoa-semantic-entity-secondary-a: #00BCD4; --okoa-semantic-entity-secondary-b: #FFD740; --okoa-semantic-fg-accent: #00E676; --okoa-semantic-fg-on-dark: #F0F0F5; --okoa-semantic-fg1: #F0F0F5; --okoa-semantic-fg2: #A0A0AF; --okoa-semantic-fg3: #7A7A8A; --okoa-semantic-surface-alt: #2A2A38; --okoa-semantic-surface-chrome: #1C1C28; --okoa-semantic-surface-default: #0C0C14; --okoa-semantic-surface-warm: #1C1C28; --okoa-signal-caution: #FFD740; --okoa-signal-caution-surface: #1C1C10; --okoa-signal-info: #00BCD4; --okoa-signal-info-surface: #0C1C1C; --okoa-signal-pass: #00E676; --okoa-signal-pass-surface: #0C1C14; --okoa-signal-risk: #FF5252; --okoa-signal-risk-surface: #1C1018; --okoa-transition-curtain-surface: #1C1C28; } [data-style="japandi-dark"] { --okoa-accent-fill-surface: #58A6FF; --okoa-accent-fill-text: #F0F6FC; --okoa-component-chrome-accent-rule: #58A6FF; --okoa-component-chrome-breadcrumb: #8B949E; --okoa-component-chrome-footer-bg: #161B22; --okoa-component-chrome-footer-text: #F0F6FC; --okoa-component-chrome-page-number: #F0F6FC; --okoa-component-metric-label: #8B949E; --okoa-component-metric-rule: #30363D; --okoa-component-metric-value: #F0F6FC; --okoa-component-table-header-bg: #161B22; --okoa-component-table-header-text: #F0F6FC; --okoa-component-table-rule: #30363D; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #F0F6FC; --okoa-cursor-tag-text: #0D1117; --okoa-dataviz-axis: #30363D; --okoa-dataviz-grid: #21262D; --okoa-dataviz-point-color: #58A6FF; --okoa-dataviz-series: #58A6FF; --okoa-focus-ring-color: #58A6FF; --okoa-index-label-color: #8B949E; --okoa-index-number-color: #58A6FF; --okoa-scroll-progress-stroke: #58A6FF; --okoa-semantic-border-accent: #58A6FF; --okoa-semantic-border-default: #30363D; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #58A6FF; --okoa-semantic-entity-secondary-a: #3FB950; --okoa-semantic-entity-secondary-b: #E3B341; --okoa-semantic-fg-accent: #58A6FF; --okoa-semantic-fg-on-dark: #F0F6FC; --okoa-semantic-fg1: #F0F6FC; --okoa-semantic-fg2: #8B949E; --okoa-semantic-fg3: #7D8590; --okoa-semantic-surface-alt: #21262D; --okoa-semantic-surface-chrome: #161B22; --okoa-semantic-surface-default: #0D1117; --okoa-semantic-surface-warm: #161B22; --okoa-signal-caution: #E3B341; --okoa-signal-caution-surface: #1A1810; --okoa-signal-info: #58A6FF; --okoa-signal-info-surface: #0D1520; --okoa-signal-pass: #3FB950; --okoa-signal-pass-surface: #0D1A14; --okoa-signal-risk: #FF7B72; --okoa-signal-risk-surface: #1C1214; --okoa-transition-curtain-surface: #161B22; } [data-style="japandi-warm"] { --okoa-accent-fill-surface: #7A6B52; --okoa-accent-fill-text: #F8F6F1; --okoa-component-chrome-accent-rule: #7A6B52; --okoa-component-chrome-breadcrumb: #7A6B52; --okoa-component-chrome-footer-bg: #5A4F3D; --okoa-component-chrome-footer-text: #F8F6F1; --okoa-component-chrome-page-number: #F8F6F1; --okoa-component-metric-label: #7A6B52; --okoa-component-metric-rule: #E5DFD2; --okoa-component-metric-value: #5A4F3D; --okoa-component-table-header-bg: #5A4F3D; --okoa-component-table-header-text: #F8F6F1; --okoa-component-table-rule: #E5DFD2; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #5A4F3D; --okoa-cursor-tag-text: #F8F6F1; --okoa-dataviz-axis: #E5DFD2; --okoa-dataviz-grid: #EDE8DF; --okoa-dataviz-point-color: #7A6B52; --okoa-dataviz-series: #7A6B52; --okoa-focus-ring-color: #5C6655; --okoa-index-label-color: #7A6B52; --okoa-index-number-color: #7A6B52; --okoa-scroll-progress-stroke: #7A6B52; --okoa-semantic-border-accent: #7A6B52; --okoa-semantic-border-default: #E5DFD2; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #5C6655; --okoa-semantic-entity-secondary-a: #9FAA93; --okoa-semantic-entity-secondary-b: #786357; --okoa-semantic-fg-accent: #7A6B52; --okoa-semantic-fg-on-dark: #F8F6F1; --okoa-semantic-fg1: #5A4F3D; --okoa-semantic-fg2: #7A6B52; --okoa-semantic-fg3: #786357; --okoa-semantic-surface-alt: #EDE8DF; --okoa-semantic-surface-chrome: #5A4F3D; --okoa-semantic-surface-default: #F8F6F1; --okoa-semantic-surface-warm: #F3F0E8; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #5A4F3D; } [data-style="japandi-sage"] { --okoa-accent-fill-surface: #5C6655; --okoa-accent-fill-text: #F7F8F6; --okoa-component-chrome-accent-rule: #5C6655; --okoa-component-chrome-breadcrumb: #5C6655; --okoa-component-chrome-footer-bg: #434B3F; --okoa-component-chrome-footer-text: #F7F8F6; --okoa-component-chrome-page-number: #F7F8F6; --okoa-component-metric-label: #5C6655; --okoa-component-metric-rule: #DDE1D8; --okoa-component-metric-value: #434B3F; --okoa-component-table-header-bg: #434B3F; --okoa-component-table-header-text: #F7F8F6; --okoa-component-table-rule: #DDE1D8; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #434B3F; --okoa-cursor-tag-text: #F7F8F6; --okoa-dataviz-axis: #DDE1D8; --okoa-dataviz-grid: #E8EBE4; --okoa-dataviz-point-color: #5C6655; --okoa-dataviz-series: #5C6655; --okoa-focus-ring-color: #5C6655; --okoa-index-label-color: #5C6655; --okoa-index-number-color: #5C6655; --okoa-scroll-progress-stroke: #5C6655; --okoa-semantic-border-accent: #5C6655; --okoa-semantic-border-default: #DDE1D8; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #5C6655; --okoa-semantic-entity-secondary-a: #7A8470; --okoa-semantic-entity-secondary-b: #687260; --okoa-semantic-fg-accent: #5C6655; --okoa-semantic-fg-on-dark: #F7F8F6; --okoa-semantic-fg1: #434B3F; --okoa-semantic-fg2: #5C6655; --okoa-semantic-fg3: #687260; --okoa-semantic-surface-alt: #E8EBE4; --okoa-semantic-surface-chrome: #434B3F; --okoa-semantic-surface-default: #F7F8F6; --okoa-semantic-surface-warm: #F0F2ED; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #434B3F; } [data-style="japandi-mauve"] { --okoa-accent-fill-surface: #786357; --okoa-accent-fill-text: #F8F5F4; --okoa-component-chrome-accent-rule: #786357; --okoa-component-chrome-breadcrumb: #786357; --okoa-component-chrome-footer-bg: #5D4E45; --okoa-component-chrome-footer-text: #F8F5F4; --okoa-component-chrome-page-number: #F8F5F4; --okoa-component-metric-label: #786357; --okoa-component-metric-rule: #E6D9D1; --okoa-component-metric-value: #5D4E45; --okoa-component-table-header-bg: #5D4E45; --okoa-component-table-header-text: #F8F5F4; --okoa-component-table-rule: #E6D9D1; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #5D4E45; --okoa-cursor-tag-text: #F8F5F4; --okoa-dataviz-axis: #E6D9D1; --okoa-dataviz-grid: #EDE5DF; --okoa-dataviz-point-color: #786357; --okoa-dataviz-series: #786357; --okoa-focus-ring-color: #786357; --okoa-index-label-color: #786357; --okoa-index-number-color: #786357; --okoa-scroll-progress-stroke: #786357; --okoa-semantic-border-accent: #786357; --okoa-semantic-border-default: #E6D9D1; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #786357; --okoa-semantic-entity-secondary-a: #806A5A; --okoa-semantic-entity-secondary-b: #957E6E; --okoa-semantic-fg-accent: #786357; --okoa-semantic-fg-on-dark: #F8F5F4; --okoa-semantic-fg1: #5D4E45; --okoa-semantic-fg2: #786357; --okoa-semantic-fg3: #806A5A; --okoa-semantic-surface-alt: #EDE5DF; --okoa-semantic-surface-chrome: #5D4E45; --okoa-semantic-surface-default: #F8F5F4; --okoa-semantic-surface-warm: #F2EDE9; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #5D4E45; } [data-style="japandi-ocean"] { --okoa-accent-fill-surface: #5F6B72; --okoa-accent-fill-text: #F6F7F8; --okoa-component-chrome-accent-rule: #5F6B72; --okoa-component-chrome-breadcrumb: #5F6B72; --okoa-component-chrome-footer-bg: #475159; --okoa-component-chrome-footer-text: #F6F7F8; --okoa-component-chrome-page-number: #F6F7F8; --okoa-component-metric-label: #5F6B72; --okoa-component-metric-rule: #D8DCDF; --okoa-component-metric-value: #475159; --okoa-component-table-header-bg: #475159; --okoa-component-table-header-text: #F6F7F8; --okoa-component-table-rule: #D8DCDF; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #475159; --okoa-cursor-tag-text: #F6F7F8; --okoa-dataviz-axis: #D8DCDF; --okoa-dataviz-grid: #E5E8EA; --okoa-dataviz-point-color: #5F6B72; --okoa-dataviz-series: #5F6B72; --okoa-focus-ring-color: #475159; --okoa-index-label-color: #5F6B72; --okoa-index-number-color: #5F6B72; --okoa-scroll-progress-stroke: #5F6B72; --okoa-semantic-border-accent: #5F6B72; --okoa-semantic-border-default: #D8DCDF; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #475159; --okoa-semantic-entity-secondary-a: #667078; --okoa-semantic-entity-secondary-b: #5F6B72; --okoa-semantic-fg-accent: #5F6B72; --okoa-semantic-fg-on-dark: #F6F7F8; --okoa-semantic-fg1: #475159; --okoa-semantic-fg2: #5F6B72; --okoa-semantic-fg3: #667078; --okoa-semantic-surface-alt: #E5E8EA; --okoa-semantic-surface-chrome: #475159; --okoa-semantic-surface-default: #F6F7F8; --okoa-semantic-surface-warm: #EFF1F2; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #475159; } [data-style="nordic-tech"] { --okoa-accent-fill-surface: #202124; --okoa-accent-fill-text: #FEFEFE; --okoa-component-chrome-accent-rule: #202124; --okoa-component-chrome-breadcrumb: #3C4043; --okoa-component-chrome-footer-bg: #0F0F10; --okoa-component-chrome-footer-text: #FEFEFE; --okoa-component-chrome-page-number: #FEFEFE; --okoa-component-metric-label: #3C4043; --okoa-component-metric-rule: #E8EAED; --okoa-component-metric-value: #0F0F10; --okoa-component-table-header-bg: #0F0F10; --okoa-component-table-header-text: #FEFEFE; --okoa-component-table-rule: #E8EAED; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #0F0F10; --okoa-cursor-tag-text: #FEFEFE; --okoa-dataviz-axis: #E8EAED; --okoa-dataviz-grid: #F1F3F4; --okoa-dataviz-point-color: #202124; --okoa-dataviz-series: #202124; --okoa-focus-ring-color: #0F0F10; --okoa-index-label-color: #3C4043; --okoa-index-number-color: #202124; --okoa-scroll-progress-stroke: #202124; --okoa-semantic-border-accent: #202124; --okoa-semantic-border-default: #E8EAED; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #0F0F10; --okoa-semantic-entity-secondary-a: #5F6368; --okoa-semantic-entity-secondary-b: #3C4043; --okoa-semantic-fg-accent: #202124; --okoa-semantic-fg-on-dark: #FEFEFE; --okoa-semantic-fg1: #0F0F10; --okoa-semantic-fg2: #3C4043; --okoa-semantic-fg3: #5F6368; --okoa-semantic-surface-alt: #F1F3F4; --okoa-semantic-surface-chrome: #0F0F10; --okoa-semantic-surface-default: #FEFEFE; --okoa-semantic-surface-warm: #F8F9FA; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #0F0F10; } [data-style="studio-nordost"] { --okoa-accent-fill-surface: #212121; --okoa-accent-fill-text: #FAFAFA; --okoa-component-chrome-accent-rule: #212121; --okoa-component-chrome-breadcrumb: #424242; --okoa-component-chrome-footer-bg: #121212; --okoa-component-chrome-footer-text: #FAFAFA; --okoa-component-chrome-page-number: #FAFAFA; --okoa-component-metric-label: #424242; --okoa-component-metric-rule: #E0E0E0; --okoa-component-metric-value: #121212; --okoa-component-table-header-bg: #121212; --okoa-component-table-header-text: #FAFAFA; --okoa-component-table-rule: #E0E0E0; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #121212; --okoa-cursor-tag-text: #FAFAFA; --okoa-dataviz-axis: #E0E0E0; --okoa-dataviz-grid: #EEEEEE; --okoa-dataviz-point-color: #212121; --okoa-dataviz-series: #212121; --okoa-focus-ring-color: #121212; --okoa-index-label-color: #424242; --okoa-index-number-color: #212121; --okoa-scroll-progress-stroke: #212121; --okoa-semantic-border-accent: #212121; --okoa-semantic-border-default: #E0E0E0; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #121212; --okoa-semantic-entity-secondary-a: #757575; --okoa-semantic-entity-secondary-b: #424242; --okoa-semantic-fg-accent: #212121; --okoa-semantic-fg-on-dark: #FAFAFA; --okoa-semantic-fg1: #121212; --okoa-semantic-fg2: #424242; --okoa-semantic-fg3: #707070; --okoa-semantic-surface-alt: #EEEEEE; --okoa-semantic-surface-chrome: #121212; --okoa-semantic-surface-default: #FAFAFA; --okoa-semantic-surface-warm: #F5F5F5; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #121212; } [data-style="datum-tech"] { --okoa-accent-fill-surface: #1A1A1A; --okoa-accent-fill-text: #F6F6F6; --okoa-component-chrome-accent-rule: #1A1A1A; --okoa-component-chrome-breadcrumb: #282828; --okoa-component-chrome-footer-bg: #0A0A0A; --okoa-component-chrome-footer-text: #F6F6F6; --okoa-component-chrome-page-number: #F6F6F6; --okoa-component-metric-label: #282828; --okoa-component-metric-rule: #D4D4D4; --okoa-component-metric-value: #0A0A0A; --okoa-component-table-header-bg: #0A0A0A; --okoa-component-table-header-text: #F6F6F6; --okoa-component-table-rule: #D4D4D4; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #0A0A0A; --okoa-cursor-tag-text: #F6F6F6; --okoa-dataviz-axis: #D4D4D4; --okoa-dataviz-grid: #E8E8E8; --okoa-dataviz-point-color: #1A1A1A; --okoa-dataviz-series: #1A1A1A; --okoa-focus-ring-color: #0A0A0A; --okoa-index-label-color: #282828; --okoa-index-number-color: #1A1A1A; --okoa-scroll-progress-stroke: #1A1A1A; --okoa-semantic-border-accent: #1A1A1A; --okoa-semantic-border-default: #D4D4D4; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #0A0A0A; --okoa-semantic-entity-secondary-a: #6A6A6A; --okoa-semantic-entity-secondary-b: #282828; --okoa-semantic-fg-accent: #1A1A1A; --okoa-semantic-fg-on-dark: #F6F6F6; --okoa-semantic-fg1: #0A0A0A; --okoa-semantic-fg2: #282828; --okoa-semantic-fg3: #6A6A6A; --okoa-semantic-surface-alt: #E8E8E8; --okoa-semantic-surface-chrome: #0A0A0A; --okoa-semantic-surface-default: #F6F6F6; --okoa-semantic-surface-warm: #F0F0F0; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #0A0A0A; } [data-style="shibuya-light"] { --okoa-accent-fill-surface: #4A90E2; --okoa-accent-fill-text: #FDFDFE; --okoa-component-chrome-accent-rule: #4A90E2; --okoa-component-chrome-breadcrumb: #2C3E50; --okoa-component-chrome-footer-bg: #0D1117; --okoa-component-chrome-footer-text: #FDFDFE; --okoa-component-chrome-page-number: #FDFDFE; --okoa-component-metric-label: #2C3E50; --okoa-component-metric-rule: #E9ECEF; --okoa-component-metric-value: #0D1117; --okoa-component-table-header-bg: #0D1117; --okoa-component-table-header-text: #FDFDFE; --okoa-component-table-rule: #E9ECEF; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #0D1117; --okoa-cursor-tag-text: #FDFDFE; --okoa-dataviz-axis: #E9ECEF; --okoa-dataviz-grid: #F4F6F8; --okoa-dataviz-point-color: #4A90E2; --okoa-dataviz-series: #4A90E2; --okoa-focus-ring-color: #4A90E2; --okoa-index-label-color: #2C3E50; --okoa-index-number-color: #4A90E2; --okoa-scroll-progress-stroke: #4A90E2; --okoa-semantic-border-accent: #4A90E2; --okoa-semantic-border-default: #E9ECEF; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #4A90E2; --okoa-semantic-entity-secondary-a: #2C3E50; --okoa-semantic-entity-secondary-b: #FF6B6B; --okoa-semantic-fg-accent: #2273d2; --okoa-semantic-fg-on-dark: #FDFDFE; --okoa-semantic-fg1: #0D1117; --okoa-semantic-fg2: #2C3E50; --okoa-semantic-fg3: #6C747C; --okoa-semantic-surface-alt: #F4F6F8; --okoa-semantic-surface-chrome: #0D1117; --okoa-semantic-surface-default: #FDFDFE; --okoa-semantic-surface-warm: #F9FAFB; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #B03030; --okoa-signal-risk-surface: #FFF0F0; --okoa-transition-curtain-surface: #0D1117; } [data-style="art-of-zen"] { --okoa-accent-fill-surface: #606C5A; --okoa-accent-fill-text: #F3F0E8; --okoa-component-chrome-accent-rule: #606C5A; --okoa-component-chrome-breadcrumb: #606C5A; --okoa-component-chrome-footer-bg: #5E5E5E; --okoa-component-chrome-footer-text: #F3F0E8; --okoa-component-chrome-page-number: #F3F0E8; --okoa-component-metric-label: #606C5A; --okoa-component-metric-rule: #DFCABA; --okoa-component-metric-value: #5E5E5E; --okoa-component-table-header-bg: #5E5E5E; --okoa-component-table-header-text: #F3F0E8; --okoa-component-table-rule: #DFCABA; --okoa-component-table-total-rule: #3C3C3C; --okoa-cursor-tag-surface: #5E5E5E; --okoa-cursor-tag-text: #F3F0E8; --okoa-dataviz-axis: #DFCABA; --okoa-dataviz-grid: #E0CFC3; --okoa-dataviz-point-color: #606C5A; --okoa-dataviz-series: #606C5A; --okoa-focus-ring-color: #606C5A; --okoa-index-label-color: #606C5A; --okoa-index-number-color: #606C5A; --okoa-scroll-progress-stroke: #606C5A; --okoa-semantic-border-accent: #606C5A; --okoa-semantic-border-default: #DFCABA; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #606C5A; --okoa-semantic-entity-secondary-a: #B9B99D; --okoa-semantic-entity-secondary-b: #8F837A; --okoa-semantic-fg-accent: #606C5A; --okoa-semantic-fg-on-dark: #F3F0E8; --okoa-semantic-fg1: #595959; --okoa-semantic-fg2: #606C5A; --okoa-semantic-fg3: #706860; --okoa-semantic-surface-alt: #E0CFC3; --okoa-semantic-surface-chrome: #5E5E5E; --okoa-semantic-surface-default: #F3F0E8; --okoa-semantic-surface-warm: #E6E4E0; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; --okoa-transition-curtain-surface: #5E5E5E; } /* ── Named choreography (OKOA motion set) ───────────────────────────── */ @keyframes okoa-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes okoa-fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes okoa-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes okoa-reveal { from { opacity: 0; } to { opacity: 1; } } @keyframes okoa-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* Entrance utilities — each maps to a communicative purpose. */ .okoa-fade-in { animation: okoa-fade-in var(--okoa-motion-default) var(--okoa-ease-out) both; } .okoa-fade-in-up { animation: okoa-fade-in-up var(--okoa-motion-default) var(--okoa-ease-out) both; } .okoa-slide-in-right { animation: okoa-slide-in-right var(--okoa-motion-slow) var(--okoa-ease-out) both; } .okoa-skeleton { background: linear-gradient(90deg, var(--okoa-semantic-surface-alt) 25%, var(--okoa-semantic-surface-warm) 37%, var(--okoa-semantic-surface-alt) 63%); background-size: 400% 100%; animation: okoa-shimmer 1200ms var(--okoa-ease-in-out) infinite; } /* ── Interaction: focus ring (never removed) + press feedback ───────── */ :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: var(--okoa-focus-ring-width) var(--okoa-focus-ring-color) solid; outline-offset: var(--okoa-focus-ring-offset); } :where(button, [role="button"]):active { transform: scale(var(--okoa-press-scale)); } :where([disabled], [aria-disabled="true"]) { opacity: var(--okoa-disabled-opacity); cursor: not-allowed; } /* ── Elevation: borders over shadows (hover-only) ───────────────────── */ .okoa-card { border: 1px solid var(--okoa-semantic-border-default); box-shadow: none; transition: border-color var(--okoa-motion-fast) var(--okoa-ease-out), box-shadow var(--okoa-motion-fast) var(--okoa-ease-out); } .okoa-card:hover { border-color: var(--okoa-focus-ring-color); box-shadow: var(--okoa-elevation-hover); } /* ── Accessibility: honor reduced motion (required) ─────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== authored variants promoted from the marketing page (so every page themes identically) ===== */ [data-style="ridgeline"]{ --okoa-accent-fill-surface:#A8492F; --okoa-accent-fill-text:#FBF6EE; } [data-style="voltage"]{--okoa-accent-fill-text:#08160D;} [data-style="japandi-dark"]{--okoa-accent-fill-surface:#1F5FB0;--okoa-accent-fill-text:#EAF2FB;} [data-style="shibuya-light"]{--okoa-accent-fill-surface:#1F5FA6;} [data-style="japandi-warm"]{--okoa-accent-fill-surface:#685A43;} [data-style="japandi-ocean"]{--okoa-accent-fill-surface:#515D64;} [data-style="art-of-zen"]{--okoa-accent-fill-surface:#545F4E;} [data-style="ridgeline-dark"]{ --okoa-accent-fill-surface:#9E4631; --okoa-accent-fill-text:#FBF6EE; --okoa-component-chrome-accent-rule:#FF795E; --okoa-component-chrome-breadcrumb:#9A9C92; --okoa-component-chrome-footer-bg:#0E120F; --okoa-component-chrome-footer-text:#F2EEE6; --okoa-component-chrome-page-number:#F2EEE6; --okoa-component-metric-label:#9A9C92; --okoa-component-metric-rule:#34382F; --okoa-component-metric-value:#F2EEE6; --okoa-component-table-header-bg:#0E120F; --okoa-component-table-header-text:#F2EEE6; --okoa-component-table-rule:#34382F; --okoa-component-table-total-rule:#C8C6BB; --okoa-cursor-tag-surface:#F2EEE6; --okoa-cursor-tag-text:#181B17; --okoa-dataviz-axis:#34382F; --okoa-dataviz-grid:#232722; --okoa-dataviz-point-color:#FF795E; --okoa-dataviz-series:#FF795E; --okoa-focus-ring-color:#C9B79F; --okoa-index-label-color:#9A9C92; --okoa-index-number-color:#FF795E; --okoa-scroll-progress-stroke:#FF795E; --okoa-semantic-border-accent:#FF795E; --okoa-semantic-border-default:#34382F; --okoa-semantic-border-strong:#C8C6BB; --okoa-semantic-entity-primary:#6E8B7E; --okoa-semantic-entity-secondary-a:#678CA7; --okoa-semantic-entity-secondary-b:#8FB0C9; --okoa-semantic-fg-accent:#FF795E; --okoa-semantic-fg-on-dark:#FEFEFE; --okoa-semantic-fg1:#F2EEE6; --okoa-semantic-fg2:#B1B2A8; --okoa-semantic-fg3:#87897F; --okoa-semantic-surface-alt:#232722; --okoa-semantic-surface-chrome:#0E120F; --okoa-semantic-surface-default:#181B17; --okoa-semantic-surface-warm:#20231E; --okoa-signal-caution:#E3B341; --okoa-signal-caution-surface:#1A1810; --okoa-signal-info:#8FB0C9; --okoa-signal-info-surface:#0D1520; --okoa-signal-pass:#7FB089; --okoa-signal-pass-surface:#0D1A14; --okoa-signal-risk:#E8897F; --okoa-signal-risk-surface:#1C1214; --okoa-transition-curtain-surface:#0E120F; } [data-style="stillness-dark"]{ --okoa-semantic-surface-default:#15171C; --okoa-semantic-surface-warm:#1A1D23; --okoa-semantic-surface-alt:#20242B; --okoa-semantic-surface-chrome:#0D0F13; --okoa-semantic-fg1:#ECEEF3; --okoa-semantic-fg2:#A6ACB8; --okoa-semantic-fg3:#7c828d; --okoa-semantic-fg-on-dark:#F7F8FA; --okoa-semantic-fg-accent:#8AA0C4; --okoa-semantic-border-default:#2A2F38; --okoa-semantic-border-strong:#C9CDD5; --okoa-semantic-border-accent:#8AA0C4; --okoa-semantic-entity-primary:#5C7290; --okoa-semantic-entity-secondary-a:#6E86A4; --okoa-semantic-entity-secondary-b:#93A8C6; --okoa-accent-fill-surface:#2C3A52; --okoa-accent-fill-text:#F2F5FA; --okoa-scrim:rgba(0,0,0,0.55); --okoa-index-number-color:#8AA0C4; --okoa-index-label-color:#A6ACB8; --okoa-scroll-progress-stroke:#8AA0C4; --okoa-focus-ring-color:#8AA0C4; --okoa-dataviz-point-color:#8AA0C4; --okoa-dataviz-series:#6E86A4; } [data-style="voltage-light"]{ --okoa-semantic-surface-default:#FBFCFB; --okoa-semantic-surface-warm:#F3F6F3; --okoa-semantic-surface-alt:#ECF1EC; --okoa-semantic-surface-chrome:#0C1A11; --okoa-semantic-fg1:#10160F; --okoa-semantic-fg2:#45503F; --okoa-semantic-fg3:#6b7665; --okoa-semantic-fg-on-dark:#EAFBF0; --okoa-semantic-fg-accent:#0A7A41; --okoa-semantic-border-default:#D6DED4; --okoa-semantic-border-strong:#10160F; --okoa-semantic-border-accent:#0A7A41; --okoa-semantic-entity-primary:#12824A; --okoa-semantic-entity-secondary-a:#1FA85F; --okoa-semantic-entity-secondary-b:#7AC79B; --okoa-accent-fill-surface:#0A6E3B; --okoa-accent-fill-text:#EAFBF0; --okoa-scrim:rgba(6,18,11,0.5); --okoa-index-number-color:#0A7A41; --okoa-index-label-color:#45503F; --okoa-scroll-progress-stroke:#0A7A41; --okoa-focus-ring-color:#0A7A41; --okoa-dataviz-point-color:#0A7A41; --okoa-dataviz-series:#12824A; } [data-style="art-of-zen-dark"]{ --okoa-semantic-surface-default:#181B16; --okoa-semantic-surface-warm:#1E221A; --okoa-semantic-surface-alt:#242A20; --okoa-semantic-surface-chrome:#0F120C; --okoa-semantic-fg1:#ECEDE4; --okoa-semantic-fg2:#A8AD9D; --okoa-semantic-fg3:#818675; --okoa-semantic-fg-on-dark:#F3F0E8; --okoa-semantic-fg-accent:#9DAE8D; --okoa-semantic-border-default:#2D3327; --okoa-semantic-border-strong:#C7C9BB; --okoa-semantic-border-accent:#9DAE8D; --okoa-semantic-entity-primary:#77836A; --okoa-semantic-entity-secondary-a:#8B987B; --okoa-semantic-entity-secondary-b:#A9B59A; --okoa-accent-fill-surface:#49543E; --okoa-accent-fill-text:#F3F0E8; --okoa-scrim:rgba(0,0,0,0.5); --okoa-index-number-color:#9DAE8D; --okoa-index-label-color:#A8AD9D; --okoa-scroll-progress-stroke:#9DAE8D; --okoa-focus-ring-color:#9DAE8D; --okoa-dataviz-point-color:#9DAE8D; --okoa-dataviz-series:#77836A; } [data-style="japandi-sage-dark"]{ --okoa-semantic-surface-default:#161A14; --okoa-semantic-surface-warm:#1B201A; --okoa-semantic-surface-alt:#212820; --okoa-semantic-surface-chrome:#0E120C; --okoa-semantic-fg1:#ECEEE7; --okoa-semantic-fg2:#A6AC9E; --okoa-semantic-fg3:#7f8577; --okoa-semantic-fg-on-dark:#F7F8F6; --okoa-semantic-fg-accent:#93B089; --okoa-semantic-border-default:#2C3327; --okoa-semantic-border-strong:#C6C9BC; --okoa-semantic-border-accent:#93B089; --okoa-semantic-entity-primary:#6F8568; --okoa-semantic-entity-secondary-a:#84A07C; --okoa-semantic-entity-secondary-b:#A2BE9A; --okoa-accent-fill-surface:#3F5238; --okoa-accent-fill-text:#F1F4EC; --okoa-scrim:rgba(0,0,0,0.52); --okoa-index-number-color:#93B089; --okoa-index-label-color:#A6AC9E; --okoa-scroll-progress-stroke:#93B089; --okoa-focus-ring-color:#93B089; --okoa-dataviz-point-color:#93B089; --okoa-dataviz-series:#6F8568; } [data-style="japandi-ocean-dark"]{ --okoa-semantic-surface-default:#131719; --okoa-semantic-surface-warm:#181D20; --okoa-semantic-surface-alt:#1E2429; --okoa-semantic-surface-chrome:#0C0F11; --okoa-semantic-fg1:#E9EEF0; --okoa-semantic-fg2:#A2AAB0; --okoa-semantic-fg3:#7b8389; --okoa-semantic-fg-on-dark:#F6F7F8; --okoa-semantic-fg-accent:#8FB0BE; --okoa-semantic-border-default:#283036; --okoa-semantic-border-strong:#C4CACE; --okoa-semantic-border-accent:#8FB0BE; --okoa-semantic-entity-primary:#5E7B86; --okoa-semantic-entity-secondary-a:#6F909C; --okoa-semantic-entity-secondary-b:#93B4C0; --okoa-accent-fill-surface:#2B4049; --okoa-accent-fill-text:#EFF5F7; --okoa-scrim:rgba(0,0,0,0.55); --okoa-index-number-color:#8FB0BE; --okoa-index-label-color:#A2AAB0; --okoa-scroll-progress-stroke:#8FB0BE; --okoa-focus-ring-color:#8FB0BE; --okoa-dataviz-point-color:#8FB0BE; --okoa-dataviz-series:#5E7B86; } [data-style="nordic-tech-dark"]{ --okoa-semantic-surface-default:#0E0F11; --okoa-semantic-surface-warm:#141518; --okoa-semantic-surface-alt:#1B1D20; --okoa-semantic-surface-chrome:#060708; --okoa-semantic-fg1:#F4F5F7; --okoa-semantic-fg2:#AEB2B8; --okoa-semantic-fg3:#80858C; --okoa-semantic-fg-on-dark:#F4F5F7; --okoa-semantic-fg-accent:#E8EAED; --okoa-semantic-border-default:#2A2D31; --okoa-semantic-border-strong:#E8EAED; --okoa-semantic-border-accent:#E8EAED; --okoa-semantic-entity-primary:#C7CACE; --okoa-semantic-entity-secondary-a:#9AA0A6; --okoa-semantic-entity-secondary-b:#6E747B; --okoa-accent-fill-surface:#ECEEF0; --okoa-accent-fill-text:#0E0F11; --okoa-scrim:rgba(0,0,0,0.6); --okoa-index-number-color:#E8EAED; --okoa-index-label-color:#AEB2B8; --okoa-scroll-progress-stroke:#E8EAED; --okoa-focus-ring-color:#E8EAED; --okoa-dataviz-point-color:#E8EAED; --okoa-dataviz-series:#C7CACE; } [data-style="japandi-warm-dark"]{ --okoa-semantic-surface-default:#1A1714; --okoa-semantic-surface-warm:#201C17; --okoa-semantic-surface-alt:#26211B; --okoa-semantic-surface-chrome:#120F0B; --okoa-semantic-fg1:#EFEAE1; --okoa-semantic-fg2:#B0A595; --okoa-semantic-fg3:#8c806f; --okoa-semantic-fg-on-dark:#F8F6F1; --okoa-semantic-fg-accent:#C2A98A; --okoa-semantic-border-default:#332C24; --okoa-semantic-border-strong:#C9C0B2; --okoa-semantic-border-accent:#C2A98A; --okoa-semantic-entity-primary:#9A876B; --okoa-semantic-entity-secondary-a:#B09A7C; --okoa-semantic-entity-secondary-b:#C8B596; --okoa-accent-fill-surface:#5A4A38; --okoa-accent-fill-text:#F8F6F1; --okoa-scrim:rgba(0,0,0,0.5); --okoa-index-number-color:#C2A98A; --okoa-index-label-color:#B0A595; --okoa-scroll-progress-stroke:#C2A98A; --okoa-focus-ring-color:#C2A98A; --okoa-dataviz-point-color:#C2A98A; --okoa-dataviz-series:#9A876B; }