/* =================================================================
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;
  }
}