:root { /* ==================== TEXT RENDERING ==================== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* ==================== COLORS ==================== */ /* ── Accent family — ONE hue, two grades (VT-4 decision, 2026-06-12; * aligned to the @arnog/colors blue scale, 2026-06-13) ── * primary State grade: selection, focus, active, links, carets, * informational accents. Never a button fill. → blue-500 * secondary Fill grade: filled CTA / default-action buttons ONLY. * Darker than primary so white label text passes 4.5:1. → blue-700 * Light secondary === light primary-hover ON PURPOSE: the fill grade is * the pressed end of the same accent ramp, not a second hue. Fill-grade * hovers DARKEN in both themes (button convention); state-grade hovers * brighten in dark (text/outline convention). Dark mode uses the scale's * dark-shifted variants (toDarkColor). */ --_tycho-color-primary: var(--tycho-color-primary, #0e87ff); --_tycho-color-primary-hover: var(--tycho-color-primary-hover, #026ecf); /* Color used to indicate features available via plan upgrade */ --_tycho-color-upgrade: var(--tycho-color-upgrade, #a31ca1); --_tycho-color-secondary: var(--tycho-color-secondary, #026ecf); --_tycho-color-secondary-hover: var(--tycho-color-secondary-hover, #005aa8); /* Hyperlink / clickable text. Deliberately the darker secondary blue, not primary, so link text clears WCAG AA on light backgrounds: #026ecf on white = 5.08:1 (vs #0e87ff = 3.54:1). Use for text links — never for fills, rings, or icons (those stay color-primary). */ --_tycho-color-link: var(--tycho-color-link, #026ecf); /* ── Background hierarchy (light → dark) ── * bg Page/canvas background * bg-subtle Raised elements: segmented indicator, cards * bg-muted Recessed areas: grooves, placeholder icons, inset tracks * bg-field Editable content wells: text inputs, token fields, math editor * bg-pressable Resting background for buttons, menu triggers, pressable controls * bg-hover Opaque hover for pressable controls * bg-active Opaque pressed/active for pressable controls * bg-selected Selection-highlight background (pairs with text-selected) * bg-warning Warning banner background */ --_tycho-color-bg: var(--tycho-color-bg, #fafaf8); --_tycho-color-bg-subtle: var(--tycho-color-bg-subtle, #f8f8f4); --_tycho-color-bg-muted: var(--tycho-color-bg-muted, #f0f0ee); --_tycho-color-bg-field: var(--tycho-color-bg-field, #fff); /* Sits a hair below the white inset surface so shadow-less pressables (e.g. a menu trigger inside a row) read against it in light mode — the analogue of dark mode's pressable sitting lighter than its surface. Buttons keep their press feedback from the :active shadow removal. */ --_tycho-color-bg-pressable: var(--tycho-color-bg-pressable, #f7f7f7); --_tycho-color-bg-hover: var(--tycho-color-bg-hover, #e8e8e8); --_tycho-color-bg-active: var(--tycho-color-bg-active, #f5f5f5); --_tycho-color-bg-selected: var(--tycho-color-bg-selected, #dceafe); /* Foreground (glyph/text) for selected surfaces, sized to clear WCAG AA on bg-selected. Use this — not color-primary — for blue-on-selection content. */ --_tycho-color-text-selected: var(--tycho-color-text-selected, #0a5cad); --_tycho-color-bg-warning: var(--tycho-color-bg-warning, #fff3e0); --_tycho-color-bg-archive: var(--tycho-color-bg-archive, #f4ecdf); --_tycho-color-bg-trash: var(--tycho-color-bg-trash, #eaf0eb); --_tycho-color-bg-gallery: var(--tycho-color-bg-gallery, #faf6ee); --_tycho-color-template-accent: var(--tycho-color-template-accent, #6b4d8a); /* ── Surface & hover overlay ── * surface Elevated panels: sidebars, headers, card chrome * hover Semi-transparent overlay for hover on any surface * (container tint, header icons, title hover). * Use bg-hover/bg-active instead for opaque button states. */ --_tycho-color-surface: var(--tycho-color-surface, #f8f8f8); --_tycho-color-hover: var(--tycho-color-hover, rgba(0,0,0,0.06)); /* Text colors */ --_tycho-color-text: var(--tycho-color-text, #333); --_tycho-color-text-muted: var(--tycho-color-text-muted, #666); --_tycho-color-text-subtle: var(--tycho-color-text-subtle, #888); --_tycho-color-text-disabled: var(--tycho-color-text-disabled, #999); --_tycho-color-text-inverse: var(--tycho-color-text-inverse, #fff); /* Border colors */ --_tycho-color-border: var(--tycho-color-border, #e0e0e0); --_tycho-color-border-muted: var(--tycho-color-border-muted, #e5e5e5); --_tycho-color-border-subtle: var(--tycho-color-border-subtle, #ddd); --_tycho-color-border-strong: var(--tycho-color-border-strong, #ccc); --_tycho-color-border-field: var(--tycho-color-border-field, #e0e0e0); --_tycho-color-border-warning: var(--tycho-color-border-warning, #ffb74d); /* Special colors */ /* Caret = blue-600 @ 80% (OKLCH so the hue stays on-scale). */ --_tycho-color-caret: var(--tycho-color-caret, oklch(60.6% 0.193 254.5 / 0.8)); --_tycho-color-favorite: var(--tycho-color-favorite, #f9a825); /* Icon colors */ --_tycho-color-icon: var(--tycho-color-icon, #666); --_tycho-color-icon-muted: var(--tycho-color-icon-muted, #999); --_tycho-color-icon-subtle: var(--tycho-color-icon-subtle, #888); /* Stroke width for line (Lucide-style) icons. Applied with vector-effect: non-scaling-stroke, so this is the on-screen px weight regardless of the icon's rendered size — keep icons ≥ ~16px so a 2px stroke stays proportionate to the glyph. */ --_tycho-icon-stroke-width: var(--tycho-icon-stroke-width, 2px); /* Highlight background */ --_tycho-color-highlight-bg: var(--tycho-color-highlight-bg, color-mix(in srgb, #facc15 30%, transparent)); /* Badge colors */ --_tycho-color-badge-bg: var(--tycho-color-badge-bg, #f5f5f5); --_tycho-color-badge-text: var(--tycho-color-badge-text, #666); --_tycho-color-badge-primary-bg: var(--tycho-color-badge-primary-bg, #e8f4fd); --_tycho-color-badge-primary-text: var(--tycho-color-badge-primary-text, #026ecf); /* Tag colors */ --_tycho-tag-bg: var(--tycho-tag-bg, #e8eef6); --_tycho-tag-text: var(--tycho-tag-text, #005aa8); --_tycho-tag-radius: var(--tycho-tag-radius, 6px); --_tycho-tag-remove-hover: var(--tycho-tag-remove-hover, #c0392b); /* ── Semantic tone colors ── * Each tone has three variants: * base Text, icons, borders on neutral backgrounds * subtle Tinted background * intense Text/icons on a subtle background */ --_tycho-color-error: var(--tycho-color-error, #ea1106); --_tycho-color-error-subtle: var(--tycho-color-error-subtle, #ffe5e0); --_tycho-color-error-intense: var(--tycho-color-error-intense, #c90a0f); --_tycho-color-danger: var(--tycho-color-danger, var(--_tycho-color-error)); --_tycho-color-danger-subtle: var(--tycho-color-danger-subtle, var(--_tycho-color-error-subtle)); --_tycho-color-danger-intense: var(--tycho-color-danger-intense, var(--_tycho-color-error-intense)); --_tycho-color-warning: var(--tycho-color-warning, #f59e0b); --_tycho-color-warning-subtle: var(--tycho-color-warning-subtle, #ffeac6); --_tycho-color-warning-intense: var(--tycho-color-warning-intense, #7c5800); --_tycho-color-success: var(--tycho-color-success, #00a320); --_tycho-color-success-subtle: var(--tycho-color-success-subtle, #e5f4e5); --_tycho-color-success-intense: var(--tycho-color-success-intense, #007f17); --_tycho-color-info: var(--tycho-color-info, #0094a6); --_tycho-color-info-subtle: var(--tycho-color-info-subtle, #cffcfb); --_tycho-color-info-intense: var(--tycho-color-info-intense, #006c7a); /* Backdrop color for dialogs */ --_tycho-color-backdrop: var(--tycho-color-backdrop, rgba(0, 0, 0, 0.4)); /* Tooltip (inverted scheme for contrast) */ --_tycho-color-tooltip-bg: var(--tycho-color-tooltip-bg, #1e1e1e); --_tycho-color-tooltip-text: var(--tycho-color-tooltip-text, #f0f0f0); /* ==================== TYPOGRAPHY ==================== */ /* Font families - these are set programmatically via math, not intended for direct CSS override. Use math.typography to change fonts. */ --_tycho-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --_tycho-font-mono: 'IBM Plex Mono', 'Source Code Pro', Consolas, 'Roboto Mono', Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace; --_tycho-font-math: NewComputerModernMath, math; /* Font sizes (7 steps) */ --_tycho-font-size-xs: var(--tycho-font-size-xs, 12px); --_tycho-font-size-sm: var(--tycho-font-size-sm, 14px); --_tycho-font-size-base: var(--tycho-font-size-base, 16px); --_tycho-font-size-lg: var(--tycho-font-size-lg, 18px); --_tycho-font-size-xl: var(--tycho-font-size-xl, 20px); --_tycho-font-size-2xl: var(--tycho-font-size-2xl, 24px); --_tycho-font-size-3xl: var(--tycho-font-size-3xl, 32px); /* Font weights */ --_tycho-font-weight-normal: var(--tycho-font-weight-normal, 400); --_tycho-font-weight-medium: var(--tycho-font-weight-medium, 500); --_tycho-font-weight-semibold: var(--tycho-font-weight-semibold, 600); /* ==================== SPACING (7 steps) ==================== */ --_tycho-space-1: var(--tycho-space-1, 2px); --_tycho-space-2: var(--tycho-space-2, 4px); --_tycho-space-4: var(--tycho-space-4, 8px); --_tycho-space-6: var(--tycho-space-6, 12px); --_tycho-space-8: var(--tycho-space-8, 16px); --_tycho-space-10: var(--tycho-space-10, 20px); --_tycho-space-12: var(--tycho-space-12, 24px); /* ==================== BORDER RADIUS (6 steps) ==================== */ --_tycho-radius-sm: var(--tycho-radius-sm, 4px); --_tycho-radius-md: var(--tycho-radius-md, 8px); --_tycho-radius-lg: var(--tycho-radius-lg, 12px); --_tycho-radius-xl: var(--tycho-radius-xl, 16px); --_tycho-radius-2xl: var(--tycho-radius-2xl, 24px); --_tycho-radius-pill: var(--tycho-radius-pill, 100px); /* ==================== SHADOWS (layered for smooth appearance) ==================== */ --_tycho-shadow-sm: var(--tycho-shadow-sm, 0 0 1px rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 0, 0, 0.06) ); --_tycho-shadow-md: var(--tycho-shadow-md, 0 0 1px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.06), 0 0 8px rgba(0, 0, 0, 0.06) ); --_tycho-shadow-lg: var(--tycho-shadow-lg, 0 0 2px rgba(0, 0, 0, 0.05), 0 0 4px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 0, 0, 0.05), 0 0 32px rgba(0, 0, 0, 0.05) ); --_tycho-shadow-xl: var(--tycho-shadow-xl, 0 0 2px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.04), 0 0 8px rgba(0, 0, 0, 0.04), 0 0 16px rgba(0, 0, 0, 0.04), 0 0 32px rgba(0, 0, 0, 0.04), 0 0 64px rgba(0, 0, 0, 0.04) ); /* ==================== Z-INDEX ==================== */ --_tycho-z-dropdown: var(--tycho-z-dropdown, 100); --_tycho-z-popover: var(--tycho-z-popover, 1000); --_tycho-z-overlay: var(--tycho-z-overlay, 10000); --_tycho-z-toast: var(--tycho-z-toast, 10010); --_tycho-z-tooltip: var(--tycho-z-tooltip, 10020); /* ==================== TRANSITIONS ==================== */ --_tycho-transition-fast: var(--tycho-transition-fast, 0.15s ease-out); --_tycho-transition-normal: var(--tycho-transition-normal, 0.25s ease-out); /* ==================== ELEVATION SHADOWS ==================== */ /* ── Physical depth system ── * Raised elements (thumbs, button groups): inset highlight + drop shadow. * elevation-1 Resting buttons (stepper button group) * elevation-2 Resting thumbs (toggle, slider) * elevation-3 Active/pressed thumbs * In dark mode, inset highlights are removed; only drop shadows remain. */ --_tycho-shadow-elevation-1: var(--tycho-shadow-elevation-1, inset 0 1px 0 rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.19), 0 2px 4px rgba(0,0,0,0.08) ); --_tycho-shadow-elevation-2: var(--tycho-shadow-elevation-2, inset 0 1px 2px rgba(255,255,255,0.31), 0 2px 4px rgba(0,0,0,0.19), 0 4px 8px rgba(0,0,0,0.08) ); --_tycho-shadow-elevation-3: var(--tycho-shadow-elevation-3, inset 0 1px 2px rgba(255,255,255,0.44), 0 4px 6px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.08) ); /* ── Carved groove shadows ── * Inset shadows for recessed track/groove backgrounds. * track-carved Standard groove (toggle track, segmented control) * track-carved-sm Thin groove (slider track bar, 4px height) */ --_tycho-shadow-track-carved: var(--tycho-shadow-track-carved, inset 0 2px 4px rgba(0,0,0,0.10), inset 0 1px 2px rgba(0,0,0,0.10) ); --_tycho-shadow-track-carved-sm: var(--tycho-shadow-track-carved-sm, inset 0 1px 2px rgba(0,0,0,0.10), inset 0 0.5px 1px rgba(0,0,0,0.10) ); /* ==================== OPACITY ==================== */ --_tycho-opacity-disabled: var(--tycho-opacity-disabled, 0.35); /* ==================== GLASS SURFACES ==================== * Visual-treatment tiers (approved values: roadmap/VISUAL_TREATMENT.md * § Progress). Components consume these via glassSurfaceStyles() / * glassRimRule() in tokens/glass.ts rather than re-deriving recipes. * * glass-bg Tier 1 "Floating glass": compact chrome over content * glass-bg-strong Tier 2 "Panel glass": persistent panels, stronger tint * glass-tint color-mix percentage for tone-tinted glass (banners) * glass-rim Directional 1px rim ring gradient (lit top-left edge, * darkened bottom-right edge), masked on a ::before * glass-highlight Inner 1px bevel (lit + shaded inset shadows) * glass-shadow Ambient drop-shadow stack for elevated surfaces */ --_tycho-glass-bg: ${glassBg("light", GLASS.floatingAlpha)}; --_tycho-glass-bg-strong: ${glassBg("light", GLASS.panelAlpha)}; --_tycho-glass-tint: ${GLASS.floatingAlpha}; --_tycho-glass-blur: ${GLASS.blur}; --_tycho-glass-saturation: ${GLASS.saturation}; /* Complete backdrop-filter value. Accessibility modes set this to "none" — unlike blur(0px), that removes the backdrop root and its compositing cost entirely. */ --_tycho-glass-backdrop: blur(var(--_tycho-glass-blur)) saturate(var(--_tycho-glass-saturation)); --_tycho-glass-rim: ${glassRim("var(--_tycho-light-angle)", "light")}; --_tycho-glass-highlight: ${GLASS.bevelLight}; --_tycho-glass-shadow: ${GLASS.shadowLight}; /* Opaque inset groups nested inside glass panels */ --_tycho-surface-inset-bg: #ffffff; --_tycho-surface-inset-border: rgb(0 0 0 / 0.08); /* Fixed screen-space light source (from the top, slight left bias). * x/y are the normalized light direction; angle is the matching CSS * gradient angle. Components must consume these, never hard-code a * light direction. */ --_tycho-light-x: -0.17; --_tycho-light-y: -0.98; --_tycho-light-angle: ${GLASS.lightAngle}; /* ==================== INTERACTION SCALE ==================== */ --_tycho-scale-pressed: var(--tycho-scale-pressed, 0.95); --_tycho-scale-lifted: var(--tycho-scale-lifted, 1.25); --_tycho-scale-grabbed: var(--tycho-scale-grabbed, 1.02); --_tycho-scale-hover: var(--tycho-scale-hover, 1.08); /* ==================== EASING CURVES ==================== */ --_tycho-easing-standard: var(--tycho-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)); --_tycho-easing-spring: var(--tycho-easing-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)); /* ==================== FOCUS RING ==================== */ --_tycho-focus-ring-inner-width: var(--tycho-focus-ring-inner-width, 2px); --_tycho-focus-ring-outer-width: var(--tycho-focus-ring-outer-width, 3px); /* ==================== FOCUS & SELECTION RINGS ==================== */ --_tycho-color-focus-ring-inner: var(--tycho-color-focus-ring-inner, #fff); --_tycho-color-selected-ring-inner: var(--tycho-color-selected-ring-inner, #fff); /* ==================== COMPONENT-SPECIFIC ==================== */ /* Symbol picker */ --_tycho-picker-width: var(--tycho-picker-width, 300px); --_tycho-picker-height: var(--tycho-picker-height, 420px); --_tycho-cell-size: var(--tycho-cell-size, 44px); /* Keyboard layout picker */ --_tycho-dialog-max-width: var(--tycho-dialog-max-width, 456px); /* ==================== HUD-SPECIFIC (always dark) ==================== */ --_tycho-hud-bg: var(--tycho-hud-bg, rgba(30, 30, 30, 0.75)); --_tycho-hud-text: var(--tycho-hud-text, #fff); --_tycho-hud-text-muted: var(--tycho-hud-text-muted, rgba(255, 255, 255, 0.7)); --_tycho-hud-text-subtle: var(--tycho-hud-text-subtle, rgba(255, 255, 255, 0.6)); --_tycho-hud-text-disabled: var(--tycho-hud-text-disabled, rgba(255, 255, 255, 0.5)); --_tycho-hud-border: var(--tycho-hud-border, rgba(255, 255, 255, 0.1)); --_tycho-hud-entry-bg: var(--tycho-hud-entry-bg, rgba(255, 255, 255, 0.08)); --_tycho-hud-entry-bg-muted: var(--tycho-hud-entry-bg-muted, rgba(255, 255, 255, 0.06)); --_tycho-hud-key-text: var(--tycho-hud-key-text, rgba(255, 255, 255, 0.8)); --_tycho-hud-shadow: var(--tycho-hud-shadow, 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1) ); } /* ==================== DARK MODE ==================== */ @media (prefers-color-scheme: dark) { :root { --_tycho-color-upgrade: var(--tycho-color-upgrade, #e011dd); /* Background colors */ --_tycho-color-bg: var(--tycho-color-bg, #2d2d2d); --_tycho-color-bg-subtle: var(--tycho-color-bg-subtle, #424242); --_tycho-color-bg-muted: var(--tycho-color-bg-muted, #1a1a1a); --_tycho-color-bg-field: var(--tycho-color-bg-field, #252525); --_tycho-color-bg-pressable: var(--tycho-color-bg-pressable, #383838); --_tycho-color-bg-hover: var(--tycho-color-bg-hover, #333); --_tycho-color-bg-active: var(--tycho-color-bg-active, #222); --_tycho-color-bg-selected: var(--tycho-color-bg-selected, #004a89); --_tycho-color-text-selected: var(--tycho-color-text-selected, #9ecbff); --_tycho-color-bg-warning: var(--tycho-color-bg-warning, #4a3520); --_tycho-color-bg-archive: var(--tycho-color-bg-archive, #2a241c); --_tycho-color-bg-trash: var(--tycho-color-bg-trash, #1f2823); --_tycho-color-bg-gallery: var(--tycho-color-bg-gallery, #252025); --_tycho-color-template-accent: var(--tycho-color-template-accent, #b39bd9); /* Text colors */ --_tycho-color-text: var(--tycho-color-text, #e0e0e0); --_tycho-color-text-muted: var(--tycho-color-text-muted, #aaa); --_tycho-color-text-subtle: var(--tycho-color-text-subtle, #888); --_tycho-color-text-disabled: var(--tycho-color-text-disabled, #999); /* Border colors */ --_tycho-color-border: var(--tycho-color-border, #444); --_tycho-color-border-muted: var(--tycho-color-border-muted, #444); --_tycho-color-border-subtle: var(--tycho-color-border-subtle, #3a3a3a); --_tycho-color-border-strong: var(--tycho-color-border-strong, #555); --_tycho-color-border-field: var(--tycho-color-border-field, #444); --_tycho-color-border-warning: var(--tycho-color-border-warning, #b8860b); /* Icon colors */ --_tycho-color-icon: var(--tycho-color-icon, #aaa); --_tycho-color-icon-muted: var(--tycho-color-icon-muted, #888); --_tycho-color-icon-subtle: var(--tycho-color-icon-subtle, #777); /* Surface & hover */ --_tycho-color-surface: var(--tycho-color-surface, #3a3a3a); --_tycho-color-hover: var(--tycho-color-hover, rgba(255,255,255,0.08)); /* Primary accent adjustments — scale dark-shifted blue variants. primary brightens to blue-300 on hover (state-grade convention). */ --_tycho-color-primary: var(--tycho-color-primary, #3591ff); --_tycho-color-primary-hover: var(--tycho-color-primary-hover, #6db5ff); --_tycho-color-secondary: var(--tycho-color-secondary, #1676da); /* Link text lightens on dark surfaces (not the darker secondary) to keep AA across the dark background range; ~4.7:1+ on #2d2d2d–#424242. */ --_tycho-color-link: var(--tycho-color-link, #6db5ff); --_tycho-color-secondary-hover: var(--tycho-color-secondary-hover, #1062b2); /* Highlight background */ --_tycho-color-highlight-bg: var(--tycho-color-highlight-bg, color-mix(in srgb, #facc15 20%, transparent)); /* Badge colors */ --_tycho-color-badge-bg: var(--tycho-color-badge-bg, #333); --_tycho-color-badge-text: var(--tycho-color-badge-text, #aaa); --_tycho-color-badge-primary-bg: var(--tycho-color-badge-primary-bg, #1e3a5f); --_tycho-color-badge-primary-text: var(--tycho-color-badge-primary-text, #6db5ff); /* Tag colors */ --_tycho-tag-bg: var(--tycho-tag-bg, #1e3a5f); --_tycho-tag-text: var(--tycho-tag-text, #6db5ff); --_tycho-tag-remove-hover: var(--tycho-tag-remove-hover, #e57373); /* Backdrop */ --_tycho-color-backdrop: var(--tycho-color-backdrop, rgba(0, 0, 0, 0.6)); /* Semantic tone colors */ --_tycho-color-error: var(--tycho-color-error, #f52312); --_tycho-color-error-subtle: var(--tycho-color-error-subtle, rgba(245, 35, 18, 0.12)); --_tycho-color-error-intense: var(--tycho-color-error-intense, #d41d17); --_tycho-color-warning: var(--tycho-color-warning, #ffda40); --_tycho-color-warning-subtle: var(--tycho-color-warning-subtle, rgba(255, 218, 64, 0.12)); --_tycho-color-warning-intense: var(--tycho-color-warning-intense, #fcc018); --_tycho-color-success: var(--tycho-color-success, #10ac2c); --_tycho-color-success-subtle: var(--tycho-color-success-subtle, rgba(16, 172, 44, 0.12)); --_tycho-color-success-intense: var(--tycho-color-success-intense, #0d8822); --_tycho-color-info: var(--tycho-color-info, #139db0); --_tycho-color-info-subtle: var(--tycho-color-info-subtle, rgba(19, 157, 176, 0.12)); --_tycho-color-info-intense: var(--tycho-color-info-intense, #0e7483); /* Tooltip (inverted in dark mode) */ --_tycho-color-tooltip-bg: var(--tycho-color-tooltip-bg, #e8e8e8); --_tycho-color-tooltip-text: var(--tycho-color-tooltip-text, #1e1e1e); /* Focus & selection rings */ --_tycho-color-focus-ring-inner: var(--tycho-color-focus-ring-inner, #444); --_tycho-color-selected-ring-inner: var(--tycho-color-selected-ring-inner, #444); /* Shadows (darker for dark mode, layered for smooth appearance) */ --_tycho-shadow-sm: var(--tycho-shadow-sm, 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12) ); --_tycho-shadow-lg: var(--tycho-shadow-lg, 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1) ); --_tycho-shadow-xl: var(--tycho-shadow-xl, 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.08), 0 32px 64px rgba(0, 0, 0, 0.08) ); /* Elevation: faint inset highlight in dark mode, heavier drop shadows */ --_tycho-shadow-elevation-1: var(--tycho-shadow-elevation-1, inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(0, 0, 0, 0.24) ); --_tycho-shadow-elevation-2: var(--tycho-shadow-elevation-2, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.40) ); --_tycho-shadow-elevation-3: var(--tycho-shadow-elevation-3, inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.48) ); /* Glass surfaces (dark) */ --_tycho-glass-bg: ${glassBg("dark", GLASS.floatingAlpha)}; --_tycho-glass-bg-strong: ${glassBg("dark", GLASS.panelAlpha)}; --_tycho-glass-rim: ${glassRim("var(--_tycho-light-angle)", "dark")}; --_tycho-glass-highlight: ${GLASS.bevelDark}; --_tycho-glass-shadow: ${GLASS.shadowDark}; --_tycho-surface-inset-bg: #232427; --_tycho-surface-inset-border: rgb(255 255 255 / 0.07); } } /* Programmatic dark mode via data attribute */ html[data-color-scheme="dark"] { /* Background colors */ --_tycho-color-bg: var(--tycho-color-bg, #2d2d2d); --_tycho-color-bg-subtle: var(--tycho-color-bg-subtle, #424242); --_tycho-color-bg-muted: var(--tycho-color-bg-muted, #1a1a1a); --_tycho-color-bg-field: var(--tycho-color-bg-field, #252525); --_tycho-color-bg-pressable: var(--tycho-color-bg-pressable, #383838); --_tycho-color-bg-hover: var(--tycho-color-bg-hover, #333); --_tycho-color-bg-active: var(--tycho-color-bg-active, #222); --_tycho-color-bg-selected: var(--tycho-color-bg-selected, #004a89); --_tycho-color-text-selected: var(--tycho-color-text-selected, #9ecbff); --_tycho-color-bg-warning: var(--tycho-color-bg-warning, #4a3520); --_tycho-color-bg-archive: var(--tycho-color-bg-archive, #2a241c); --_tycho-color-bg-trash: var(--tycho-color-bg-trash, #1f2823); --_tycho-color-bg-gallery: var(--tycho-color-bg-gallery, #252025); --_tycho-color-template-accent: var(--tycho-color-template-accent, #b39bd9); /* Text colors */ --_tycho-color-text: var(--tycho-color-text, #e0e0e0); --_tycho-color-text-muted: var(--tycho-color-text-muted, #aaa); --_tycho-color-text-subtle: var(--tycho-color-text-subtle, #888); --_tycho-color-text-disabled: var(--tycho-color-text-disabled, #999); /* Border colors */ --_tycho-color-border: var(--tycho-color-border, #444); --_tycho-color-border-muted: var(--tycho-color-border-muted, #444); --_tycho-color-border-subtle: var(--tycho-color-border-subtle, #3a3a3a); --_tycho-color-border-strong: var(--tycho-color-border-strong, #555); --_tycho-color-border-field: var(--tycho-color-border-field, #444); --_tycho-color-border-warning: var(--tycho-color-border-warning, #b8860b); /* Icon colors */ --_tycho-color-icon: var(--tycho-color-icon, #aaa); --_tycho-color-icon-muted: var(--tycho-color-icon-muted, #888); --_tycho-color-icon-subtle: var(--tycho-color-icon-subtle, #777); /* Surface & hover */ --_tycho-color-surface: var(--tycho-color-surface, #3a3a3a); --_tycho-color-hover: var(--tycho-color-hover, rgba(255,255,255,0.08)); /* Primary accent adjustments — scale dark-shifted blue variants. primary brightens to blue-300 on hover (state-grade convention). */ --_tycho-color-primary: var(--tycho-color-primary, #3591ff); --_tycho-color-primary-hover: var(--tycho-color-primary-hover, #6db5ff); --_tycho-color-secondary: var(--tycho-color-secondary, #1676da); --_tycho-color-secondary-hover: var(--tycho-color-secondary-hover, #1062b2); --_tycho-color-link: var(--tycho-color-link, #6db5ff); /* Highlight background */ --_tycho-color-highlight-bg: var(--tycho-color-highlight-bg, color-mix(in srgb, #facc15 20%, transparent)); /* Badge colors */ --_tycho-color-badge-bg: var(--tycho-color-badge-bg, #333); --_tycho-color-badge-text: var(--tycho-color-badge-text, #aaa); --_tycho-color-badge-primary-bg: var(--tycho-color-badge-primary-bg, #1e3a5f); --_tycho-color-badge-primary-text: var(--tycho-color-badge-primary-text, #6db5ff); /* Tag colors */ --_tycho-tag-bg: var(--tycho-tag-bg, #1e3a5f); --_tycho-tag-text: var(--tycho-tag-text, #6db5ff); --_tycho-tag-remove-hover: var(--tycho-tag-remove-hover, #e57373); /* Backdrop */ --_tycho-color-backdrop: var(--tycho-color-backdrop, rgba(0, 0, 0, 0.6)); /* Semantic tone colors */ --_tycho-color-error: var(--tycho-color-error, #f52312); --_tycho-color-error-subtle: var(--tycho-color-error-subtle, rgba(245, 35, 18, 0.12)); --_tycho-color-error-intense: var(--tycho-color-error-intense, #d41d17); --_tycho-color-warning: var(--tycho-color-warning, #ffda40); --_tycho-color-warning-subtle: var(--tycho-color-warning-subtle, rgba(255, 218, 64, 0.12)); --_tycho-color-warning-intense: var(--tycho-color-warning-intense, #fcc018); --_tycho-color-success: var(--tycho-color-success, #10ac2c); --_tycho-color-success-subtle: var(--tycho-color-success-subtle, rgba(16, 172, 44, 0.12)); --_tycho-color-success-intense: var(--tycho-color-success-intense, #0d8822); --_tycho-color-info: var(--tycho-color-info, #139db0); --_tycho-color-info-subtle: var(--tycho-color-info-subtle, rgba(19, 157, 176, 0.12)); --_tycho-color-info-intense: var(--tycho-color-info-intense, #0e7483); /* Tooltip (inverted in dark mode) */ --_tycho-color-tooltip-bg: var(--tycho-color-tooltip-bg, #e8e8e8); --_tycho-color-tooltip-text: var(--tycho-color-tooltip-text, #1e1e1e); /* Focus & selection rings */ --_tycho-color-focus-ring-inner: var(--tycho-color-focus-ring-inner, #444); --_tycho-color-selected-ring-inner: var(--tycho-color-selected-ring-inner, #444); /* Shadows */ --_tycho-shadow-sm: var(--tycho-shadow-sm, 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12) ); --_tycho-shadow-lg: var(--tycho-shadow-lg, 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1) ); --_tycho-shadow-xl: var(--tycho-shadow-xl, 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.08), 0 32px 64px rgba(0, 0, 0, 0.08) ); /* Elevation: faint inset highlight in dark mode, heavier drop shadows */ --_tycho-shadow-elevation-1: var(--tycho-shadow-elevation-1, inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(0, 0, 0, 0.24) ); --_tycho-shadow-elevation-2: var(--tycho-shadow-elevation-2, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.40) ); --_tycho-shadow-elevation-3: var(--tycho-shadow-elevation-3, inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.48) ); /* Glass surfaces (dark) */ --_tycho-glass-bg: ${glassBg("dark", GLASS.floatingAlpha)}; --_tycho-glass-bg-strong: ${glassBg("dark", GLASS.panelAlpha)}; --_tycho-glass-rim: ${glassRim("var(--_tycho-light-angle)", "dark")}; --_tycho-glass-highlight: ${GLASS.bevelDark}; --_tycho-glass-shadow: ${GLASS.shadowDark}; --_tycho-surface-inset-bg: #232427; --_tycho-surface-inset-border: rgb(255 255 255 / 0.07); } /* ==================== NO-BLUR FALLBACK ==================== * When backdrop-filter is unavailable, glass surfaces fall back to * near-opaque tints so legibility and boundaries survive (visual parity * not required). Placed after the theme blocks (so it beats them on * source order) but BEFORE the high-contrast blocks (which mandate fully * opaque surfaces and must keep the last word). */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :root { --_tycho-glass-bg: ${glassBg("light", "92%")}; --_tycho-glass-bg-strong: ${glassBg("light", "96%")}; --_tycho-glass-tint: 92%; } @media (prefers-color-scheme: dark) { :root { --_tycho-glass-bg: ${glassBg("dark", "92%")}; --_tycho-glass-bg-strong: ${glassBg("dark", "96%")}; } } html[data-color-scheme="dark"] { --_tycho-glass-bg: ${glassBg("dark", "92%")}; --_tycho-glass-bg-strong: ${glassBg("dark", "96%")}; } } /* ==================== REDUCED TRANSPARENCY ==================== * OS-level "Reduce Transparency": glass goes fully opaque and the * backdrop root is removed. Rims and shadows are kept (transparency, not * contrast, is what the user opted out of). High contrast below also * implies this and additionally hardens boundaries. */ @media (prefers-reduced-transparency: reduce) { :root { --_tycho-glass-bg: var(--_tycho-color-surface); --_tycho-glass-bg-strong: var(--_tycho-color-surface); --_tycho-glass-tint: 100%; --_tycho-glass-backdrop: none; } } /* ==================== HIGH CONTRAST ==================== */ /* Programmatic high contrast via class set by updateAccessibilityClasses() */ .tycho-high-contrast { /* Text & icons */ --_tycho-color-text: #000; --_tycho-color-text-muted: #333; --_tycho-color-text-subtle: #555; --_tycho-color-text-disabled: #666; --_tycho-color-icon: #333; --_tycho-color-icon-muted: #555; --_tycho-color-icon-subtle: #555; /* Borders — darker color */ --_tycho-color-border: #888; --_tycho-color-border-muted: #999; --_tycho-color-border-subtle: #999; --_tycho-color-border-strong: #666; --_tycho-color-border-field: #888; /* Focus rings — bolder */ --_tycho-focus-ring-inner-width: 3px; --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — darker for contrast on white (state + fill grades) */ --_tycho-color-primary: #1565c0; --_tycho-color-primary-hover: #0d47a1; --_tycho-color-secondary: #1565c0; --_tycho-color-secondary-hover: #0d47a1; /* Backgrounds — wider spread for distinct levels */ --_tycho-color-bg: #fff; --_tycho-color-bg-subtle: #f0f0f0; --_tycho-color-bg-muted: #ddd; --_tycho-color-bg-field: #fff; --_tycho-color-bg-hover: #e0e0e0; --_tycho-color-bg-active: #ccc; --_tycho-color-hover: rgba(0,0,0,0.12); /* Shadows → solid rings */ --_tycho-shadow-sm: none; --_tycho-shadow-md: none; --_tycho-shadow-lg: none; --_tycho-shadow-xl: none; --_tycho-shadow-elevation-1: 0 0 0 1px #888; --_tycho-shadow-elevation-2: 0 0 0 1px #888; --_tycho-shadow-elevation-3: 0 0 0 2px #888; --_tycho-shadow-track-carved: inset 0 0 0 1px #888; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #888; /* Glass surfaces → opaque with solid rings (high contrast implies reduced transparency) */ --_tycho-glass-bg: var(--_tycho-color-surface); --_tycho-glass-bg-strong: var(--_tycho-color-surface); --_tycho-glass-tint: 100%; --_tycho-glass-backdrop: none; --_tycho-glass-rim: none; --_tycho-glass-highlight: 0 0 0 1px #888; --_tycho-glass-shadow: 0 0 rgb(0 0 0 / 0); /* Disabled opacity */ --_tycho-opacity-disabled: 0.6; } /* High contrast + dark mode (programmatic) */ .tycho-high-contrast[data-color-scheme="dark"] { /* Text & icons */ --_tycho-color-text: #fff; --_tycho-color-text-muted: #ddd; --_tycho-color-text-subtle: #bbb; --_tycho-color-text-disabled: #999; --_tycho-color-icon: #ddd; --_tycho-color-icon-muted: #bbb; --_tycho-color-icon-subtle: #bbb; /* Borders */ --_tycho-color-border: #999; --_tycho-color-border-muted: #888; --_tycho-color-border-subtle: #777; --_tycho-color-border-strong: #aaa; --_tycho-color-border-field: #999; /* Focus rings */ --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — bright fills + black label text (HC-dark convention; fills pair with text-inverse, flipped to #000 below) */ --_tycho-color-primary: #82b1ff; --_tycho-color-primary-hover: #a8c7ff; --_tycho-color-secondary: #82b1ff; --_tycho-color-secondary-hover: #a8c7ff; --_tycho-color-text-inverse: #000; /* Backgrounds — wider spread */ --_tycho-color-bg: #1a1a1a; --_tycho-color-bg-subtle: #333; --_tycho-color-bg-muted: #111; --_tycho-color-bg-field: #111; --_tycho-color-bg-hover: #555; --_tycho-color-bg-active: #666; --_tycho-color-hover: rgba(255,255,255,0.16); /* Shadows → solid rings (lighter for dark bg) */ --_tycho-shadow-elevation-1: 0 0 0 1px #999; --_tycho-shadow-elevation-2: 0 0 0 1px #999; --_tycho-shadow-elevation-3: 0 0 0 2px #999; --_tycho-shadow-track-carved: inset 0 0 0 1px #999; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #999; /* Glass ring (lighter for dark bg) */ --_tycho-glass-highlight: 0 0 0 1px #999; } /* High contrast + dark mode (media query) */ @media (prefers-color-scheme: dark) { .tycho-high-contrast { --_tycho-color-text: #fff; --_tycho-color-text-muted: #ddd; --_tycho-color-text-subtle: #bbb; --_tycho-color-text-disabled: #999; --_tycho-color-icon: #ddd; --_tycho-color-icon-muted: #bbb; --_tycho-color-icon-subtle: #bbb; --_tycho-color-border: #999; --_tycho-color-border-muted: #888; --_tycho-color-border-subtle: #777; --_tycho-color-border-strong: #aaa; --_tycho-color-border-field: #999; --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — bright fills + black label text (HC-dark convention; fills pair with text-inverse, flipped to #000 below) */ --_tycho-color-primary: #82b1ff; --_tycho-color-primary-hover: #a8c7ff; --_tycho-color-secondary: #82b1ff; --_tycho-color-secondary-hover: #a8c7ff; --_tycho-color-text-inverse: #000; --_tycho-color-bg: #1a1a1a; --_tycho-color-bg-subtle: #333; --_tycho-color-bg-muted: #111; --_tycho-color-bg-field: #111; --_tycho-color-bg-hover: #555; --_tycho-color-bg-active: #666; --_tycho-color-hover: rgba(255,255,255,0.16); --_tycho-shadow-elevation-1: 0 0 0 1px #999; --_tycho-shadow-elevation-2: 0 0 0 1px #999; --_tycho-shadow-elevation-3: 0 0 0 2px #999; --_tycho-shadow-track-carved: inset 0 0 0 1px #999; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #999; --_tycho-glass-highlight: 0 0 0 1px #999; } } /* No-JS / library-only fallback */ @media (prefers-contrast: more) { :root { --_tycho-color-text: #000; --_tycho-color-text-muted: #333; --_tycho-color-text-subtle: #555; --_tycho-color-text-disabled: #666; --_tycho-color-icon: #333; --_tycho-color-icon-muted: #555; --_tycho-color-icon-subtle: #555; --_tycho-color-border: #888; --_tycho-color-border-muted: #999; --_tycho-color-border-subtle: #999; --_tycho-color-border-strong: #666; --_tycho-color-border-field: #888; --_tycho-focus-ring-inner-width: 3px; --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — darker for contrast on white (state + fill grades) */ --_tycho-color-primary: #1565c0; --_tycho-color-primary-hover: #0d47a1; --_tycho-color-secondary: #1565c0; --_tycho-color-secondary-hover: #0d47a1; --_tycho-color-bg: #fff; --_tycho-color-bg-subtle: #f0f0f0; --_tycho-color-bg-muted: #ddd; --_tycho-color-bg-field: #fff; --_tycho-color-bg-hover: #e0e0e0; --_tycho-color-bg-active: #ccc; --_tycho-color-hover: rgba(0,0,0,0.12); --_tycho-shadow-sm: none; --_tycho-shadow-md: none; --_tycho-shadow-lg: none; --_tycho-shadow-xl: none; --_tycho-shadow-elevation-1: 0 0 0 1px #888; --_tycho-shadow-elevation-2: 0 0 0 1px #888; --_tycho-shadow-elevation-3: 0 0 0 2px #888; --_tycho-shadow-track-carved: inset 0 0 0 1px #888; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #888; --_tycho-glass-bg: var(--_tycho-color-surface); --_tycho-glass-bg-strong: var(--_tycho-color-surface); --_tycho-glass-tint: 100%; --_tycho-glass-backdrop: none; --_tycho-glass-rim: none; --_tycho-glass-highlight: 0 0 0 1px #888; --_tycho-glass-shadow: 0 0 rgb(0 0 0 / 0); --_tycho-opacity-disabled: 0.6; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root { --_tycho-color-text: #fff; --_tycho-color-text-muted: #ddd; --_tycho-color-text-subtle: #bbb; --_tycho-color-text-disabled: #999; --_tycho-color-icon: #ddd; --_tycho-color-icon-muted: #bbb; --_tycho-color-icon-subtle: #bbb; --_tycho-color-border: #999; --_tycho-color-border-muted: #888; --_tycho-color-border-subtle: #777; --_tycho-color-border-strong: #aaa; --_tycho-color-border-field: #999; --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — bright fills + black label text (HC-dark convention; fills pair with text-inverse, flipped to #000 below) */ --_tycho-color-primary: #82b1ff; --_tycho-color-primary-hover: #a8c7ff; --_tycho-color-secondary: #82b1ff; --_tycho-color-secondary-hover: #a8c7ff; --_tycho-color-text-inverse: #000; --_tycho-color-bg: #1a1a1a; --_tycho-color-bg-subtle: #333; --_tycho-color-bg-muted: #111; --_tycho-color-bg-field: #111; --_tycho-color-bg-hover: #555; --_tycho-color-bg-active: #666; --_tycho-color-hover: rgba(255,255,255,0.16); --_tycho-shadow-elevation-1: 0 0 0 1px #999; --_tycho-shadow-elevation-2: 0 0 0 1px #999; --_tycho-shadow-elevation-3: 0 0 0 2px #999; --_tycho-shadow-track-carved: inset 0 0 0 1px #999; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #999; --_tycho-glass-highlight: 0 0 0 1px #999; } } /* OS high contrast + programmatic dark mode (library consumers using html[data-color-scheme="dark"] without Graph Paper's settings system) */ @media (prefers-contrast: more) { html[data-color-scheme="dark"] { --_tycho-color-text: #fff; --_tycho-color-text-muted: #ddd; --_tycho-color-text-subtle: #bbb; --_tycho-color-text-disabled: #999; --_tycho-color-icon: #ddd; --_tycho-color-icon-muted: #bbb; --_tycho-color-icon-subtle: #bbb; --_tycho-color-border: #999; --_tycho-color-border-muted: #888; --_tycho-color-border-subtle: #777; --_tycho-color-border-strong: #aaa; --_tycho-color-border-field: #999; --_tycho-color-focus-ring-inner: #000; --_tycho-color-selected-ring-inner: #000; /* Accents — bright fills + black label text (HC-dark convention; fills pair with text-inverse, flipped to #000 below) */ --_tycho-color-primary: #82b1ff; --_tycho-color-primary-hover: #a8c7ff; --_tycho-color-secondary: #82b1ff; --_tycho-color-secondary-hover: #a8c7ff; --_tycho-color-text-inverse: #000; --_tycho-color-bg: #1a1a1a; --_tycho-color-bg-subtle: #333; --_tycho-color-bg-muted: #111; --_tycho-color-bg-field: #111; --_tycho-color-bg-hover: #555; --_tycho-color-bg-active: #666; --_tycho-color-hover: rgba(255,255,255,0.16); --_tycho-shadow-sm: none; --_tycho-shadow-md: none; --_tycho-shadow-lg: none; --_tycho-shadow-xl: none; --_tycho-shadow-elevation-1: 0 0 0 1px #999; --_tycho-shadow-elevation-2: 0 0 0 1px #999; --_tycho-shadow-elevation-3: 0 0 0 2px #999; --_tycho-shadow-track-carved: inset 0 0 0 1px #999; --_tycho-shadow-track-carved-sm: inset 0 0 0 1px #999; --_tycho-glass-bg: var(--_tycho-color-surface); --_tycho-glass-bg-strong: var(--_tycho-color-surface); --_tycho-glass-tint: 100%; --_tycho-glass-backdrop: none; --_tycho-glass-rim: none; --_tycho-glass-highlight: 0 0 0 1px #999; --_tycho-glass-shadow: 0 0 rgb(0 0 0 / 0); --_tycho-opacity-disabled: 0.6; } } /* ── Global disabled state for form inputs ── */ .tycho-disabled { opacity: var(--_tycho-opacity-disabled); pointer-events: none; user-select: none; }