/* * GENERATED — edit tokens/stratamize.tokens.json, then run `node tools/build-tokens.mjs`. * Do not edit this file by hand: tools/verify-contrast.mjs fails when it drifts from the spine. * Stratamize spine v1.0.0 — prefix --stz- * * Theme: :root = dark (home mode). [data-theme="light"] (any element) = light; * [data-theme="dark"] = dark; with no data-theme on the OS preference decides. * Accent: swaps crimson for the legacy ocean blue (comparison only). */ :root { color-scheme: dark; /* primitive / neutral */ --stz-white: #ffffff; --stz-black: #000000; --stz-midnight-950: #17161a; --stz-midnight-900: #1c1c1f; --stz-midnight-800: #2b2b2f; --stz-midnight-700: #3a3a3f; --stz-gray-600: #666469; --stz-gray-500: #7a777e; --stz-gray-450: #8a888d; --stz-gray-400: #949197; --stz-gray-350: #a9a6ad; --stz-gray-300: #c9c7cc; --stz-gray-200: #e2e1e4; --stz-gray-100: #efeff0; --stz-gray-50: #f7f7f7; /* primitive / crimson */ --stz-crimson-50: #fff1f3; --stz-crimson-100: #ffe0e5; --stz-crimson-200: #ffc2cc; --stz-crimson-300: #ff8a9c; --stz-crimson-400: #ff3355; --stz-crimson-500: #ec1238; --stz-crimson-600: #d90a2c; --stz-crimson-700: #b00824; --stz-crimson-800: #8a0a1f; --stz-crimson-900: #5e0916; --stz-crimson-950: #3a060e; /* primitive / ocean */ --stz-ocean-50: #eef6fc; --stz-ocean-100: #d8eaf8; --stz-ocean-200: #b3d4f0; --stz-ocean-300: #7fb6e6; --stz-ocean-400: #4a98dc; --stz-ocean-500: #2f82cc; --stz-ocean-600: #1e6fb8; --stz-ocean-700: #185b97; --stz-ocean-800: #144a7a; --stz-ocean-900: #0f3a5f; --stz-ocean-950: #0a2640; /* primitive / status */ --stz-green-400: #0eb86c; --stz-green-700: #18794e; --stz-green-900: #1a352b; --stz-green-50: #e8f2ed; --stz-azure-400: #00a7e1; --stz-azure-700: #006d93; --stz-azure-900: #18323e; --stz-azure-50: #e6f0f4; --stz-amber-400: #e68b0f; --stz-amber-700: #a15c00; --stz-amber-900: #3c2e1c; --stz-amber-50: #f6efe6; --stz-vermilion-400: #ff7a5c; --stz-vermilion-700: #b93d14; --stz-vermilion-900: #402b29; --stz-vermilion-50: #f8ece8; /* primitive / dataviz */ --stz-gold-400: #e8a33d; --stz-gold-700: #a86b00; --stz-teal-400: #2bb3a3; --stz-teal-700: #0f7f73; --stz-blue-400: #5b9bd5; --stz-blue-700: #2f6fad; --stz-olive-400: #8fbf4f; --stz-olive-700: #5b7f22; /* primitive / alpha */ --stz-white-a10: rgba(255, 255, 255, 0.1); --stz-white-a15: rgba(255, 255, 255, 0.15); --stz-white-a30: rgba(255, 255, 255, 0.3); --stz-white-a40: rgba(255, 255, 255, 0.4); --stz-white-a70: rgba(255, 255, 255, 0.7); --stz-ink-a05: rgba(23, 23, 23, 0.05); --stz-ink-a10: rgba(23, 23, 23, 0.1); --stz-ink-a30: rgba(23, 23, 23, 0.3); --stz-midnight-a18: rgba(23, 22, 26, 0.18); --stz-midnight-a30: rgba(23, 22, 26, 0.3); --stz-midnight-a70: rgba(23, 22, 26, 0.7); --stz-crimson-a14: rgba(217, 10, 44, 0.14); --stz-crimson-a90: rgba(217, 10, 44, 0.9); --stz-ocean-a14: rgba(30, 111, 184, 0.14); --stz-ocean-a90: rgba(24, 91, 151, 0.9); /* accent */ --stz-accent-50: var(--stz-crimson-50); --stz-accent-100: var(--stz-crimson-100); --stz-accent-200: var(--stz-crimson-200); --stz-accent-300: var(--stz-crimson-300); --stz-accent-400: var(--stz-crimson-400); --stz-accent-500: var(--stz-crimson-500); --stz-accent-600: var(--stz-crimson-600); --stz-accent-700: var(--stz-crimson-700); --stz-accent-800: var(--stz-crimson-800); --stz-accent-900: var(--stz-crimson-900); --stz-accent-950: var(--stz-crimson-950); --stz-accent-a14: var(--stz-crimson-a14); --stz-accent-a90: var(--stz-crimson-a90); --stz-accent-chart-alt-dark: var(--stz-blue-400); --stz-accent-chart-alt-light: var(--stz-blue-700); /* semantic / surface */ --stz-surface-shell: var(--stz-midnight-950); --stz-surface-brand: var(--stz-accent-600); --stz-surface-overlay: var(--stz-accent-a90); --stz-surface-scrim: var(--stz-midnight-a70); --stz-surface-scrim-soft: var(--stz-midnight-a30); /* semantic / text */ --stz-text-subtle: var(--stz-gray-500); --stz-text-on-dark: var(--stz-white); --stz-text-on-dark-muted: var(--stz-gray-400); --stz-text-on-light: var(--stz-midnight-800); --stz-text-on-light-muted: var(--stz-gray-600); /* semantic / accent */ --stz-accent: var(--stz-accent-600); --stz-accent-decor: var(--stz-accent-600); --stz-accent-subtle: var(--stz-accent-a14); /* semantic / border */ --stz-border-accent: var(--stz-accent-600); /* semantic / action */ --stz-action-primary: var(--stz-accent-600); --stz-action-primary-hover: var(--stz-accent-700); --stz-action-primary-active: var(--stz-accent-800); --stz-action-primary-border: var(--stz-action-primary); --stz-on-action-primary: var(--stz-white); --stz-action-neutral: var(--stz-midnight-800); --stz-action-neutral-hover: var(--stz-midnight-700); --stz-on-action-neutral: var(--stz-white); /* semantic / on */ --stz-on-surface-shell: var(--stz-white); --stz-on-surface-shell-muted: var(--stz-gray-400); --stz-on-surface-brand: var(--stz-white); --stz-on-surface-overlay: var(--stz-white); /* semantic / focus */ --stz-focus-on-brand: var(--stz-white); /* semantic / status */ --stz-status-success-on-shell: var(--stz-green-400); --stz-status-info-on-shell: var(--stz-azure-400); --stz-status-warning-on-shell: var(--stz-amber-400); --stz-status-danger-on-shell: var(--stz-vermilion-400); --stz-on-status-shell: var(--stz-midnight-950); /* semantic / chart */ --stz-chart-1: var(--stz-accent-600); /* channels */ --stz-white-rgb: 255, 255, 255; --stz-black-rgb: 0, 0, 0; --stz-midnight-950-rgb: 23, 22, 26; --stz-midnight-900-rgb: 28, 28, 31; --stz-midnight-800-rgb: 43, 43, 47; --stz-accent-600-rgb: 217, 10, 44; /* typography / family */ --stz-font-display: "DM Sans", system-ui, "Segoe UI", Arial, sans-serif; --stz-font-body: "DM Sans", system-ui, "Segoe UI", Arial, sans-serif; --stz-font-utility: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; /* typography / weight */ --stz-weight-regular: 400; --stz-weight-medium: 500; --stz-weight-bold: 700; /* typography / size */ --stz-size-display-hero: 14.063rem; --stz-size-display-hero-solid: 10rem; --stz-size-display-stat: 8.125rem; --stz-size-display-page: 7.5rem; --stz-size-display-page-sm: 5.625rem; --stz-size-numeral: 7.5rem; --stz-size-h1: 4.375rem; --stz-size-h2: 3.438rem; --stz-size-h3: 2.813rem; --stz-size-h4: 2.375rem; --stz-size-h5: 2rem; --stz-size-h6: 1.75rem; --stz-size-countdown: 3.5rem; --stz-size-lead: 24px; --stz-size-title-lg: 22px; --stz-size-title: 20px; --stz-size-nav: 18px; --stz-size-body-lg: 18px; --stz-size-body: 17px; --stz-size-body-sm: 16px; --stz-size-small: 15px; --stz-size-label: 14px; --stz-size-caption: 13px; --stz-size-micro: 12px; --stz-size-nano: 11px; --stz-size-btn-xl: 16px; --stz-size-btn-lg: 14px; --stz-size-btn-md: 13px; --stz-size-btn-sm: 12px; /* typography / line-height */ --stz-leading-display: 1; --stz-leading-page: 6rem; --stz-leading-page-sm: 5.2rem; --stz-leading-numeral: 0.8; --stz-leading-body: 1.765; --stz-leading-dense: 1.5; --stz-lh-body: 30px; --stz-lh-h3: 3.125rem; --stz-lh-h4: 2.7rem; --stz-lh-h5: 2.2rem; --stz-lh-h6: 1.95rem; --stz-lh-countdown: 3.75rem; --stz-lh-lead: 32px; --stz-lh-nav: 20px; --stz-lh-cell: 26px; --stz-lh-label: 22px; --stz-lh-btn-xl: 24px; --stz-lh-btn-lg: 21px; --stz-lh-btn-md: 19.5px; --stz-lh-btn-sm: 18px; /* typography / tracking */ --stz-tracking-hero: -9px; --stz-tracking-hero-solid: -10px; --stz-tracking-display: -5px; --stz-tracking-h1: -2px; --stz-tracking-h2: -2px; --stz-tracking-tight: -1px; --stz-tracking-heading: -0.5px; --stz-tracking-normal: 0; --stz-tracking-ui: 0.5px; --stz-tracking-overline: 1px; --stz-tracking-overline-wide: 2px; /* space */ --stz-space-0: 0; --stz-space-1: 5px; --stz-space-2: 10px; --stz-space-3: 15px; --stz-space-4: 20px; --stz-space-5: 25px; --stz-space-6: 30px; --stz-space-7: 35px; --stz-space-8: 40px; --stz-space-9: 45px; --stz-space-10: 50px; --stz-space-11: 60px; --stz-space-12: 70px; --stz-space-13: 90px; --stz-space-14: 110px; --stz-section-y: 110px; --stz-section-y-xxl: 90px; --stz-section-y-md: 75px; --stz-section-y-sm: 50px; --stz-section-half-y: 70px; --stz-section-half-y-md: 50px; --stz-section-half-y-sm: 40px; --stz-paragraph-gap: 25px; --stz-heading-gap: 30px; /* radius */ --stz-radius-none: 0; --stz-radius-tag: 2px; --stz-radius-control: 4px; --stz-radius-media: 5px; --stz-radius-card: 6px; --stz-radius-panel: var(--stz-radius-card); --stz-radius-feature: var(--stz-radius-card); --stz-radius-pill: 50px; --stz-radius-round: 50%; /* border */ --stz-border-width-hairline: 1px; --stz-border-width-strong: 2px; --stz-focus-width: 2px; --stz-focus-offset: 3px; --stz-focus-ring-on-brand: var(--stz-focus-width) solid var(--stz-focus-on-brand); /* shadow */ --stz-shadow-btn: 0 5px 20px rgba(0, 0, 0, 0.1); --stz-shadow-btn-hover: 0 8px 30px rgba(0, 0, 0, 0.15); --stz-shadow-sm: 0 0 10px rgba(0, 0, 0, 0.08); --stz-shadow-md: 0 0 25px rgba(0, 0, 0, 0.08); --stz-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.08); --stz-shadow-menu: 0 0 35px rgba(0, 0, 0, 0.1); --stz-shadow-drawer: 0 20px 15px rgba(23, 23, 23, 0.05); --stz-shadow-cursor: 0 0 50px rgba(0, 0, 0, 0.25); --stz-text-halo: 0 0 100px rgba(0, 0, 0, 0.9); /* motion / duration */ --stz-duration-fast: 150ms; --stz-duration-quick: 200ms; --stz-duration-toggle: 250ms; --stz-duration-standard: 300ms; --stz-duration-shadow: 350ms; --stz-duration-emphasis: 400ms; --stz-duration-slide: 500ms; --stz-duration-slow: 600ms; --stz-duration-parallax: 800ms; --stz-duration-reveal: 1000ms; --stz-duration-reveal-long: 1200ms; --stz-duration-ambient: 2000ms; --stz-duration-autoplay: 3000ms; --stz-duration-marquee: 4000ms; --stz-duration-rotation: 8000ms; --stz-stagger-sm: 150ms; --stz-stagger-md: 200ms; --stz-stagger-lg: 300ms; --stz-delay-1: 100ms; --stz-delay-2: 125ms; --stz-delay-3: 225ms; --stz-delay-4: 250ms; /* motion / easing */ --stz-ease-linear: linear; --stz-ease-in-out: ease-in-out; --stz-ease-standard: cubic-bezier(0.37, 0, 0.63, 1); --stz-ease-overlay: cubic-bezier(0.12, 0, 0.39, 0); --stz-ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1); --stz-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --stz-ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1); --stz-ease-out-circ: cubic-bezier(0.19, 1, 0.22, 1); --stz-ease-lift: cubic-bezier(0.2, 0, 0.3, 1); --stz-ease-switch: cubic-bezier(0.1, 0.75, 0.25, 1); --stz-ease-flip: cubic-bezier(0.5, 0.3, 0.3, 1); --stz-ease-menu: cubic-bezier(0.61, 1, 0.88, 1); /* motion / composite */ --stz-motion-fast: var(--stz-duration-fast) var(--stz-ease-in-out); --stz-motion-standard: var(--stz-duration-standard) var(--stz-ease-in-out); --stz-motion-route: var(--stz-duration-emphasis) var(--stz-ease-standard); --stz-motion-reveal: var(--stz-duration-slide) var(--stz-ease-out-quad); --stz-motion-properties: transform, opacity, clip-path, filter, background-position; /* z */ --stz-z-base: 1; --stz-z-cell: 9; --stz-z-header: 99; --stz-z-progress: 111; --stz-z-dropdown: 1000; --stz-z-sticky: 1020; --stz-z-fixed: 1030; --stz-z-drawer-backdrop: 1040; --stz-z-drawer: 1045; --stz-z-modal-backdrop: 1050; --stz-z-modal: 1055; --stz-z-popover: 1070; --stz-z-tooltip: 1080; --stz-z-toast: 1090; --stz-z-cursor: 10000; /* layout */ --stz-container-max: 1220px; --stz-content-wide: var(--stz-container-max); --stz-gutter: 15px; --stz-grid-gap: 30px; --stz-bp-sm: 576px; --stz-bp-md: 768px; --stz-bp-lg: 992px; --stz-bp-xl: 1200px; --stz-bp-xxl: 1400px; --stz-bp-marketing-xxl-max: 1600px; --stz-header-h: 95px; --stz-header-h-mobile: 79px; --stz-logo-h: 35px; --stz-shell-sidebar-w: 252px; --stz-shell-sidebar-w-collapsed: 80px; --stz-shell-header-h: 75px; --stz-shell-gutter: 24px; --stz-touch-target: 44px; --stz-touch-target-min: 24px; --stz-control-h-sm: 36px; --stz-control-h-md: 46px; --stz-control-h-lg: 56px; --stz-table-cell-y: 15px; --stz-table-cell-x: 20px; --stz-table-cell-y-dense: 10px; --stz-table-cell-x-dense: 15px; --stz-avatar-sm: 45px; --stz-avatar-md: 65px; --stz-avatar-lg: 70px; --stz-icon-xs: 14px; --stz-icon-sm: 18px; --stz-icon-md: 24px; --stz-icon-lg: 28px; --stz-icon-xl: 34px; --stz-pictogram: 50px; --stz-pictogram-lg: 60px; --stz-orbit-badge: 162px; --stz-slider-nav: 56px; --stz-slider-nav-square: 75px; --stz-video-trigger: 54px; --stz-video-trigger-lg: 85px; --stz-avatar-xs: 32px; --stz-chart-h-spark: 90px; --stz-chart-h-donut: 240px; --stz-chart-h-md: 280px; --stz-chart-h-lg: 320px; --stz-kanban-col-w: 300px; --stz-auth-card-w: 460px; --stz-drawer-w: 420px; /* motif */ --stz-dash-w: 20px; --stz-dash-h: 4px; --stz-dash-gap: 10px; --stz-dash-color: var(--stz-accent-decor); --stz-numeral-stroke: var(--stz-accent-decor); --stz-numeral-stroke-width: 2px; --stz-arc-color: var(--stz-accent-decor); --stz-arc-band: 130px; --stz-arc-band-sm: 80px; --stz-arc-radius: 460px; --stz-rules-color: var(--stz-midnight-a18); --stz-rules-spacing: 381px; --stz-hero-scrim: linear-gradient(306deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 55%); --stz-btn-pad-xl: 24px 46px; --stz-btn-pad-xl-pill: 18px 46px; --stz-btn-pad-lg: 18px 34px; --stz-btn-pad-lg-pill: 14px 36px; --stz-btn-pad-md: 16px 30px; --stz-btn-pad-md-pill: 12px 32px; --stz-btn-pad-sm: 13px 26px; --stz-btn-pad-sm-pill: 10px 26px; --stz-btn-pad-header: 10px 32px; --stz-btn-lift: -2px; --stz-btn-arrow-shift: 12px; --stz-input-pad: 12px 25px; --stz-input-pad-sm: 7px 15px; } :root, [data-theme="dark"] { color-scheme: dark; /* semantic / surface */ --stz-surface-canvas: var(--stz-midnight-950); --stz-surface-panel: var(--stz-midnight-900); --stz-surface-raised: var(--stz-midnight-800); --stz-surface-sunken: var(--stz-midnight-950); --stz-surface-hover: var(--stz-midnight-800); --stz-surface-inverse: var(--stz-white); /* semantic / text */ --stz-text: var(--stz-white); --stz-text-muted: var(--stz-gray-400); --stz-link: var(--stz-text-muted); --stz-link-hover: var(--stz-accent-text); /* semantic / accent */ --stz-accent-text: var(--stz-accent-400); /* semantic / border */ --stz-border-hairline: var(--stz-white-a10); --stz-rule-300: var(--stz-border-hairline); --stz-border-default: var(--stz-white-a30); --stz-border-strong: var(--stz-white-a40); --stz-border-control: var(--stz-border-strong); /* semantic / action */ --stz-action-secondary: var(--stz-white); --stz-action-secondary-hover: var(--stz-gray-200); --stz-on-action-secondary: var(--stz-midnight-950); --stz-action-ghost-border: var(--stz-border-default); --stz-action-ghost-hover: var(--stz-surface-inverse); --stz-on-action-ghost-hover: var(--stz-on-surface-inverse); /* semantic / on */ --stz-on-surface-inverse: var(--stz-midnight-800); --stz-on-surface-inverse-muted: var(--stz-gray-600); /* semantic / focus */ --stz-focus: var(--stz-accent-400); /* semantic / status */ --stz-status-success: var(--stz-green-400); --stz-status-info: var(--stz-azure-400); --stz-status-warning: var(--stz-amber-400); --stz-status-danger: var(--stz-vermilion-400); --stz-status-neutral: var(--stz-text-muted); --stz-status-success-subtle: var(--stz-green-900); --stz-status-info-subtle: var(--stz-azure-900); --stz-status-warning-subtle: var(--stz-amber-900); --stz-status-danger-subtle: var(--stz-vermilion-900); --stz-status-neutral-subtle: var(--stz-midnight-800); --stz-on-status-success: var(--stz-midnight-950); --stz-on-status-info: var(--stz-midnight-950); --stz-on-status-warning: var(--stz-midnight-950); --stz-on-status-danger: var(--stz-midnight-950); /* semantic / chart */ --stz-chart-2: var(--stz-gray-350); --stz-chart-3: var(--stz-gold-400); --stz-chart-4: var(--stz-teal-400); --stz-chart-5: var(--stz-accent-chart-alt-dark); --stz-chart-6: var(--stz-olive-400); --stz-chart-grid: var(--stz-border-hairline); --stz-chart-axis: var(--stz-text-muted); --stz-chart-track: var(--stz-midnight-800); /* semantic / elevation */ --stz-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45); --stz-shadow-feature: 0 24px 60px rgba(0, 0, 0, 0.6); /* channels */ --stz-text-rgb: 255, 255, 255; --stz-text-muted-rgb: 148, 145, 151; --stz-surface-canvas-rgb: 23, 22, 26; --stz-surface-panel-rgb: 28, 28, 31; /* border */ --stz-focus-ring: var(--stz-focus-width) solid var(--stz-focus); } [data-theme="light"] { color-scheme: light; /* semantic / surface */ --stz-surface-canvas: var(--stz-gray-50); --stz-surface-panel: var(--stz-white); --stz-surface-raised: var(--stz-white); --stz-surface-sunken: var(--stz-gray-100); --stz-surface-hover: var(--stz-gray-100); --stz-surface-inverse: var(--stz-midnight-950); /* semantic / text */ --stz-text: var(--stz-midnight-800); --stz-text-muted: var(--stz-gray-600); --stz-link: var(--stz-text-muted); --stz-link-hover: var(--stz-accent-text); /* semantic / accent */ --stz-accent-text: var(--stz-accent-600); /* semantic / border */ --stz-border-hairline: var(--stz-ink-a10); --stz-rule-300: var(--stz-border-hairline); --stz-border-default: var(--stz-ink-a30); --stz-border-strong: var(--stz-gray-450); --stz-border-control: var(--stz-border-strong); /* semantic / action */ --stz-action-secondary: var(--stz-midnight-800); --stz-action-secondary-hover: var(--stz-midnight-700); --stz-on-action-secondary: var(--stz-white); --stz-action-ghost-border: var(--stz-border-default); --stz-action-ghost-hover: var(--stz-surface-inverse); --stz-on-action-ghost-hover: var(--stz-on-surface-inverse); /* semantic / on */ --stz-on-surface-inverse: var(--stz-white); --stz-on-surface-inverse-muted: var(--stz-gray-400); /* semantic / focus */ --stz-focus: var(--stz-accent-600); /* semantic / status */ --stz-status-success: var(--stz-green-700); --stz-status-info: var(--stz-azure-700); --stz-status-warning: var(--stz-amber-700); --stz-status-danger: var(--stz-vermilion-700); --stz-status-neutral: var(--stz-text-muted); --stz-status-success-subtle: var(--stz-green-50); --stz-status-info-subtle: var(--stz-azure-50); --stz-status-warning-subtle: var(--stz-amber-50); --stz-status-danger-subtle: var(--stz-vermilion-50); --stz-status-neutral-subtle: var(--stz-gray-100); --stz-on-status-success: var(--stz-white); --stz-on-status-info: var(--stz-white); --stz-on-status-warning: var(--stz-white); --stz-on-status-danger: var(--stz-white); /* semantic / chart */ --stz-chart-2: var(--stz-gray-500); --stz-chart-3: var(--stz-gold-700); --stz-chart-4: var(--stz-teal-700); --stz-chart-5: var(--stz-accent-chart-alt-light); --stz-chart-6: var(--stz-olive-700); --stz-chart-grid: var(--stz-border-hairline); --stz-chart-axis: var(--stz-text-muted); --stz-chart-track: var(--stz-gray-100); /* semantic / elevation */ --stz-shadow-card: var(--stz-shadow-md); --stz-shadow-feature: var(--stz-shadow-xl); /* channels */ --stz-text-rgb: 43, 43, 47; --stz-text-muted-rgb: 102, 100, 105; --stz-surface-canvas-rgb: 247, 247, 247; --stz-surface-panel-rgb: 255, 255, 255; /* border */ --stz-focus-ring: var(--stz-focus-width) solid var(--stz-focus); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; /* semantic / surface */ --stz-surface-canvas: var(--stz-gray-50); --stz-surface-panel: var(--stz-white); --stz-surface-raised: var(--stz-white); --stz-surface-sunken: var(--stz-gray-100); --stz-surface-hover: var(--stz-gray-100); --stz-surface-inverse: var(--stz-midnight-950); /* semantic / text */ --stz-text: var(--stz-midnight-800); --stz-text-muted: var(--stz-gray-600); --stz-link: var(--stz-text-muted); --stz-link-hover: var(--stz-accent-text); /* semantic / accent */ --stz-accent-text: var(--stz-accent-600); /* semantic / border */ --stz-border-hairline: var(--stz-ink-a10); --stz-rule-300: var(--stz-border-hairline); --stz-border-default: var(--stz-ink-a30); --stz-border-strong: var(--stz-gray-450); --stz-border-control: var(--stz-border-strong); /* semantic / action */ --stz-action-secondary: var(--stz-midnight-800); --stz-action-secondary-hover: var(--stz-midnight-700); --stz-on-action-secondary: var(--stz-white); --stz-action-ghost-border: var(--stz-border-default); --stz-action-ghost-hover: var(--stz-surface-inverse); --stz-on-action-ghost-hover: var(--stz-on-surface-inverse); /* semantic / on */ --stz-on-surface-inverse: var(--stz-white); --stz-on-surface-inverse-muted: var(--stz-gray-400); /* semantic / focus */ --stz-focus: var(--stz-accent-600); /* semantic / status */ --stz-status-success: var(--stz-green-700); --stz-status-info: var(--stz-azure-700); --stz-status-warning: var(--stz-amber-700); --stz-status-danger: var(--stz-vermilion-700); --stz-status-neutral: var(--stz-text-muted); --stz-status-success-subtle: var(--stz-green-50); --stz-status-info-subtle: var(--stz-azure-50); --stz-status-warning-subtle: var(--stz-amber-50); --stz-status-danger-subtle: var(--stz-vermilion-50); --stz-status-neutral-subtle: var(--stz-gray-100); --stz-on-status-success: var(--stz-white); --stz-on-status-info: var(--stz-white); --stz-on-status-warning: var(--stz-white); --stz-on-status-danger: var(--stz-white); /* semantic / chart */ --stz-chart-2: var(--stz-gray-500); --stz-chart-3: var(--stz-gold-700); --stz-chart-4: var(--stz-teal-700); --stz-chart-5: var(--stz-accent-chart-alt-light); --stz-chart-6: var(--stz-olive-700); --stz-chart-grid: var(--stz-border-hairline); --stz-chart-axis: var(--stz-text-muted); --stz-chart-track: var(--stz-gray-100); /* semantic / elevation */ --stz-shadow-card: var(--stz-shadow-md); --stz-shadow-feature: var(--stz-shadow-xl); /* channels */ --stz-text-rgb: 43, 43, 47; --stz-text-muted-rgb: 102, 100, 105; --stz-surface-canvas-rgb: 247, 247, 247; --stz-surface-panel-rgb: 255, 255, 255; /* border */ --stz-focus-ring: var(--stz-focus-width) solid var(--stz-focus); } } [data-accent="ocean"] { --stz-accent-50: var(--stz-ocean-50); --stz-accent-100: var(--stz-ocean-100); --stz-accent-200: var(--stz-ocean-200); --stz-accent-300: var(--stz-ocean-300); --stz-accent-400: var(--stz-ocean-400); --stz-accent-500: var(--stz-ocean-500); --stz-accent-600: var(--stz-ocean-600); --stz-accent-700: var(--stz-ocean-700); --stz-accent-800: var(--stz-ocean-800); --stz-accent-900: var(--stz-ocean-900); --stz-accent-950: var(--stz-ocean-950); --stz-accent-a14: var(--stz-ocean-a14); --stz-accent-a90: var(--stz-ocean-a90); --stz-accent-chart-alt-dark: var(--stz-crimson-400); --stz-accent-chart-alt-light: var(--stz-crimson-600); --stz-accent-600-rgb: 30, 111, 184; } @media (prefers-reduced-motion: reduce) { :root { --stz-duration-fast: 1ms; --stz-duration-quick: 1ms; --stz-duration-toggle: 1ms; --stz-duration-standard: 1ms; --stz-duration-shadow: 1ms; --stz-duration-emphasis: 1ms; --stz-duration-slide: 1ms; --stz-duration-slow: 1ms; --stz-duration-parallax: 1ms; --stz-duration-reveal: 1ms; --stz-duration-reveal-long: 1ms; --stz-stagger-sm: 0ms; --stz-stagger-md: 0ms; --stz-stagger-lg: 0ms; --stz-delay-1: 0ms; --stz-delay-2: 0ms; --stz-delay-3: 0ms; --stz-delay-4: 0ms; } }