tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/dist/tyrell.css

@@ -1,1390 +1 @@
-/* =================================================================
-Ty Component Library - Complete CSS System
-Industry-Standard Semantic Design System
-
-This file contains:
-- CSS Variables (Design Tokens)
-- Utility Classes
-- Theme Support (Light/Dark)
-- Surface System
-- 5-Variant Color System
-================================================================= */
-
-/* =================================================================
-PRE-DEFINITION STYLES - PREVENT LAYOUT SHIFTS
-These styles apply BEFORE custom elements are registered via JavaScript.
-They reserve space to prevent FOUC (Flash of Unstyled Content) and layout shifts.
-================================================================= */
-
-/* Icon component - reserve space before registration */
-ty-icon:not(:defined) {
-  display: inline-block;
-  aspect-ratio: 1 / 1;
-  opacity: 0;
-  transition: opacity 0.15s ease-in;
-}
-
-/* Default size (no attribute or size="md") */
-ty-icon:not(:defined),
-ty-icon:not(:defined)[size="md"] {
-  width: 1em;
-  height: 1em;
-}
-
-/* Em-based sizes */
-ty-icon:not(:defined)[size="xs"] {
-  width: 0.75em;
-  height: 0.75em;
-}
-
-ty-icon:not(:defined)[size="sm"] {
-  width: 0.875em;
-  height: 0.875em;
-}
-
-ty-icon:not(:defined)[size="lg"] {
-  width: 1.25em;
-  height: 1.25em;
-}
-
-ty-icon:not(:defined)[size="xl"] {
-  width: 1.5em;
-  height: 1.5em;
-}
-
-ty-icon:not(:defined)[size="2xl"] {
-  width: 2em;
-  height: 2em;
-}
-
-/* Pixel-based sizes */
-ty-icon:not(:defined)[size="12"] {
-  width: 12px;
-  height: 12px;
-}
-
-ty-icon:not(:defined)[size="14"] {
-  width: 14px;
-  height: 14px;
-}
-
-ty-icon:not(:defined)[size="16"] {
-  width: 16px;
-  height: 16px;
-}
-
-ty-icon:not(:defined)[size="18"] {
-  width: 18px;
-  height: 18px;
-}
-
-ty-icon:not(:defined)[size="20"] {
-  width: 20px;
-  height: 20px;
-}
-
-ty-icon:not(:defined)[size="24"] {
-  width: 24px;
-  height: 24px;
-}
-
-ty-icon:not(:defined)[size="32"] {
-  width: 32px;
-  height: 32px;
-}
-
-ty-icon:not(:defined)[size="48"] {
-  width: 48px;
-  height: 48px;
-}
-
-ty-icon:not(:defined)[size="64"] {
-  width: 64px;
-  height: 64px;
-}
-
-ty-icon:not(:defined)[size="80"] {
-  width: 80px;
-  height: 80px;
-}
-
-ty-icon:not(:defined)[size="96"] {
-  width: 96px;
-  height: 96px;
-}
-
-/* Once defined, fade in smoothly */
-ty-icon {
-  opacity: 1;
-}
-
-/* =================================================================
-CSS VARIABLES - DESIGN TOKENS
-================================================================= */
-
-/* Default theme (light) */
-html {
-  /* Color tokens (--ty-color-*, --ty-bg-{flavor}-*, --ty-border-*,
-     --ty-surface-*, --ty-text-*, --ty-input-{color}-*, --ty-solid-*) live
-     in tyrell-colors-static.css or tyrell-theme.css — load one of those
-     alongside this file. See CSS_GUIDE.md. */
-
-  /* =================================================================
-BACKGROUND COLORS
-================================================================= */
-
-  --ty-bg-faint: #f8fafc;
-  /* Very light canvas - for minimal backgrounds */
-  --ty-bg-soft: #f1f5f9;
-  /* Light canvas - app backgrounds */
-  --ty-bg: #ffffff;
-  /* WHITE - primary content baseline */
-  --ty-bg-bold: #f8fafc;
-  /* Subtle elevation - cards with light tint */
-  --ty-bg-strong: #e2e8f0;
-  /* Maximum elevation - clear distinction */
-
-  /* Focus ring gap - matches page background for button focus ring effect */
-  --ty-focus-ring-gap: #ffffff;
-
-  /* =================================================================
-BORDER COLORS
-================================================================= */
-
-  /* Border width — used as fallback by surface utilities (--ty-{surface}-border-width) */
-  --ty-border-width: 1px;
-
-  /* =================================================================
-SCROLLBAR
-================================================================= */
-
-  --ty-scrollbar-thumb: rgba(0, 0, 0, 0.35);
-  --ty-scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
-  --ty-scrollbar-thumb-active: rgba(0, 0, 0, 0.6);
-  --ty-scrollbar-track: transparent;
-  --ty-scrollbar-track-hover: rgba(0, 0, 0, 0.06);
-
-  /* =================================================================
-SURFACE SYSTEM
-================================================================= */
-
-  /* Surface borders — opt-in. Set color to make a surface's border visible.
-     Width and style fall back to --ty-border-width and `solid` if unset. */
-  --ty-elevated-border-width: var(--ty-border-width);
-  --ty-elevated-border-style: solid;
-
-  --ty-floating-border-width: var(--ty-border-width);
-  --ty-floating-border-style: solid;
-
-  --ty-canvas-border: transparent;
-  --ty-canvas-border-width: var(--ty-border-width);
-  --ty-canvas-border-style: solid;
-
-  --ty-content-border-width: var(--ty-border-width);
-  --ty-content-border-style: solid;
-
-  /* --ty-input-border is a color token (tyrell-colors-static.css /
-     tyrell-theme.css) used by <ty-input> shadow DOM and .ty-input utility.
-     Width/style live here. */
-  --ty-input-border-width: var(--ty-border-width);
-  --ty-input-border-style: solid;
-
-  /* Divider context — consumed by .ty-divide-x / .ty-divide-y utilities.
-     Each surface re-points --ty-divide-color to its own --ty-{surface}-border
-     token, so the same knob controls both the surface's chrome AND any
-     dividers inside it. Inherits down the tree via CSS variable inheritance. */
-  --ty-divide-color: var(--ty-border);
-  --ty-divide-width: var(--ty-border-width);
-
-  /* =================================================================
-COMPONENT TOKENS
-================================================================= */
-
-  /* Modal tokens */
-  --ty-modal-bg: #ffffff;
-  --ty-modal-color: #111827;
-  --ty-modal-border: #e5e7eb;
-  --ty-modal-backdrop: rgba(0, 0, 0, 0.5);
-  --ty-modal-backdrop-blur: blur(2px);
-  --ty-modal-border-radius: 16px;
-  --ty-modal-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --ty-modal-duration: 200ms;
-
-  /* Modal sizing */
-  --ty-modal-sm-width: 300px;
-  --ty-modal-md-width: 500px;
-  --ty-modal-lg-width: 700px;
-  --ty-modal-xl-width: 900px;
-  --ty-modal-full-width: 95vw;
-  --ty-modal-full-height: 95vh;
-
-  /* Input component tokens */
-  --ty-label-color: #374151;
-
-  /* =================================================================
-DESIGN SYSTEM TOKENS
-================================================================= */
-
-  /* Spacing Scale */
-  --ty-spacing-0: 0;
-  --ty-spacing-px: 1px;
-  --ty-spacing-mini: 0.125rem;
-  --ty-spacing-1: 0.25rem;
-  --ty-spacing-2: 0.5rem;
-  --ty-spacing-3: 0.75rem;
-  --ty-spacing-4: 1rem;
-  --ty-spacing-5: 1.25rem;
-  --ty-spacing-6: 1.5rem;
-  --ty-spacing-7: 1.75rem;
-  --ty-spacing-8: 2rem;
-  --ty-spacing-9: 2.25rem;
-  --ty-spacing-10: 2.5rem;
-  --ty-spacing-12: 3rem;
-  --ty-spacing-16: 4rem;
-  --ty-spacing-20: 5rem;
-  --ty-spacing-24: 6rem;
-
-  /* Border Radius */
-  --ty-radius-none: 0;
-  --ty-radius-sm: 0.25rem; /*  4px */
-  --ty-radius-base: 0.375rem; /*  6px */
-  --ty-radius-md: 0.5rem; /*  8px (anchor) */
-  --ty-radius-lg: 0.75rem; /* 12px */
-  --ty-radius-xl: 1rem; /* 16px */
-  --ty-radius-2xl: 1.5rem; /* 24px */
-  --ty-radius-3xl: 2rem; /* 32px */
-  --ty-radius-full: 9999px;
-
-  /* Shadows */
-  --ty-shadow-none: none;
-  --ty-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --ty-shadow-base:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --ty-shadow-md:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --ty-shadow-lg:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --ty-shadow-xl:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-  /* Typography */
-  --ty-font-sans:
-    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --ty-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
-
-  --ty-font-xxs: 0.625rem;
-  --ty-font-xs: 0.75rem;
-  --ty-font-sm: 0.875rem;
-  --ty-font-base: 1rem;
-  --ty-font-lg: 1.125rem;
-  --ty-font-xl: 1.25rem;
-  --ty-font-2xl: 1.5rem;
-  --ty-font-3xl: 1.875rem;
-  --ty-font-4xl: 2.25rem;
-  --ty-font-5xl: 3rem;
-
-  /* Paired line-heights — values follow Linear's text-* tokens (text-small
-     uses 21px not 20px; text-regular uses 1.6 ratio for breathable body text).
-     Paired with --ty-font-* so that `font-size: var(--ty-font-sm)` should also
-     use `line-height: var(--ty-leading-sm)`. */
-  --ty-leading-xxs: 0.9375rem; /* 15px paired with 10px text (Linear text-tiny 1.5) */
-  --ty-leading-xs: 1.05rem; /* ≈16.8px paired with 12px text (Linear text-micro 1.4) */
-  --ty-leading-sm: 1.3125rem; /* 21px paired with 14px text (Linear text-small) */
-  --ty-leading-base: 1.5rem; /* 24px paired with 16px text (Linear text-regular 1.6 ≈) */
-  --ty-leading-lg: 1.6875rem; /* 27px paired with 18px text (Linear text-large) */
-  --ty-leading-xl: 1.75rem; /* 28px paired with 20px text */
-  --ty-leading-2xl: 2rem; /* 32px paired with 24px text */
-  --ty-leading-3xl: 2.25rem; /* 36px paired with 30px text */
-  --ty-leading-4xl: 2.5rem; /* 40px paired with 36px text */
-  --ty-leading-5xl: 1; /* paired with 48px+ display text */
-
-  /* Letter-spacing (tracking) tokens — pulled from Linear's per-size values.
-     Linear uses slightly negative tracking on most text to tighten Inter. */
-  --ty-tracking-xxs: -0.015em; /* paired with text-tiny */
-  --ty-tracking-xs: 0; /* paired with text-micro */
-  --ty-tracking-sm: -0.013em; /* paired with text-small */
-  --ty-tracking-base: -0.011em; /* paired with text-regular */
-  --ty-tracking-lg: 0; /* paired with text-large */
-  --ty-tracking-tight: -0.022em; /* for titles (Linear title-4 and up) */
-  --ty-tracking-title: -0.012em; /* for titles (Linear title-1..3) */
-
-  /* Weights tuned to Linear (Inter Variable). With the system font stack
-     these round to the nearest available (500/600/700); load Inter Variable
-     for the exact rendering. */
-  --ty-font-thin: 100;
-  --ty-font-light: 300;
-  --ty-font-normal: 400;
-  --ty-font-medium: 510;
-  --ty-font-semibold: 590;
-  --ty-font-bold: 680;
-  --ty-font-extrabold: 800;
-
-  /* Semantic weight dials — MODE-FLIPPED (see the html.dark block).
-     Light text on dark surfaces optically blooms (halation), so dark mode
-     wants genuinely lighter weights than light mode; a single fixed weight
-     can't be right in both. Components consume these instead of the raw
-     scale above:
-       --ty-weight-action  buttons, interactive chrome
-       --ty-weight-label   tags, chips, badges
-     Theme these like any other token — per :root, html.dark, a named theme
-     pack, or one element. The theme layer registers them as typed numbers,
-     so with a variable font, weight crossfades during theme transitions
-     along with the colors. */
-  --ty-weight-action: var(--ty-font-medium);
-  --ty-weight-label: 440;
-
-  /* Solid-button depth chrome (consumed in button.ts):
-       --ty-button-depth     master intensity 0–1. 0 = pixel-flat (the old
-                             look), 1 = full tactile gloss. Scales the
-                             derived border offset, top sheen and drop
-                             shadow together. Themable per mode / theme
-                             pack / element like any other dial.
-       --ty-button-border-l  L-offset of the fill-derived 1px border,
-                             mode-flipped below: dark mode needs a LIGHTER-
-                             than-fill hairline (solids wash out against
-                             dark surfaces without a lit edge), light mode
-                             a slightly darker one. */
-  --ty-button-depth: 0.35;
-  --ty-button-border-l: -0.08;
-  /* Neutral (ink) gets its own, stronger edge: it has no hue separating it
-     from the canvas, so the same offset that reads fine on colored fills
-     nearly vanishes on it — especially in dark mode, where the ink fill
-     sits close to the page. */
-  --ty-button-border-l-neutral: -0.25;
-
-  --ty-line-height-none: 1;
-  --ty-line-height-tight: 1.25;
-  --ty-line-height-snug: 1.375;
-  --ty-line-height-normal: 1.5;
-  --ty-line-height-relaxed: 1.625;
-  --ty-line-height-loose: 2;
-
-  /* Transitions. Each routes through --ty-local-transition first — unset by
-     default (falls through to the real value below), but the theme engine's
-     .ty-theme-switching sets it to `none` for the duration of a theme swap,
-     so components using these tokens don't run their own hover/focus
-     transition at the same time as the coordinated theme crossfade. See
-     tyrell-theme.css SECTION 3 — THEME TRANSITIONS. */
-  --ty-transition-none: none;
-  --ty-transition-all: var(--ty-local-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
-  --ty-transition-colors: var(--ty-local-transition,
-    bg-color, border-color, color, fill,
-    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1));
-  --ty-transition-shadow: var(--ty-local-transition, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1));
-  --ty-transition-transform: var(--ty-local-transition, transform 150ms cubic-bezier(0.4, 0, 0.2, 1));
-
-  /* Component Sizes — single source of truth for FIELD heights.
-     Fields (ty-input, ty-select, ty-date-picker) come in exactly three
-     sizes and consume these via min-height: var(--ty-size-*), so the same
-     `size` attribute is the same height on every field. Shared scale with
-     ty-button's 4px ladder (see button.ts): field sm = button md (32px),
-     field md = button lg (36px), field lg = button xl (40px) — a button
-     and a field of the paired size sit flush, same height, in a row. */
-  --ty-size-sm: 2rem;
-  /* 32px */
-  --ty-size-md: 2.25rem;
-  /* 36px */
-  --ty-size-lg: 2.5rem;
-  /* 40px */
-
-  /* Z-Index Scale */
-  --ty-z-auto: auto;
-  --ty-z-0: 0;
-  --ty-z-10: 10;
-  --ty-z-20: 20;
-  --ty-z-30: 30;
-  --ty-z-40: 40;
-  --ty-z-50: 50;
-  --ty-z-sticky: 1020;
-  --ty-z-fixed: 1030;
-  --ty-z-modal-backdrop: 1040;
-  --ty-z-modal: 1050;
-  --ty-z-popover: 1060;
-  --ty-z-tooltip: 1070;
-  --ty-z-dropdown: 1080;
-
-  /* =================================================================
-  SCROLL SHADOW SYSTEM
-  Uses clip-path technique for smooth corner fade
-  ================================================================= */
-  --ty-scroll-shadow-top: radial-gradient(
-    ellipse 100% 30% at center,
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0),
-    transparent
-  );
-  --ty-scroll-shadow-bottom: radial-gradient(
-    ellipse 100% 20% at center,
-    rgba(0, 0, 0, 0.15),
-    rgba(0, 0, 0, 0),
-    transparent
-  );
-  --ty-scroll-shadow-transition: opacity 0.2s ease-out;
-
-  /* =================================================================
-  TOOLTIP (default/"dark" flavor)
-  Deliberately theme-INDEPENDENT — defined once here, not redeclared in
-  html.dark below. A tooltip's job is to pop against whatever it's sitting
-  on, light page or dark; every major library (Material, Bootstrap, Ant,
-  Shoelace) keeps its default tooltip a fixed dark chip regardless of page
-  theme. Override on :root (or scope to a container) to retheme globally
-  without touching flavor="light"/"info"/other components.
-  Values are pure achromatic gray (R=G=B, no hue) — matches
-  --ty-solid-neutral's "no tint" convention. Don't reuse a Tailwind
-  slate/cool-gray hex here (e.g. #1f2937) — those carry a real blue
-  undertone (blue channel > red/green) and read as a color flavor next to
-  genuinely neutral buttons, which was exactly the bug being fixed.
-  ================================================================= */
-  --ty-tooltip-bg: #262626;
-  --ty-tooltip-color: #f5f5f5;
-  --ty-tooltip-border: #404040;
-
-  /* =================================================================
-  CALENDAR — "other month" day de-emphasis
-  --ty-color-neutral-faint alone is only ~2.5:1 against white — already
-  below the 4.5:1 WCAG AA text minimum before the (now-removed) opacity
-  fade made it worse still. This is its own token, calibrated to actually
-  pass, rather than reusing -faint here. Real bug, caught by adding
-  axe-core coverage for the first time, not a design choice being revised.
-  ================================================================= */
-  --ty-calendar-other-month-color: #6b7280; /* 4.83:1 vs white */
-}
-
-/* =================================================================
-DARK THEME OVERRIDES
-================================================================= */
-
-html.dark,
-html[data-theme="dark"] {
-  /* Weight dials flip with the mode — light-on-dark text blooms, so dark
-     mode runs genuinely lighter. See the :root definitions. */
-  --ty-weight-action: var(--ty-font-normal);
-  --ty-weight-label: var(--ty-font-normal);
-
-  /* Colored solid buttons: no border in dark mode — border color equals
-     the fill exactly, so it's geometrically present (depth 0 keeps
-     geometry stable) but invisible. Neutral keeps its own separate,
-     stronger dial (below) since its dark ink fill needs the lit edge to
-     read as a shape at all against a near-black canvas; colored fills
-     don't have that problem (their own hue/saturation already separates
-     them from the page), so no border reads as cleaner. */
-  --ty-button-border-l: 0;
-  --ty-button-border-l-neutral: 0.5;
-
-  /* Backgrounds for dark mode */
-  --ty-bg-faint: #0f1419;
-  --ty-bg-soft: #111827;
-  --ty-bg: #1f2937;
-  --ty-bg-bold: #374151;
-  --ty-bg-strong: #6b7280;
-
-  /* Focus ring gap */
-  --ty-focus-ring-gap: #1f2937;
-
-  /* Scrollbar - dark mode */
-  --ty-scrollbar-thumb: rgba(255, 255, 255, 0.13);
-  --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
-  --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.3);
-  --ty-scrollbar-track: transparent;
-  --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.04);
-
-  /* Shadows need to be darker/more prominent in dark mode */
-  --ty-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --ty-shadow-base:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-  --ty-shadow-md:
-    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --ty-shadow-lg:
-    0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-  --ty-shadow-xl:
-    0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
-  --ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-
-  /* Input component tokens - dark mode */
-  --ty-label-color: #d1d5db;
-
-  /* Modal - dark mode */
-  --ty-modal-bg: var(--ty-bg-bold);
-  --ty-modal-color: var(--ty-color-neutral-bold);
-  --ty-modal-border: var(--ty-border);
-  --ty-modal-backdrop: rgba(0, 0, 0, 0.7);
-  --ty-modal-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
-
-  /* Scroll shadows - lighter tint for dark mode */
-  --ty-scroll-shadow-top: radial-gradient(
-    ellipse 100% 30% at center,
-    rgba(172, 172, 172, 0.2),
-    rgba(0, 0, 0, 0),
-    transparent
-  );
-  --ty-scroll-shadow-bottom: radial-gradient(
-    ellipse 100% 20% at center,
-    rgba(172, 172, 172, 0.3),
-    rgba(0, 0, 0, 0),
-    transparent
-  );
-
-  /* Calendar "other month" de-emphasis — see the :root definition for why
-     this is its own token instead of --ty-color-neutral-faint. */
-  --ty-calendar-other-month-color: #8a8a8a; /* 5.04:1 vs dark content bg (#1a1a1a) */
-}
-
-/* =================================================================
-TEXT SELECTION STYLING
-Global and semantic text selection colors
-================================================================= */
-
-/* Global text selection - uses primary colors by default */
-::selection {
-  background-color: var(--ty-selection-bg, var(--ty-bg-primary-bold));
-  color: var(--ty-selection-color, var(--ty-text-strong));
-}
-
-::-moz-selection {
-  background-color: var(--ty-selection-bg, var(--ty-color-primary));
-  color: var(--ty-selection-color, var(--ty-text-strong));
-}
-
-/* Code block selection - special handling for better readability */
-pre ::selection,
-code ::selection,
-pre::-moz-selection,
-code::-moz-selection {
-  background-color: var(--ty-color-warning-soft);
-  color: var(--ty-color-neutral-strong);
-}
-
-html.dark pre ::selection,
-html.dark code ::selection,
-html.dark pre::-moz-selection,
-html.dark code::-moz-selection {
-  background-color: var(--ty-color-warning);
-  color: var(--ty-bg-strong);
-}
-
-/* Input and textarea selection - higher contrast */
-input::selection,
-textarea::selection,
-input::-moz-selection,
-textarea::-moz-selection {
-  background-color: var(--ty-color-primary);
-  color: white;
-}
-
-html.dark input::selection,
-html.dark textarea::selection,
-html.dark input::-moz-selection,
-html.dark textarea::-moz-selection {
-  background-color: var(--ty-color-primary-soft);
-  color: var(--ty-color-primary-strong);
-}
-
-/* Semantic selection utility classes */
-.ty-selection-primary ::selection,
-.ty-selection-primary::-moz-selection {
-  background-color: var(--ty-color-primary-soft);
-  color: var(--ty-color-primary-strong);
-}
-
-
-.ty-selection-success ::selection,
-.ty-selection-success::-moz-selection {
-  background-color: var(--ty-color-success-soft);
-  color: var(--ty-color-success-strong);
-}
-
-.ty-selection-warning ::selection,
-.ty-selection-warning::-moz-selection {
-  background-color: var(--ty-color-warning-soft);
-  color: var(--ty-color-warning-strong);
-}
-
-.ty-selection-danger ::selection,
-.ty-selection-danger::-moz-selection {
-  background-color: var(--ty-color-danger-soft);
-  color: var(--ty-color-danger-strong);
-}
-
-.ty-selection-neutral ::selection,
-.ty-selection-neutral::-moz-selection {
-  background-color: var(--ty-color-neutral-soft);
-  color: var(--ty-color-neutral-strong);
-}
-
-/* Dark mode semantic selections */
-html.dark .ty-selection-primary ::selection,
-html.dark .ty-selection-primary::-moz-selection {
-  background-color: var(--ty-color-primary);
-  color: white;
-}
-
-
-html.dark .ty-selection-success ::selection,
-html.dark .ty-selection-success::-moz-selection {
-  background-color: var(--ty-color-success);
-  color: white;
-}
-
-html.dark .ty-selection-warning ::selection,
-html.dark .ty-selection-warning::-moz-selection {
-  background-color: var(--ty-color-warning);
-  color: var(--ty-bg-strong);
-}
-
-html.dark .ty-selection-danger ::selection,
-html.dark .ty-selection-danger::-moz-selection {
-  background-color: var(--ty-color-danger);
-  color: white;
-}
-
-html.dark .ty-selection-neutral ::selection,
-html.dark .ty-selection-neutral::-moz-selection {
-  background-color: var(--ty-color-neutral);
-  color: white;
-}
-
-/* =================================================================
-UTILITY CLASSES
-================================================================= */
-
-/* Sensible default for any border that doesn't set its own color —
-   Tailwind's `border` / `border-t`, plain CSS `border: 1px solid`, etc.
-   Scoped to `html` to win specificity over Tailwind's (0,0,0) preflight
-   regardless of injection order. Class-based overrides (`border-red-500`,
-   `ty-border-primary`, etc.) still win their cascade. Theme-aware:
-   `--ty-border` switches in dark mode automatically. */
-html *,
-html ::before,
-html ::after {
-  border-color: var(--ty-border);
-}
-
-/* =================================================================
-SURFACE UTILITIES
-================================================================= */
-
-/* Elevated surfaces - cards, panels, components */
-.ty-elevated {
-  box-sizing: border-box !important;
-  background-color: var(--ty-surface-elevated) !important;
-  border: var(--ty-elevated-border-width, var(--ty-border-width, 1px))
-    var(--ty-elevated-border-style, solid)
-    var(--ty-elevated-border, transparent) !important;
-  box-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.1),
-    0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
-  --ty-divide-color: var(--ty-elevated-border);
-}
-
-/* Floating surfaces - modals, dropdowns, tooltips */
-.ty-floating {
-  box-sizing: border-box !important;
-  background-color: var(--ty-surface-floating) !important;
-  border: var(--ty-floating-border-width, var(--ty-border-width, 1px))
-    var(--ty-floating-border-style, solid)
-    var(--ty-floating-border, transparent) !important;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
-  --ty-divide-color: var(--ty-floating-border);
-}
-
-/* App and page backgrounds - the canvas for content */
-.ty-canvas {
-  box-sizing: border-box !important;
-  background-color: var(--ty-surface-canvas) !important;
-  border: var(--ty-canvas-border-width, var(--ty-border-width, 1px))
-    var(--ty-canvas-border-style, solid) var(--ty-canvas-border, transparent) !important;
-  --ty-divide-color: var(--ty-canvas-border);
-}
-
-/* Main content areas - primary content background */
-.ty-content {
-  box-sizing: border-box !important;
-  background-color: var(--ty-surface-content) !important;
-  border: var(--ty-content-border-width, var(--ty-border-width, 1px))
-    var(--ty-content-border-style, solid) var(--ty-content-border, transparent) !important;
-  --ty-divide-color: var(--ty-content-border);
-}
-
-/* Input surfaces - form controls, text areas, inputs */
-.ty-input {
-  box-sizing: border-box !important;
-  background-color: var(--ty-input-bg) !important;
-  border: var(--ty-input-border-width, var(--ty-border-width, 1px))
-    var(--ty-input-border-style, solid) var(--ty-input-border, transparent) !important;
-  --ty-divide-color: var(--ty-input-border);
-}
-
-/* Divider utilities — consume --ty-divide-color from the nearest surface
-   context (set on .ty-elevated/.ty-floating/.ty-canvas/.ty-content/.ty-input)
-   via CSS variable inheritance. Override per-instance:
-     style="--ty-divide-color: var(--ty-border-strong);" */
-.ty-divide-y > * + * {
-  border-top: var(--ty-divide-width, var(--ty-border-width, 1px)) solid
-    var(--ty-divide-color, var(--ty-border));
-}
-
-.ty-divide-x > * + * {
-  border-left: var(--ty-divide-width, var(--ty-border-width, 1px)) solid
-    var(--ty-divide-color, var(--ty-border));
-}
-
-/* Dark theme adjustments for shadows */
-html.dark .ty-elevated {
-  background-color: var(--ty-surface-elevated) !important;
-  box-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.2),
-    0 1px 2px -1px rgb(0 0 0 / 0.2) !important;
-}
-
-html.dark .ty-floating {
-  background-color: var(--ty-surface-floating) !important;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.3),
-    0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
-}
-
-html.dark .ty-high-elevation {
-  background-color: var(--ty-surface-floating) !important;
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.4),
-    0 4px 6px -4px rgb(0 0 0 / 0.4) !important;
-}
-
-html.dark .ty-sunken {
-  background-color: var(--ty-surface-input) !important;
-  box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.1) !important;
-}
-
-/* =================================================================
-SEMANTIC BACKGROUND UTILITIES
-================================================================= */
-
-/* Semantic backgrounds - these are the key theme utilities */
-.ty-bg-primary {
-  background-color: var(--ty-bg-primary);
-}
-
-.ty-bg-primary\+ {
-  background-color: var(--ty-bg-primary-bold);
-}
-
-.ty-bg-primary- {
-  background-color: var(--ty-bg-primary-soft);
-}
-
-
-
-
-.ty-bg-success {
-  background-color: var(--ty-bg-success);
-}
-
-.ty-bg-success\+ {
-  background-color: var(--ty-bg-success-bold);
-}
-
-.ty-bg-success- {
-  background-color: var(--ty-bg-success-soft);
-}
-
-.ty-bg-danger {
-  background-color: var(--ty-bg-danger);
-}
-
-.ty-bg-danger\+ {
-  background-color: var(--ty-bg-danger-bold);
-}
-
-.ty-bg-danger- {
-  background-color: var(--ty-bg-danger-soft);
-}
-
-.ty-bg-warning {
-  background-color: var(--ty-bg-warning);
-}
-
-.ty-bg-warning\+ {
-  background-color: var(--ty-bg-warning-bold);
-}
-
-.ty-bg-warning- {
-  background-color: var(--ty-bg-warning-soft);
-}
-
-.ty-bg-neutral {
-  background-color: var(--ty-bg-neutral);
-}
-
-.ty-bg-neutral\+ {
-  background-color: var(--ty-bg-neutral-bold);
-}
-
-.ty-bg-neutral- {
-  background-color: var(--ty-bg-neutral-soft);
-}
-
-/* =================================================================
-TEXT HIERARCHY UTILITIES
-================================================================= */
-
-/* Base text hierarchy - emphasis based, not semantic */
-.ty-text {
-  color: var(--ty-text) !important;
-}
-
-.ty-text\+ {
-  color: var(--ty-text-bold) !important;
-}
-
-.ty-text\+\+ {
-  color: var(--ty-text-strong) !important;
-}
-
-.ty-text- {
-  color: var(--ty-text-soft) !important;
-}
-
-.ty-text-- {
-  color: var(--ty-text-faint) !important;
-}
-
-/* =================================================================
-SEMANTIC TEXT COLORS - 5-VARIANT SYSTEM
-================================================================= */
-
-/* Primary text colors with full 5-variant system */
-.ty-text-primary\+\+ {
-  color: var(--ty-color-primary-strong) !important;
-}
-
-.ty-text-primary\+ {
-  color: var(--ty-color-primary-bold) !important;
-}
-
-.ty-text-primary {
-  color: var(--ty-color-primary) !important;
-}
-
-.ty-text-primary- {
-  color: var(--ty-color-primary-soft) !important;
-}
-
-.ty-text-primary-- {
-  color: var(--ty-color-primary-faint) !important;
-}
-
-
-
-
-
-/* Success text colors */
-.ty-text-success\+\+ {
-  color: var(--ty-color-success-strong) !important;
-}
-
-.ty-text-success\+ {
-  color: var(--ty-color-success-bold) !important;
-}
-
-.ty-text-success {
-  color: var(--ty-color-success) !important;
-}
-
-.ty-text-success- {
-  color: var(--ty-color-success-soft) !important;
-}
-
-.ty-text-success-- {
-  color: var(--ty-color-success-faint) !important;
-}
-
-/* Danger text colors */
-.ty-text-danger\+\+ {
-  color: var(--ty-color-danger-strong) !important;
-}
-
-.ty-text-danger\+ {
-  color: var(--ty-color-danger-bold) !important;
-}
-
-.ty-text-danger {
-  color: var(--ty-color-danger) !important;
-}
-
-.ty-text-danger- {
-  color: var(--ty-color-danger-soft) !important;
-}
-
-.ty-text-danger-- {
-  color: var(--ty-color-danger-faint) !important;
-}
-
-/* Warning text colors */
-.ty-text-warning\+\+ {
-  color: var(--ty-color-warning-strong) !important;
-}
-
-.ty-text-warning\+ {
-  color: var(--ty-color-warning-bold) !important;
-}
-
-.ty-text-warning {
-  color: var(--ty-color-warning) !important;
-}
-
-.ty-text-warning- {
-  color: var(--ty-color-warning-soft) !important;
-}
-
-.ty-text-warning-- {
-  color: var(--ty-color-warning-faint) !important;
-}
-
-/* Neutral text colors */
-.ty-text-neutral\+\+ {
-  color: var(--ty-color-neutral-strong) !important;
-}
-
-.ty-text-neutral\+ {
-  color: var(--ty-color-neutral-bold) !important;
-}
-
-.ty-text-neutral {
-  color: var(--ty-color-neutral) !important;
-}
-
-.ty-text-neutral- {
-  color: var(--ty-color-neutral-soft) !important;
-}
-
-.ty-text-neutral-- {
-  color: var(--ty-color-neutral-faint) !important;
-}
-
-/* =================================================================
-BORDER UTILITIES
-================================================================= */
-
-/* Base border colors with emphasis */
-.ty-border {
-  border-color: var(--ty-border) !important;
-}
-
-.ty-border\+ {
-  border-color: var(--ty-border-bold) !important;
-}
-
-.ty-border\+\+ {
-  border-color: var(--ty-border-strong) !important;
-}
-
-.ty-border- {
-  border-color: var(--ty-border-soft);
-}
-
-.ty-border-- {
-  border-color: var(--ty-border-faint);
-}
-
-/* Semantic border colors */
-.ty-border-primary {
-  border-color: var(--ty-border-primary);
-}
-
-
-.ty-border-success {
-  border-color: var(--ty-border-success);
-}
-
-.ty-border-danger {
-  border-color: var(--ty-border-danger);
-}
-
-.ty-border-warning {
-  border-color: var(--ty-border-warning);
-}
-
-.ty-border-neutral {
-  border-color: var(--ty-border-neutral);
-}
-
-/* =================================================================
-COMPONENT UTILITIES
-================================================================= */
-
-/* Card/Panel utilities */
-.ty-card {
-  background-color: var(--ty-surface-elevated);
-  color: var(--ty-color-neutral-bold);
-}
-
-.ty-card-elevated {
-  background-color: var(--ty-surface-floating);
-  box-shadow: var(--ty-shadow-md);
-}
-
-/* Input-like utilities for custom form elements */
-.ty-input-bg {
-  background-color: var(--ty-input-bg);
-}
-
-.ty-input-border {
-  border-color: var(--ty-input-border);
-}
-
-.ty-input-focus {
-  border-color: var(--ty-input-border-focus);
-}
-
-/* Modal/overlay utilities */
-.ty-modal-bg {
-  background-color: var(--ty-modal-bg);
-}
-
-.ty-modal-backdrop {
-  background-color: var(--ty-modal-backdrop);
-}
-
-/* =================================================================
-INTERACTIVE STATES
-================================================================= */
-
-.hover\:ty-bg-neutral--:hover {
-  background-color: var(--ty-bg-neutral-faint) !important;
-}
-
-.hover\:ty-bg-neutral-:hover {
-  background-color: var(--ty-bg-neutral-soft) !important;
-}
-
-.hover\:ty-bg-neutral:hover {
-  background-color: var(--ty-bg-neutral) !important;
-}
-
-.hover\:ty-bg-neutral\+:hover {
-  background-color: var(--ty-bg-neutral-bold) !important;
-}
-
-.hover\:ty-bg-neutral\+\+:hover {
-  background-color: var(--ty-bg-neutral-strong) !important;
-}
-
-.hover\:ty-bg-primary:hover {
-  background-color: var(--ty-bg-primary) !important;
-}
-
-.hover\:ty-bg-primary\+:hover {
-  background-color: var(--ty-bg-primary-bold) !important;
-}
-
-
-
-.hover\:ty-bg-success:hover {
-  background-color: var(--ty-bg-success) !important;
-}
-
-.hover\:ty-bg-success\+:hover {
-  background-color: var(--ty-bg-success-bold) !important;
-}
-
-.hover\:ty-bg-danger:hover {
-  background-color: var(--ty-bg-danger) !important;
-}
-
-.hover\:ty-bg-danger\+:hover {
-  background-color: var(--ty-bg-danger-bold) !important;
-}
-
-.hover\:ty-bg-danger-:hover {
-  background-color: var(--ty-bg-danger-soft) !important;
-}
-
-/* Hover states for text colors */
-.hover\:ty-text:hover {
-  color: var(--ty-text) !important;
-}
-
-.hover\:ty-text\+:hover {
-  color: var(--ty-text-bold) !important;
-}
-
-.hover\:ty-text\+\+:hover {
-  color: var(--ty-text-strong) !important;
-}
-
-.hover\:ty-text-:hover {
-  color: var(--ty-text-soft) !important;
-}
-
-.hover\:ty-text--:hover {
-  color: var(--ty-text-faint) !important;
-}
-
-/* Hover states for semantic text colors */
-/* Primary text hover states */
-.hover\:ty-text-primary\+\+:hover {
-  color: var(--ty-color-primary-strong) !important;
-}
-
-.hover\:ty-text-primary\+:hover {
-  color: var(--ty-color-primary-bold) !important;
-}
-
-.hover\:ty-text-primary:hover {
-  color: var(--ty-color-primary) !important;
-}
-
-.hover\:ty-text-primary-:hover {
-  color: var(--ty-color-primary-soft) !important;
-}
-
-.hover\:ty-text-primary--:hover {
-  color: var(--ty-color-primary-faint) !important;
-}
-
-
-
-
-
-/* Success text hover states */
-.hover\:ty-text-success\+\+:hover {
-  color: var(--ty-color-success-strong) !important;
-}
-
-.hover\:ty-text-success\+:hover {
-  color: var(--ty-color-success-bold) !important;
-}
-
-.hover\:ty-text-success:hover {
-  color: var(--ty-color-success) !important;
-}
-
-.hover\:ty-text-success-:hover {
-  color: var(--ty-color-success-soft) !important;
-}
-
-.hover\:ty-text-success--:hover {
-  color: var(--ty-color-success-faint) !important;
-}
-
-/* Danger text hover states */
-.hover\:ty-text-danger\+\+:hover {
-  color: var(--ty-color-danger-strong) !important;
-}
-
-.hover\:ty-text-danger\+:hover {
-  color: var(--ty-color-danger-bold) !important;
-}
-
-.hover\:ty-text-danger:hover {
-  color: var(--ty-color-danger) !important;
-}
-
-.hover\:ty-text-danger-:hover {
-  color: var(--ty-color-danger-soft) !important;
-}
-
-.hover\:ty-text-danger--:hover {
-  color: var(--ty-color-danger-faint) !important;
-}
-
-/* Warning text hover states */
-.hover\:ty-text-warning\+\+:hover {
-  color: var(--ty-color-warning-strong) !important;
-}
-
-.hover\:ty-text-warning\+:hover {
-  color: var(--ty-color-warning-bold) !important;
-}
-
-.hover\:ty-text-warning:hover {
-  color: var(--ty-color-warning) !important;
-}
-
-.hover\:ty-text-warning-:hover {
-  color: var(--ty-color-warning-soft) !important;
-}
-
-.hover\:ty-text-warning--:hover {
-  color: var(--ty-color-warning-faint) !important;
-}
-
-/* Neutral text hover states */
-.hover\:ty-text-neutral\+\+:hover {
-  color: var(--ty-color-neutral-strong) !important;
-}
-
-.hover\:ty-text-neutral + :hover {
-  color: var(--ty-color-neutral-bold) !important;
-}
-
-.hover\:ty-text-neutral:hover {
-  color: var(--ty-color-neutral) !important;
-}
-
-.hover\:ty-text-neutral-:hover {
-  color: var(--ty-color-neutral-soft) !important;
-}
-
-.hover\:ty-text-neutral--:hover {
-  color: var(--ty-color-neutral-faint) !important;
-}
-
-/* Hover states for borders */
-/* Base border hover states */
-.hover\:ty-border\+\+:hover {
-  border-color: var(--ty-border-strong) !important;
-}
-
-.hover\:ty-border\+:hover {
-  border-color: var(--ty-border-bold) !important;
-}
-
-.hover\:ty-border:hover {
-  border-color: var(--ty-border) !important;
-}
-
-.hover\:ty-border-:hover {
-  border-color: var(--ty-border-soft) !important;
-}
-
-.hover\:ty-border--:hover {
-  border-color: var(--ty-border-faint) !important;
-}
-
-/* Semantic border hover states */
-.hover\:ty-border-primary:hover {
-  border-color: var(--ty-border-primary) !important;
-}
-
-
-.hover\:ty-border-success:hover {
-  border-color: var(--ty-border-success) !important;
-}
-
-.hover\:ty-border-danger:hover {
-  border-color: var(--ty-border-danger) !important;
-}
-
-.hover\:ty-border-warning:hover {
-  border-color: var(--ty-border-warning) !important;
-}
-
-.hover\:ty-border-neutral:hover {
-  border-color: var(--ty-border-neutral) !important;
-}
-
-.focus\:ty-border\+\+:focus {
-  border-color: var(--ty-border-strong) !important;
-}
-
-.focus\:ty-border + :focus {
-  border-color: var(--ty-border-bold) !important;
-}
-
-.focus\:ty-border:focus {
-  border-color: var(--ty-border) !important;
-}
-
-.focus\:ty-border-:focus {
-  border-color: var(--ty-border-soft) !important;
-}
-
-.focus\:ty-border--:focus {
-  border-color: var(--ty-border-faint) !important;
-}
-
-/* Semantic border focus states */
-.focus\:ty-border-primary:focus {
-  border-color: var(--ty-border-primary) !important;
-}
-
-
-.focus\:ty-border-success:focus {
-  border-color: var(--ty-border-success) !important;
-}
-
-.focus\:ty-border-danger:focus {
-  border-color: var(--ty-border-danger) !important;
-}
-
-.focus\:ty-border-warning:focus {
-  border-color: var(--ty-border-warning) !important;
-}
-
-.focus\:ty-border-neutral:focus {
-  border-color: var(--ty-border-neutral) !important;
-}
-
-/* =================================================================
-RESPONSIVE VARIANTS
-================================================================= */
-
-/* Small screens and up */
-@media (min-width: 640px) {
-  .sm\:ty-bg-primary {
-    background-color: var(--ty-bg-primary);
-  }
-
-  .sm\:ty-text-primary {
-    color: var(--ty-color-primary);
-  }
-}
-
-/* Medium screens and up */
-@media (min-width: 768px) {
-  .md\:ty-bg-primary {
-    background-color: var(--ty-bg-primary);
-  }
-
-  .md\:ty-text-primary {
-    color: var(--ty-color-primary);
-  }
-}
-
-/* Large screens and up */
-@media (min-width: 1024px) {
-  .lg\:ty-bg-primary {
-    background-color: var(--ty-bg-primary);
-  }
-
-  .lg\:ty-text-primary {
-    color: var(--ty-color-primary);
-  }
-}
-
-/* =================================================================
-   MOBILE FONT SIZE
-   Prevents iOS Safari auto-zoom on input focus (requires >= 16px)
-   and improves readability on small screens.
-================================================================= */
-
-@media (max-width: 768px) {
-  :root {
-    --ty-font-sm: 1rem;
-  }
-}
-
-/* =================================================================
-   MODAL BACKDROP ZOOM (opt-in)
-   While any <ty-modal backdrop-zoom open> is open, the component toggles
-   .ty-modal-zoom on <html> and the page body scales down slightly
-   (Vaul/shadcn-style). The modal itself renders in the top layer, which
-   escapes ancestor transforms — only the page behind it moves.
-   Caveat: a scaled <body> becomes the containing block for position:fixed
-   descendants — apps with fixed headers/sidebars should not use backdrop-zoom.
-================================================================= */
-
-body {
-  transition: scale var(--ty-modal-duration, 200ms) ease-out;
-}
-
-html.ty-modal-zoom body {
-  scale: 0.99;
-  transform-origin: 50% 50%;
-}
+ty-icon:not(:defined){display:inline-block;aspect-ratio:1 / 1;opacity:0;transition:opacity .15s ease-in}ty-icon:not(:defined),ty-icon:not(:defined)[size=md]{width:1em;height:1em}ty-icon:not(:defined)[size=xs]{width:.75em;height:.75em}ty-icon:not(:defined)[size=sm]{width:.875em;height:.875em}ty-icon:not(:defined)[size=lg]{width:1.25em;height:1.25em}ty-icon:not(:defined)[size=xl]{width:1.5em;height:1.5em}ty-icon:not(:defined)[size="2xl"]{width:2em;height:2em}ty-icon:not(:defined)[size="12"]{width:12px;height:12px}ty-icon:not(:defined)[size="14"]{width:14px;height:14px}ty-icon:not(:defined)[size="16"]{width:16px;height:16px}ty-icon:not(:defined)[size="18"]{width:18px;height:18px}ty-icon:not(:defined)[size="20"]{width:20px;height:20px}ty-icon:not(:defined)[size="24"]{width:24px;height:24px}ty-icon:not(:defined)[size="32"]{width:32px;height:32px}ty-icon:not(:defined)[size="48"]{width:48px;height:48px}ty-icon:not(:defined)[size="64"]{width:64px;height:64px}ty-icon:not(:defined)[size="80"]{width:80px;height:80px}ty-icon:not(:defined)[size="96"]{width:96px;height:96px}ty-icon{opacity:1}html{--ty-bg-faint: #f8fafc;--ty-bg-soft: #f1f5f9;--ty-bg: #ffffff;--ty-bg-bold: #f8fafc;--ty-bg-strong: #e2e8f0;--ty-focus-ring-gap: #ffffff;--ty-border-width: 1px;--ty-scrollbar-thumb: rgba(0, 0, 0, .35);--ty-scrollbar-thumb-hover: rgba(0, 0, 0, .5);--ty-scrollbar-thumb-active: rgba(0, 0, 0, .6);--ty-scrollbar-track: transparent;--ty-scrollbar-track-hover: rgba(0, 0, 0, .06);--ty-elevated-border-width: var(--ty-border-width);--ty-elevated-border-style: solid;--ty-floating-border-width: var(--ty-border-width);--ty-floating-border-style: solid;--ty-canvas-border: transparent;--ty-canvas-border-width: var(--ty-border-width);--ty-canvas-border-style: solid;--ty-content-border-width: var(--ty-border-width);--ty-content-border-style: solid;--ty-input-border-width: var(--ty-border-width);--ty-input-border-style: solid;--ty-divide-color: var(--ty-border);--ty-divide-width: var(--ty-border-width);--ty-modal-bg: #ffffff;--ty-modal-color: #111827;--ty-modal-border: #e5e7eb;--ty-modal-backdrop: rgba(0, 0, 0, .5);--ty-modal-backdrop-blur: blur(2px);--ty-modal-border-radius: 16px;--ty-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--ty-modal-duration: .2s;--ty-modal-sm-width: 300px;--ty-modal-md-width: 500px;--ty-modal-lg-width: 700px;--ty-modal-xl-width: 900px;--ty-modal-full-width: 95vw;--ty-modal-full-height: 95vh;--ty-label-color: #374151;--ty-spacing-0: 0;--ty-spacing-px: 1px;--ty-spacing-mini: .125rem;--ty-spacing-1: .25rem;--ty-spacing-2: .5rem;--ty-spacing-3: .75rem;--ty-spacing-4: 1rem;--ty-spacing-5: 1.25rem;--ty-spacing-6: 1.5rem;--ty-spacing-7: 1.75rem;--ty-spacing-8: 2rem;--ty-spacing-9: 2.25rem;--ty-spacing-10: 2.5rem;--ty-spacing-12: 3rem;--ty-spacing-16: 4rem;--ty-spacing-20: 5rem;--ty-spacing-24: 6rem;--ty-radius-none: 0;--ty-radius-sm: .25rem;--ty-radius-base: .375rem;--ty-radius-md: .5rem;--ty-radius-lg: .75rem;--ty-radius-xl: 1rem;--ty-radius-2xl: 1.5rem;--ty-radius-3xl: 2rem;--ty-radius-full: 9999px;--ty-shadow-none: none;--ty-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--ty-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--ty-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ty-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--ty-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--ty-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--ty-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;--ty-font-xxs: .625rem;--ty-font-xs: .75rem;--ty-font-sm: .875rem;--ty-font-base: 1rem;--ty-font-lg: 1.125rem;--ty-font-xl: 1.25rem;--ty-font-2xl: 1.5rem;--ty-font-3xl: 1.875rem;--ty-font-4xl: 2.25rem;--ty-font-5xl: 3rem;--ty-leading-xxs: .9375rem;--ty-leading-xs: 1.05rem;--ty-leading-sm: 1.3125rem;--ty-leading-base: 1.5rem;--ty-leading-lg: 1.6875rem;--ty-leading-xl: 1.75rem;--ty-leading-2xl: 2rem;--ty-leading-3xl: 2.25rem;--ty-leading-4xl: 2.5rem;--ty-leading-5xl: 1;--ty-tracking-xxs: -.015em;--ty-tracking-xs: 0;--ty-tracking-sm: -.013em;--ty-tracking-base: -.011em;--ty-tracking-lg: 0;--ty-tracking-tight: -.022em;--ty-tracking-title: -.012em;--ty-font-thin: 100;--ty-font-light: 300;--ty-font-normal: 400;--ty-font-medium: 510;--ty-font-semibold: 590;--ty-font-bold: 680;--ty-font-extrabold: 800;--ty-weight-action: var(--ty-font-medium);--ty-weight-label: 440;--ty-button-depth: .35;--ty-button-border-l: -.08;--ty-button-border-l-neutral: -.25;--ty-line-height-none: 1;--ty-line-height-tight: 1.25;--ty-line-height-snug: 1.375;--ty-line-height-normal: 1.5;--ty-line-height-relaxed: 1.625;--ty-line-height-loose: 2;--ty-transition-none: none;--ty-transition-all: var(--ty-local-transition, all .15s cubic-bezier(.4, 0, .2, 1));--ty-transition-colors: var(--ty-local-transition, bg-color, border-color, color, fill, stroke .15s cubic-bezier(.4, 0, .2, 1));--ty-transition-shadow: var(--ty-local-transition, box-shadow .15s cubic-bezier(.4, 0, .2, 1));--ty-transition-transform: var(--ty-local-transition, transform .15s cubic-bezier(.4, 0, .2, 1));--ty-size-xs: 1.75rem;--ty-size-sm: 2rem;--ty-size-md: 2.25rem;--ty-size-lg: 2.5rem;--ty-size-xl: 2.75rem;--ty-z-auto: auto;--ty-z-0: 0;--ty-z-10: 10;--ty-z-20: 20;--ty-z-30: 30;--ty-z-40: 40;--ty-z-50: 50;--ty-z-sticky: 1020;--ty-z-fixed: 1030;--ty-z-modal-backdrop: 1040;--ty-z-modal: 1050;--ty-z-popover: 1060;--ty-z-tooltip: 1070;--ty-z-dropdown: 1080;--ty-scroll-shadow-top: radial-gradient( ellipse 100% 30% at center, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0), transparent );--ty-scroll-shadow-bottom: radial-gradient( ellipse 100% 20% at center, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0), transparent );--ty-scroll-shadow-transition: opacity .2s ease-out;--ty-tooltip-bg: #262626;--ty-tooltip-color: #f5f5f5;--ty-tooltip-border: #404040;--ty-calendar-other-month-color: #6b7280}html.dark,html[data-theme=dark]{--ty-weight-action: var(--ty-font-normal);--ty-weight-label: var(--ty-font-normal);--ty-button-border-l: 0;--ty-button-border-l-neutral: .5;--ty-bg-faint: #0f1419;--ty-bg-soft: #111827;--ty-bg: #1f2937;--ty-bg-bold: #374151;--ty-bg-strong: #6b7280;--ty-focus-ring-gap: #1f2937;--ty-scrollbar-thumb: rgba(255, 255, 255, .13);--ty-scrollbar-thumb-hover: rgba(255, 255, 255, .22);--ty-scrollbar-thumb-active: rgba(255, 255, 255, .3);--ty-scrollbar-track: transparent;--ty-scrollbar-track-hover: rgba(255, 255, 255, .04);--ty-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .2);--ty-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px -1px rgba(0, 0, 0, .3);--ty-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .3);--ty-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -4px rgba(0, 0, 0, .3);--ty-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3);--ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .5);--ty-label-color: #d1d5db;--ty-modal-bg: var(--ty-bg-bold);--ty-modal-color: var(--ty-color-neutral-bold);--ty-modal-border: var(--ty-border);--ty-modal-backdrop: rgba(0, 0, 0, .7);--ty-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .2);--ty-scroll-shadow-top: radial-gradient( ellipse 100% 30% at center, rgba(172, 172, 172, .2), rgba(0, 0, 0, 0), transparent );--ty-scroll-shadow-bottom: radial-gradient( ellipse 100% 20% at center, rgba(172, 172, 172, .3), rgba(0, 0, 0, 0), transparent );--ty-calendar-other-month-color: #8a8a8a}::selection{background-color:var(--ty-selection-bg, var(--ty-bg-primary-bold));color:var(--ty-selection-color, var(--ty-text-strong))}::-moz-selection{background-color:var(--ty-selection-bg, var(--ty-color-primary));color:var(--ty-selection-color, var(--ty-text-strong))}pre ::selection,code ::selection,pre::-moz-selection,code::-moz-selection{background-color:var(--ty-color-warning-soft);color:var(--ty-color-neutral-strong)}html.dark pre ::selection,html.dark code ::selection,html.dark pre::-moz-selection,html.dark code::-moz-selection{background-color:var(--ty-color-warning);color:var(--ty-bg-strong)}input::selection,textarea::selection,input::-moz-selection,textarea::-moz-selection{background-color:var(--ty-color-primary);color:#fff}html.dark input::selection,html.dark textarea::selection,html.dark input::-moz-selection,html.dark textarea::-moz-selection{background-color:var(--ty-color-primary-soft);color:var(--ty-color-primary-strong)}.ty-selection-primary ::selection,.ty-selection-primary::-moz-selection{background-color:var(--ty-color-primary-soft);color:var(--ty-color-primary-strong)}.ty-selection-success ::selection,.ty-selection-success::-moz-selection{background-color:var(--ty-color-success-soft);color:var(--ty-color-success-strong)}.ty-selection-warning ::selection,.ty-selection-warning::-moz-selection{background-color:var(--ty-color-warning-soft);color:var(--ty-color-warning-strong)}.ty-selection-danger ::selection,.ty-selection-danger::-moz-selection{background-color:var(--ty-color-danger-soft);color:var(--ty-color-danger-strong)}.ty-selection-neutral ::selection,.ty-selection-neutral::-moz-selection{background-color:var(--ty-color-neutral-soft);color:var(--ty-color-neutral-strong)}html.dark .ty-selection-primary ::selection,html.dark .ty-selection-primary::-moz-selection{background-color:var(--ty-color-primary);color:#fff}html.dark .ty-selection-success ::selection,html.dark .ty-selection-success::-moz-selection{background-color:var(--ty-color-success);color:#fff}html.dark .ty-selection-warning ::selection,html.dark .ty-selection-warning::-moz-selection{background-color:var(--ty-color-warning);color:var(--ty-bg-strong)}html.dark .ty-selection-danger ::selection,html.dark .ty-selection-danger::-moz-selection{background-color:var(--ty-color-danger);color:#fff}html.dark .ty-selection-neutral ::selection,html.dark .ty-selection-neutral::-moz-selection{background-color:var(--ty-color-neutral);color:#fff}html *,html :before,html :after{border-color:var(--ty-border)}.ty-elevated{box-sizing:border-box!important;background-color:var(--ty-surface-elevated)!important;border:var(--ty-elevated-border-width, var(--ty-border-width, 1px)) var(--ty-elevated-border-style, solid) var(--ty-elevated-border, transparent)!important;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a!important;--ty-divide-color: var(--ty-elevated-border)}.ty-floating{box-sizing:border-box!important;background-color:var(--ty-surface-floating)!important;border:var(--ty-floating-border-width, var(--ty-border-width, 1px)) var(--ty-floating-border-style, solid) var(--ty-floating-border, transparent)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a!important;--ty-divide-color: var(--ty-floating-border)}.ty-canvas{box-sizing:border-box!important;background-color:var(--ty-surface-canvas)!important;border:var(--ty-canvas-border-width, var(--ty-border-width, 1px)) var(--ty-canvas-border-style, solid) var(--ty-canvas-border, transparent)!important;--ty-divide-color: var(--ty-canvas-border)}.ty-content{box-sizing:border-box!important;background-color:var(--ty-surface-content)!important;border:var(--ty-content-border-width, var(--ty-border-width, 1px)) var(--ty-content-border-style, solid) var(--ty-content-border, transparent)!important;--ty-divide-color: var(--ty-content-border)}.ty-input{box-sizing:border-box!important;background-color:var(--ty-input-bg)!important;border:var(--ty-input-border-width, var(--ty-border-width, 1px)) var(--ty-input-border-style, solid) var(--ty-input-border, transparent)!important;--ty-divide-color: var(--ty-input-border)}.ty-divide-y>*+*{border-top:var(--ty-divide-width, var(--ty-border-width, 1px)) solid var(--ty-divide-color, var(--ty-border))}.ty-divide-x>*+*{border-left:var(--ty-divide-width, var(--ty-border-width, 1px)) solid var(--ty-divide-color, var(--ty-border))}html.dark .ty-elevated{background-color:var(--ty-surface-elevated)!important;box-shadow:0 1px 3px #0003,0 1px 2px -1px #0003!important}html.dark .ty-floating{background-color:var(--ty-surface-floating)!important;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -2px #0000004d!important}html.dark .ty-high-elevation{background-color:var(--ty-surface-floating)!important;box-shadow:0 10px 15px -3px #0006,0 4px 6px -4px #0006!important}html.dark .ty-sunken{background-color:var(--ty-surface-input)!important;box-shadow:inset 0 1px 2px #0000001a!important}.ty-bg-primary{background-color:var(--ty-bg-primary)}.ty-bg-primary\+{background-color:var(--ty-bg-primary-bold)}.ty-bg-primary-{background-color:var(--ty-bg-primary-soft)}.ty-bg-success{background-color:var(--ty-bg-success)}.ty-bg-success\+{background-color:var(--ty-bg-success-bold)}.ty-bg-success-{background-color:var(--ty-bg-success-soft)}.ty-bg-danger{background-color:var(--ty-bg-danger)}.ty-bg-danger\+{background-color:var(--ty-bg-danger-bold)}.ty-bg-danger-{background-color:var(--ty-bg-danger-soft)}.ty-bg-warning{background-color:var(--ty-bg-warning)}.ty-bg-warning\+{background-color:var(--ty-bg-warning-bold)}.ty-bg-warning-{background-color:var(--ty-bg-warning-soft)}.ty-bg-neutral{background-color:var(--ty-bg-neutral)}.ty-bg-neutral\+{background-color:var(--ty-bg-neutral-bold)}.ty-bg-neutral-{background-color:var(--ty-bg-neutral-soft)}.ty-text{color:var(--ty-text)!important}.ty-text\+{color:var(--ty-text-bold)!important}.ty-text\+\+{color:var(--ty-text-strong)!important}.ty-text-{color:var(--ty-text-soft)!important}.ty-text--{color:var(--ty-text-faint)!important}.ty-text-primary\+\+{color:var(--ty-color-primary-strong)!important}.ty-text-primary\+{color:var(--ty-color-primary-bold)!important}.ty-text-primary{color:var(--ty-color-primary)!important}.ty-text-primary-{color:var(--ty-color-primary-soft)!important}.ty-text-primary--{color:var(--ty-color-primary-faint)!important}.ty-text-success\+\+{color:var(--ty-color-success-strong)!important}.ty-text-success\+{color:var(--ty-color-success-bold)!important}.ty-text-success{color:var(--ty-color-success)!important}.ty-text-success-{color:var(--ty-color-success-soft)!important}.ty-text-success--{color:var(--ty-color-success-faint)!important}.ty-text-danger\+\+{color:var(--ty-color-danger-strong)!important}.ty-text-danger\+{color:var(--ty-color-danger-bold)!important}.ty-text-danger{color:var(--ty-color-danger)!important}.ty-text-danger-{color:var(--ty-color-danger-soft)!important}.ty-text-danger--{color:var(--ty-color-danger-faint)!important}.ty-text-warning\+\+{color:var(--ty-color-warning-strong)!important}.ty-text-warning\+{color:var(--ty-color-warning-bold)!important}.ty-text-warning{color:var(--ty-color-warning)!important}.ty-text-warning-{color:var(--ty-color-warning-soft)!important}.ty-text-warning--{color:var(--ty-color-warning-faint)!important}.ty-text-neutral\+\+{color:var(--ty-color-neutral-strong)!important}.ty-text-neutral\+{color:var(--ty-color-neutral-bold)!important}.ty-text-neutral{color:var(--ty-color-neutral)!important}.ty-text-neutral-{color:var(--ty-color-neutral-soft)!important}.ty-text-neutral--{color:var(--ty-color-neutral-faint)!important}.ty-border{border-color:var(--ty-border)!important}.ty-border\+{border-color:var(--ty-border-bold)!important}.ty-border\+\+{border-color:var(--ty-border-strong)!important}.ty-border-{border-color:var(--ty-border-soft)}.ty-border--{border-color:var(--ty-border-faint)}.ty-border-primary{border-color:var(--ty-border-primary)}.ty-border-success{border-color:var(--ty-border-success)}.ty-border-danger{border-color:var(--ty-border-danger)}.ty-border-warning{border-color:var(--ty-border-warning)}.ty-border-neutral{border-color:var(--ty-border-neutral)}.ty-card{background-color:var(--ty-surface-elevated);color:var(--ty-color-neutral-bold)}.ty-card-elevated{background-color:var(--ty-surface-floating);box-shadow:var(--ty-shadow-md)}.ty-input-bg{background-color:var(--ty-input-bg)}.ty-input-border{border-color:var(--ty-input-border)}.ty-input-focus{border-color:var(--ty-input-border-focus)}.ty-modal-bg{background-color:var(--ty-modal-bg)}.ty-modal-backdrop{background-color:var(--ty-modal-backdrop)}.hover\:ty-bg-neutral--:hover{background-color:var(--ty-bg-neutral-faint)!important}.hover\:ty-bg-neutral-:hover{background-color:var(--ty-bg-neutral-soft)!important}.hover\:ty-bg-neutral:hover{background-color:var(--ty-bg-neutral)!important}.hover\:ty-bg-neutral\+:hover{background-color:var(--ty-bg-neutral-bold)!important}.hover\:ty-bg-neutral\+\+:hover{background-color:var(--ty-bg-neutral-strong)!important}.hover\:ty-bg-primary:hover{background-color:var(--ty-bg-primary)!important}.hover\:ty-bg-primary\+:hover{background-color:var(--ty-bg-primary-bold)!important}.hover\:ty-bg-success:hover{background-color:var(--ty-bg-success)!important}.hover\:ty-bg-success\+:hover{background-color:var(--ty-bg-success-bold)!important}.hover\:ty-bg-danger:hover{background-color:var(--ty-bg-danger)!important}.hover\:ty-bg-danger\+:hover{background-color:var(--ty-bg-danger-bold)!important}.hover\:ty-bg-danger-:hover{background-color:var(--ty-bg-danger-soft)!important}.hover\:ty-text:hover{color:var(--ty-text)!important}.hover\:ty-text\+:hover{color:var(--ty-text-bold)!important}.hover\:ty-text\+\+:hover{color:var(--ty-text-strong)!important}.hover\:ty-text-:hover{color:var(--ty-text-soft)!important}.hover\:ty-text--:hover{color:var(--ty-text-faint)!important}.hover\:ty-text-primary\+\+:hover{color:var(--ty-color-primary-strong)!important}.hover\:ty-text-primary\+:hover{color:var(--ty-color-primary-bold)!important}.hover\:ty-text-primary:hover{color:var(--ty-color-primary)!important}.hover\:ty-text-primary-:hover{color:var(--ty-color-primary-soft)!important}.hover\:ty-text-primary--:hover{color:var(--ty-color-primary-faint)!important}.hover\:ty-text-success\+\+:hover{color:var(--ty-color-success-strong)!important}.hover\:ty-text-success\+:hover{color:var(--ty-color-success-bold)!important}.hover\:ty-text-success:hover{color:var(--ty-color-success)!important}.hover\:ty-text-success-:hover{color:var(--ty-color-success-soft)!important}.hover\:ty-text-success--:hover{color:var(--ty-color-success-faint)!important}.hover\:ty-text-danger\+\+:hover{color:var(--ty-color-danger-strong)!important}.hover\:ty-text-danger\+:hover{color:var(--ty-color-danger-bold)!important}.hover\:ty-text-danger:hover{color:var(--ty-color-danger)!important}.hover\:ty-text-danger-:hover{color:var(--ty-color-danger-soft)!important}.hover\:ty-text-danger--:hover{color:var(--ty-color-danger-faint)!important}.hover\:ty-text-warning\+\+:hover{color:var(--ty-color-warning-strong)!important}.hover\:ty-text-warning\+:hover{color:var(--ty-color-warning-bold)!important}.hover\:ty-text-warning:hover{color:var(--ty-color-warning)!important}.hover\:ty-text-warning-:hover{color:var(--ty-color-warning-soft)!important}.hover\:ty-text-warning--:hover{color:var(--ty-color-warning-faint)!important}.hover\:ty-text-neutral\+\+:hover{color:var(--ty-color-neutral-strong)!important}.hover\:ty-text-neutral+:hover{color:var(--ty-color-neutral-bold)!important}.hover\:ty-text-neutral:hover{color:var(--ty-color-neutral)!important}.hover\:ty-text-neutral-:hover{color:var(--ty-color-neutral-soft)!important}.hover\:ty-text-neutral--:hover{color:var(--ty-color-neutral-faint)!important}.hover\:ty-border\+\+:hover{border-color:var(--ty-border-strong)!important}.hover\:ty-border\+:hover{border-color:var(--ty-border-bold)!important}.hover\:ty-border:hover{border-color:var(--ty-border)!important}.hover\:ty-border-:hover{border-color:var(--ty-border-soft)!important}.hover\:ty-border--:hover{border-color:var(--ty-border-faint)!important}.hover\:ty-border-primary:hover{border-color:var(--ty-border-primary)!important}.hover\:ty-border-success:hover{border-color:var(--ty-border-success)!important}.hover\:ty-border-danger:hover{border-color:var(--ty-border-danger)!important}.hover\:ty-border-warning:hover{border-color:var(--ty-border-warning)!important}.hover\:ty-border-neutral:hover{border-color:var(--ty-border-neutral)!important}.focus\:ty-border\+\+:focus{border-color:var(--ty-border-strong)!important}.focus\:ty-border+:focus{border-color:var(--ty-border-bold)!important}.focus\:ty-border:focus{border-color:var(--ty-border)!important}.focus\:ty-border-:focus{border-color:var(--ty-border-soft)!important}.focus\:ty-border--:focus{border-color:var(--ty-border-faint)!important}.focus\:ty-border-primary:focus{border-color:var(--ty-border-primary)!important}.focus\:ty-border-success:focus{border-color:var(--ty-border-success)!important}.focus\:ty-border-danger:focus{border-color:var(--ty-border-danger)!important}.focus\:ty-border-warning:focus{border-color:var(--ty-border-warning)!important}.focus\:ty-border-neutral:focus{border-color:var(--ty-border-neutral)!important}@media(min-width:640px){.sm\:ty-bg-primary{background-color:var(--ty-bg-primary)}.sm\:ty-text-primary{color:var(--ty-color-primary)}}@media(min-width:768px){.md\:ty-bg-primary{background-color:var(--ty-bg-primary)}.md\:ty-text-primary{color:var(--ty-color-primary)}}@media(min-width:1024px){.lg\:ty-bg-primary{background-color:var(--ty-bg-primary)}.lg\:ty-text-primary{color:var(--ty-color-primary)}}@media(max-width:768px){:root{--ty-font-sm: 1rem}}body{transition:scale var(--ty-modal-duration, .2s) ease-out}html.ty-modal-zoom body{scale:.99;transform-origin:50% 50%}