/* @vahary/tokens v0.1.0 — GENERATED, do not edit. Source: tokens/*.json */ /* Default status scheme: Vahary violet = healthy. Opt into green with . */ /* Theme: default follows OS; data-v-theme="light|dark" on :root wins either way. */ @font-face{font-family:'Tektur';src:url(fonts/Tektur-Medium-latin.woff2) format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Work Sans';src:url(fonts/WorkSans-Regular-latin.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Work Sans';src:url(fonts/WorkSans-Bold-latin.woff2) format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url(fonts/IBMPlexMono-latin.woff2) format('woff2');font-weight:400;font-display:swap} :root { --v-color-border-focus: #5B21B6; --v-color-border-hairline: #C6CCCE; --v-color-border-strong: #6C747B; --v-color-interactive-accent: #5B21B6; --v-color-interactive-accent-active: #2E1065; --v-color-interactive-accent-hover: #2E1065; --v-color-interactive-accent-subtle: #D8C9F7; --v-color-interactive-accent-text: #5B21B6; --v-color-interactive-disabled: #C6CCCE; --v-color-status-attention: #D97706; --v-color-status-attention-on: #92400E; --v-color-status-attention-subtle: #FEF3C7; --v-color-status-critical: #DC2626; --v-color-status-critical-on: #991B1B; --v-color-status-critical-subtle: #FEE2E2; --v-color-status-fault: #DC2626; --v-color-status-fault-on: #991B1B; --v-color-status-fault-subtle: #FEE2E2; --v-color-status-healthy: #5B21B6; --v-color-status-healthy-on: #2E1065; --v-color-status-healthy-subtle: #D8C9F7; --v-color-status-info: #565D64; --v-color-status-info-on: #475569; --v-color-status-info-subtle: #E5E7EB; --v-color-status-neutral: #565D64; --v-color-status-neutral-on: #475569; --v-color-status-neutral-subtle: #E5E7EB; --v-color-status-offline: #6C747B; --v-color-status-offline-on: #475569; --v-color-status-offline-subtle: #E5E7EB; --v-color-surface-base: #F2F3F1; --v-color-surface-inverse: #181E24; --v-color-surface-overlay: #FFFFFF; --v-color-surface-raised: #FFFFFF; --v-color-surface-sunken: #E9EBE8; --v-color-text-disabled: #6C747B; --v-color-text-inverse: #F2F3F1; --v-color-text-link: #5B21B6; --v-color-text-on-accent: #F2F3F1; --v-color-text-primary: #181E24; --v-color-text-secondary: #565D64; --v-density-row-comfortable: 44px; --v-density-row-compact: 32px; --v-density-row-dense: 24px; --v-font-body: 'Work Sans', system-ui, sans-serif; --v-font-data: 'IBM Plex Mono', ui-monospace, monospace; --v-font-display: 'Tektur', system-ui, sans-serif; --v-leading-normal: 1.45; --v-leading-tight: 1.2; --v-motion-breath-dur: 2600ms; --v-motion-breath-ease: cubic-bezier(.45,0,.55,1); --v-motion-ignite-dur: 450ms; --v-motion-ignite-ease: cubic-bezier(.2,.9,.3,1.4); --v-motion-rise-dur: 360ms; --v-motion-rise-ease: cubic-bezier(.2,.7,.2,1); --v-motion-stagger: 40ms; --v-motion-sweep-dur: 320ms; --v-motion-sweep-ease: cubic-bezier(.4,0,.2,1); --v-motion-touch-dur: 150ms; --v-radius-md: 0.25rem; --v-radius-none: 0; --v-radius-sm: 0.125rem; --v-shadow-none: none; --v-shadow-overlay: 0 8px 24px rgba(18,22,26,0.18); --v-space-0: 0; --v-space-1: 0.25rem; --v-space-12: 3rem; --v-space-16: 4rem; --v-space-2: 0.5rem; --v-space-3: 0.75rem; --v-space-4: 1rem; --v-space-6: 1.5rem; --v-space-8: 2rem; --v-text-2xl: 1.5rem; --v-text-2xs: 0.6875rem; --v-text-3xl: 1.875rem; --v-text-lg: 1rem; --v-text-md: 0.875rem; --v-text-sm: 0.8125rem; --v-text-xl: 1.25rem; --v-text-xs: 0.75rem; --v-weight-bold: 700; --v-weight-regular: 400; } @media (prefers-color-scheme: dark) { :root:not([data-v-theme="light"]) { --v-color-border-focus: #8B5CF6; --v-color-border-hairline: #2A3138; --v-color-interactive-accent: #A78BFA; --v-color-interactive-accent-active: #D8C9F7; --v-color-interactive-accent-hover: #D8C9F7; --v-color-interactive-accent-subtle: #2E1065; --v-color-interactive-accent-text: #A78BFA; --v-color-interactive-disabled: #2A3138; --v-color-status-attention: #F59E0B; --v-color-status-attention-on: #FDE68A; --v-color-status-attention-subtle: #4A2E05; --v-color-status-critical: #F87171; --v-color-status-critical-on: #FECACA; --v-color-status-critical-subtle: #4C1414; --v-color-status-fault: #F87171; --v-color-status-fault-on: #FECACA; --v-color-status-fault-subtle: #4C1414; --v-color-status-healthy: #8B5CF6; --v-color-status-healthy-on: #D8C9F7; --v-color-status-healthy-subtle: #2E1065; --v-color-status-info: #9AA3AB; --v-color-status-info-on: #C6CCCE; --v-color-status-info-subtle: #2A3138; --v-color-status-neutral: #9AA3AB; --v-color-status-neutral-on: #C6CCCE; --v-color-status-neutral-subtle: #2A3138; --v-color-status-offline: #9AA3AB; --v-color-status-offline-on: #C6CCCE; --v-color-status-offline-subtle: #2A3138; --v-color-surface-base: #12161A; --v-color-surface-inverse: #F2F3F1; --v-color-surface-overlay: #1B2026; --v-color-surface-raised: #1B2026; --v-color-surface-sunken: #0D1013; --v-color-text-inverse: #181E24; --v-color-text-link: #A78BFA; --v-color-text-on-accent: #181E24; --v-color-text-primary: #F2F3F1; --v-color-text-secondary: #9AA3AB; } } :root[data-v-theme="dark"] { --v-color-border-focus: #8B5CF6; --v-color-border-hairline: #2A3138; --v-color-interactive-accent: #A78BFA; --v-color-interactive-accent-active: #D8C9F7; --v-color-interactive-accent-hover: #D8C9F7; --v-color-interactive-accent-subtle: #2E1065; --v-color-interactive-accent-text: #A78BFA; --v-color-interactive-disabled: #2A3138; --v-color-status-attention: #F59E0B; --v-color-status-attention-on: #FDE68A; --v-color-status-attention-subtle: #4A2E05; --v-color-status-critical: #F87171; --v-color-status-critical-on: #FECACA; --v-color-status-critical-subtle: #4C1414; --v-color-status-fault: #F87171; --v-color-status-fault-on: #FECACA; --v-color-status-fault-subtle: #4C1414; --v-color-status-healthy: #8B5CF6; --v-color-status-healthy-on: #D8C9F7; --v-color-status-healthy-subtle: #2E1065; --v-color-status-info: #9AA3AB; --v-color-status-info-on: #C6CCCE; --v-color-status-info-subtle: #2A3138; --v-color-status-neutral: #9AA3AB; --v-color-status-neutral-on: #C6CCCE; --v-color-status-neutral-subtle: #2A3138; --v-color-status-offline: #9AA3AB; --v-color-status-offline-on: #C6CCCE; --v-color-status-offline-subtle: #2A3138; --v-color-surface-base: #12161A; --v-color-surface-inverse: #F2F3F1; --v-color-surface-overlay: #1B2026; --v-color-surface-raised: #1B2026; --v-color-surface-sunken: #0D1013; --v-color-text-inverse: #181E24; --v-color-text-link: #A78BFA; --v-color-text-on-accent: #181E24; --v-color-text-primary: #F2F3F1; --v-color-text-secondary: #9AA3AB; } /* --- status variant: classic-green (healthy → green) --- */ :root[data-v-status="classic-green"] { --v-color-status-healthy: #15803D; --v-color-status-healthy-subtle: #DCFCE7; --v-color-status-healthy-on: #166534; } @media (prefers-color-scheme: dark) { :root[data-v-status="classic-green"]:not([data-v-theme="light"]) { --v-color-status-healthy: #4ADE80; --v-color-status-healthy-subtle: #052E16; --v-color-status-healthy-on: #BBF7D0; } } :root[data-v-theme="dark"][data-v-status="classic-green"] { --v-color-status-healthy: #4ADE80; --v-color-status-healthy-subtle: #052E16; --v-color-status-healthy-on: #BBF7D0; } /* --- high-contrast variant (T3.1): AAA-level overrides. Triggers on the explicit data-v-contrast="high" opt-in OR the OS prefers-contrast:more; composes with light/dark. Accent + status hues unchanged. --- */ :root[data-v-contrast="high"] { --v-color-text-primary: #000000; --v-color-text-secondary: #22272C; --v-color-text-muted: #3B434A; --v-color-border-hairline: #5C646B; --v-color-surface-base: #FFFFFF; --v-color-surface-raised: #FFFFFF; } :root[data-v-contrast="high"][data-v-theme="dark"] { --v-color-text-primary: #FFFFFF; --v-color-text-secondary: #EAEDEF; --v-color-text-muted: #C6CCCE; --v-color-border-hairline: #9AA3AB; --v-color-surface-base: #000000; --v-color-surface-raised: #0A0E12; } @media (prefers-color-scheme: dark) { :root[data-v-contrast="high"]:not([data-v-theme="light"]) { --v-color-text-primary: #FFFFFF; --v-color-text-secondary: #EAEDEF; --v-color-text-muted: #C6CCCE; --v-color-border-hairline: #9AA3AB; --v-color-surface-base: #000000; --v-color-surface-raised: #0A0E12; } } @media (prefers-contrast: more) { :root:not([data-v-contrast="normal"]) { --v-color-text-primary: #000000; --v-color-text-secondary: #22272C; --v-color-text-muted: #3B434A; --v-color-border-hairline: #5C646B; --v-color-surface-base: #FFFFFF; --v-color-surface-raised: #FFFFFF; } :root:not([data-v-contrast="normal"])[data-v-theme="dark"] { --v-color-text-primary: #FFFFFF; --v-color-text-secondary: #EAEDEF; --v-color-text-muted: #C6CCCE; --v-color-border-hairline: #9AA3AB; --v-color-surface-base: #000000; --v-color-surface-raised: #0A0E12; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-v-contrast="normal"]):not([data-v-theme="light"]) { --v-color-text-primary: #FFFFFF; --v-color-text-secondary: #EAEDEF; --v-color-text-muted: #C6CCCE; --v-color-border-hairline: #9AA3AB; --v-color-surface-base: #000000; --v-color-surface-raised: #0A0E12; } } @media (prefers-reduced-motion: reduce) { :root { --v-motion-breath-dur: 0ms; --v-motion-ignite-dur: 0ms; --v-motion-rise-dur: 0ms; --v-motion-sweep-dur: 0ms; --v-motion-touch-dur: 0ms; } } /* --- accessibility baseline (T3.2): a zero-specificity keyboard-focus ring so every interactive element has a visible focus indicator unless a product deliberately overrides it. :where() = specificity 0, so any product/component focus style still wins. Uses the brand focus token (theme + HC aware). --- */ :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--v-color-border-focus); outline-offset: 2px; }