/* Generated by @werewolf-ui/tokens. Do not edit. */
/* Use: @import "tailwindcss"; then @import this file. Dark is the default; set data-theme="light" on any element to switch that subtree. */

@theme {
  --color-*: initial;
  --font-*: initial;
  --font-weight-*: initial;
  --text-*: initial;
  --radius-*: initial;
  --shadow-*: initial;
  --inset-shadow-*: initial;
  --drop-shadow-*: initial;
  --text-shadow-*: initial;
  --ease-*: initial;
  --blur-*: initial;
  --opacity-*: initial;
  --radius-none: 0px;
  --radius-inner: 4px;
  --radius-item: 7px;
  --radius-element: 8px;
  --radius-container: 12px;
  --radius-page: 16px;
  --radius-full: 9999px;
  --size-element-sm: 28px;
  --size-element-md: 32px;
  --size-element-lg: 36px;
  --size-element-xl: 44px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --scale-pressed: 0.96;
  --opacity-disabled: 0.4;
  --opacity-pending: 0.6;
  --opacity-subtle: 0.3;
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 24px;
  --blur-material-thin: 12px;
  --blur-material-thick: 20px;
  --blur-material-refract: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

@theme inline {
  --background-color-background-page: var(--color-background-page);
  --background-color-background-surface: var(--color-background-surface);
  --background-color-background-raised: var(--color-background-raised);
  --background-color-background-sunken: var(--color-background-sunken);
  --background-color-background-inverse: var(--color-background-inverse);
  --background-color-background-disabled: var(--color-background-disabled);
  --background-color-background-gray: var(--color-background-gray);
  --background-color-background-red: var(--color-background-red);
  --background-color-background-orange: var(--color-background-orange);
  --background-color-background-yellow: var(--color-background-yellow);
  --background-color-background-green: var(--color-background-green);
  --background-color-background-teal: var(--color-background-teal);
  --background-color-background-blue: var(--color-background-blue);
  --background-color-background-purple: var(--color-background-purple);
  --background-color-background-pink: var(--color-background-pink);
  --background-color-background-danger: var(--color-background-danger);
  --background-color-background-success: var(--color-background-success);
  --background-color-background-warning: var(--color-background-warning);
  --background-color-background-info: var(--color-background-info);
  --background-color-accent: var(--color-accent);
  --background-color-accent-muted: var(--color-accent-muted);
  --background-color-overlay-scrim: var(--color-overlay-scrim);
  --background-color-gray: var(--color-gray);
  --background-color-red: var(--color-red);
  --background-color-orange: var(--color-orange);
  --background-color-yellow: var(--color-yellow);
  --background-color-green: var(--color-green);
  --background-color-teal: var(--color-teal);
  --background-color-blue: var(--color-blue);
  --background-color-purple: var(--color-purple);
  --background-color-pink: var(--color-pink);
  --background-color-danger: var(--color-danger);
  --background-color-success: var(--color-success);
  --background-color-warning: var(--color-warning);
  --background-color-info: var(--color-info);
  --text-color-text-primary: var(--color-text-primary);
  --text-color-text-secondary: var(--color-text-secondary);
  --text-color-text-tertiary: var(--color-text-tertiary);
  --text-color-text-disabled: var(--color-text-disabled);
  --text-color-text-inverse: var(--color-text-inverse);
  --text-color-text-accent: var(--color-text-accent);
  --text-color-text-on-accent: var(--color-text-on-accent);
  --text-color-text-on-muted: var(--color-text-on-muted);
  --text-color-text-gray: var(--color-text-gray);
  --text-color-text-red: var(--color-text-red);
  --text-color-text-orange: var(--color-text-orange);
  --text-color-text-yellow: var(--color-text-yellow);
  --text-color-text-green: var(--color-text-green);
  --text-color-text-teal: var(--color-text-teal);
  --text-color-text-blue: var(--color-text-blue);
  --text-color-text-purple: var(--color-text-purple);
  --text-color-text-pink: var(--color-text-pink);
  --text-color-text-danger: var(--color-text-danger);
  --text-color-text-success: var(--color-text-success);
  --text-color-text-warning: var(--color-text-warning);
  --text-color-text-info: var(--color-text-info);
  --text-color-text-on-danger: var(--color-text-on-danger);
  --text-color-text-on-success: var(--color-text-on-success);
  --text-color-text-on-warning: var(--color-text-on-warning);
  --text-color-text-on-info: var(--color-text-on-info);
  --text-color-text-on-gray: var(--color-text-on-gray);
  --text-color-text-on-red: var(--color-text-on-red);
  --text-color-text-on-orange: var(--color-text-on-orange);
  --text-color-text-on-yellow: var(--color-text-on-yellow);
  --text-color-text-on-green: var(--color-text-on-green);
  --text-color-text-on-teal: var(--color-text-on-teal);
  --text-color-text-on-blue: var(--color-text-on-blue);
  --text-color-text-on-purple: var(--color-text-on-purple);
  --text-color-text-on-pink: var(--color-text-on-pink);
  --text-color-icon-primary: var(--color-icon-primary);
  --text-color-icon-secondary: var(--color-icon-secondary);
  --text-color-icon-disabled: var(--color-icon-disabled);
  --text-color-icon-accent: var(--color-icon-accent);
  --text-color-icon-on-accent: var(--color-icon-on-accent);
  --text-color-icon-on-danger: var(--color-icon-on-danger);
  --text-color-icon-on-success: var(--color-icon-on-success);
  --text-color-icon-on-warning: var(--color-icon-on-warning);
  --text-color-icon-on-info: var(--color-icon-on-info);
  --border-color-border: var(--color-border);
  --border-color-border-strong: var(--color-border-strong);
  --border-color-border-control: var(--color-border-control);
  --border-color-border-gray: var(--color-border-gray);
  --border-color-border-red: var(--color-border-red);
  --border-color-border-orange: var(--color-border-orange);
  --border-color-border-yellow: var(--color-border-yellow);
  --border-color-border-green: var(--color-border-green);
  --border-color-border-teal: var(--color-border-teal);
  --border-color-border-blue: var(--color-border-blue);
  --border-color-border-purple: var(--color-border-purple);
  --border-color-border-pink: var(--color-border-pink);
  --border-color-border-danger: var(--color-border-danger);
  --border-color-border-success: var(--color-border-success);
  --border-color-border-warning: var(--color-border-warning);
  --border-color-border-info: var(--color-border-info);
  --border-color-focus-ring: var(--color-focus-ring);
  --outline-color-focus-ring: var(--color-focus-ring);
  --ring-color-border: var(--color-border);
  --ring-color-border-strong: var(--color-border-strong);
  --ring-color-border-control: var(--color-border-control);
  --ring-color-border-gray: var(--color-border-gray);
  --ring-color-border-red: var(--color-border-red);
  --ring-color-border-orange: var(--color-border-orange);
  --ring-color-border-yellow: var(--color-border-yellow);
  --ring-color-border-green: var(--color-border-green);
  --ring-color-border-teal: var(--color-border-teal);
  --ring-color-border-blue: var(--color-border-blue);
  --ring-color-border-purple: var(--color-border-purple);
  --ring-color-border-pink: var(--color-border-pink);
  --ring-color-border-danger: var(--color-border-danger);
  --ring-color-border-success: var(--color-border-success);
  --ring-color-border-warning: var(--color-border-warning);
  --ring-color-border-info: var(--color-border-info);
  --ring-color-focus-ring: var(--color-focus-ring);
  --placeholder-color-text-primary: var(--color-text-primary);
  --placeholder-color-text-secondary: var(--color-text-secondary);
  --placeholder-color-text-tertiary: var(--color-text-tertiary);
  --placeholder-color-text-disabled: var(--color-text-disabled);
  --placeholder-color-text-inverse: var(--color-text-inverse);
  --placeholder-color-text-accent: var(--color-text-accent);
  --placeholder-color-text-on-accent: var(--color-text-on-accent);
  --placeholder-color-text-on-muted: var(--color-text-on-muted);
  --placeholder-color-text-gray: var(--color-text-gray);
  --placeholder-color-text-red: var(--color-text-red);
  --placeholder-color-text-orange: var(--color-text-orange);
  --placeholder-color-text-yellow: var(--color-text-yellow);
  --placeholder-color-text-green: var(--color-text-green);
  --placeholder-color-text-teal: var(--color-text-teal);
  --placeholder-color-text-blue: var(--color-text-blue);
  --placeholder-color-text-purple: var(--color-text-purple);
  --placeholder-color-text-pink: var(--color-text-pink);
  --placeholder-color-text-danger: var(--color-text-danger);
  --placeholder-color-text-success: var(--color-text-success);
  --placeholder-color-text-warning: var(--color-text-warning);
  --placeholder-color-text-info: var(--color-text-info);
  --placeholder-color-text-on-danger: var(--color-text-on-danger);
  --placeholder-color-text-on-success: var(--color-text-on-success);
  --placeholder-color-text-on-warning: var(--color-text-on-warning);
  --placeholder-color-text-on-info: var(--color-text-on-info);
  --placeholder-color-text-on-gray: var(--color-text-on-gray);
  --placeholder-color-text-on-red: var(--color-text-on-red);
  --placeholder-color-text-on-orange: var(--color-text-on-orange);
  --placeholder-color-text-on-yellow: var(--color-text-on-yellow);
  --placeholder-color-text-on-green: var(--color-text-on-green);
  --placeholder-color-text-on-teal: var(--color-text-on-teal);
  --placeholder-color-text-on-blue: var(--color-text-on-blue);
  --placeholder-color-text-on-purple: var(--color-text-on-purple);
  --placeholder-color-text-on-pink: var(--color-text-on-pink);
  --fill-accent: var(--color-accent);
  --fill-gray: var(--color-gray);
  --fill-red: var(--color-red);
  --fill-orange: var(--color-orange);
  --fill-yellow: var(--color-yellow);
  --fill-green: var(--color-green);
  --fill-teal: var(--color-teal);
  --fill-blue: var(--color-blue);
  --fill-purple: var(--color-purple);
  --fill-pink: var(--color-pink);
  --fill-danger: var(--color-danger);
  --fill-success: var(--color-success);
  --fill-warning: var(--color-warning);
  --fill-info: var(--color-info);
  --fill-icon-primary: var(--color-icon-primary);
  --fill-icon-secondary: var(--color-icon-secondary);
  --fill-icon-disabled: var(--color-icon-disabled);
  --fill-icon-accent: var(--color-icon-accent);
  --fill-icon-on-accent: var(--color-icon-on-accent);
  --fill-icon-on-danger: var(--color-icon-on-danger);
  --fill-icon-on-success: var(--color-icon-on-success);
  --fill-icon-on-warning: var(--color-icon-on-warning);
  --fill-icon-on-info: var(--color-icon-on-info);
  --stroke-accent: var(--color-accent);
  --stroke-gray: var(--color-gray);
  --stroke-red: var(--color-red);
  --stroke-orange: var(--color-orange);
  --stroke-yellow: var(--color-yellow);
  --stroke-green: var(--color-green);
  --stroke-teal: var(--color-teal);
  --stroke-blue: var(--color-blue);
  --stroke-purple: var(--color-purple);
  --stroke-pink: var(--color-pink);
  --stroke-danger: var(--color-danger);
  --stroke-success: var(--color-success);
  --stroke-warning: var(--color-warning);
  --stroke-info: var(--color-info);
  --stroke-icon-primary: var(--color-icon-primary);
  --stroke-icon-secondary: var(--color-icon-secondary);
  --stroke-icon-disabled: var(--color-icon-disabled);
  --stroke-icon-accent: var(--color-icon-accent);
  --stroke-icon-on-accent: var(--color-icon-on-accent);
  --stroke-icon-on-danger: var(--color-icon-on-danger);
  --stroke-icon-on-success: var(--color-icon-on-success);
  --stroke-icon-on-warning: var(--color-icon-on-warning);
  --stroke-icon-on-info: var(--color-icon-on-info);
  --stroke-border: var(--color-border);
  --stroke-border-strong: var(--color-border-strong);
  --stroke-border-control: var(--color-border-control);
  --stroke-border-gray: var(--color-border-gray);
  --stroke-border-red: var(--color-border-red);
  --stroke-border-orange: var(--color-border-orange);
  --stroke-border-yellow: var(--color-border-yellow);
  --stroke-border-green: var(--color-border-green);
  --stroke-border-teal: var(--color-border-teal);
  --stroke-border-blue: var(--color-border-blue);
  --stroke-border-purple: var(--color-border-purple);
  --stroke-border-pink: var(--color-border-pink);
  --stroke-border-danger: var(--color-border-danger);
  --stroke-border-success: var(--color-border-success);
  --stroke-border-warning: var(--color-border-warning);
  --stroke-border-info: var(--color-border-info);
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-md: var(--font-size-md);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-input: var(--font-size-input);
  --text-heading-1: var(--heading-1-size);
  --text-heading-1--line-height: var(--heading-1-leading);
  --text-heading-1--font-weight: var(--heading-1-weight);
  --text-heading-2: var(--heading-2-size);
  --text-heading-2--line-height: var(--heading-2-leading);
  --text-heading-2--font-weight: var(--heading-2-weight);
  --text-heading-3: var(--heading-3-size);
  --text-heading-3--line-height: var(--heading-3-leading);
  --text-heading-3--font-weight: var(--heading-3-weight);
  --text-body: var(--body-size);
  --text-body--line-height: var(--body-leading);
  --text-body--font-weight: var(--body-weight);
  --height-element-sm: var(--size-element-sm);
  --width-element-sm: var(--size-element-sm);
  --height-element-md: var(--size-element-md);
  --width-element-md: var(--size-element-md);
  --height-element-lg: var(--size-element-lg);
  --width-element-lg: var(--size-element-lg);
  --height-element-xl: var(--size-element-xl);
  --width-element-xl: var(--size-element-xl);
  --padding-xs: var(--spacing-xs);
  --margin-xs: var(--spacing-xs);
  --gap-xs: var(--spacing-xs);
  --space-xs: var(--spacing-xs);
  --inset-xs: var(--spacing-xs);
  --padding-sm: var(--spacing-sm);
  --margin-sm: var(--spacing-sm);
  --gap-sm: var(--spacing-sm);
  --space-sm: var(--spacing-sm);
  --inset-sm: var(--spacing-sm);
  --padding-md: var(--spacing-md);
  --margin-md: var(--spacing-md);
  --gap-md: var(--spacing-md);
  --space-md: var(--spacing-md);
  --inset-md: var(--spacing-md);
  --padding-lg: var(--spacing-lg);
  --margin-lg: var(--spacing-lg);
  --gap-lg: var(--spacing-lg);
  --space-lg: var(--spacing-lg);
  --inset-lg: var(--spacing-lg);
  --padding-xl: var(--spacing-xl);
  --margin-xl: var(--spacing-xl);
  --gap-xl: var(--spacing-xl);
  --space-xl: var(--spacing-xl);
  --inset-xl: var(--spacing-xl);
  --padding-2xl: var(--spacing-2xl);
  --margin-2xl: var(--spacing-2xl);
  --gap-2xl: var(--spacing-2xl);
  --space-2xl: var(--spacing-2xl);
  --inset-2xl: var(--spacing-2xl);
  --padding-3xl: var(--spacing-3xl);
  --margin-3xl: var(--spacing-3xl);
  --gap-3xl: var(--spacing-3xl);
  --space-3xl: var(--spacing-3xl);
  --inset-3xl: var(--spacing-3xl);
  --padding-4xl: var(--spacing-4xl);
  --margin-4xl: var(--spacing-4xl);
  --gap-4xl: var(--spacing-4xl);
  --space-4xl: var(--spacing-4xl);
  --inset-4xl: var(--spacing-4xl);
  --transition-duration-fast: var(--duration-fast);
  --transition-duration-medium: var(--duration-medium);
  --transition-duration-slow: var(--duration-slow);
  --default-border-width: var(--border-width);
  --default-transition-duration: var(--duration-fast);
  --default-transition-timing-function: var(--ease-standard);
  --default-font-family: var(--font-family-sans);
  --default-mono-font-family: var(--font-family-mono);
  --animate-pulse: pulse var(--duration-loop) ease-in-out infinite;
}

:root {
  --border-width: 1px;
  --outline-width-focus-ring: 2px;
  --outline-offset-focus-ring: 2px;
  --radius-none: 0px;
  --radius-inner: 4px;
  --radius-item: 7px;
  --radius-element: 8px;
  --radius-container: 12px;
  --radius-page: 16px;
  --radius-full: 9999px;
  --size-element-sm: 28px;
  --size-element-md: 32px;
  --size-element-lg: 36px;
  --size-element-xl: 44px;
  --size-target-min: 24px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --duration-fast: 160ms;
  --duration-medium: 250ms;
  --duration-slow: 400ms;
  --duration-loop: 2000ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --scale-pressed: 0.96;
  --opacity-disabled: 0.4;
  --opacity-pending: 0.6;
  --opacity-subtle: 0.3;
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 24px;
  --blur-material-thin: 12px;
  --blur-material-thick: 20px;
  --blur-material-refract: 20px;
  --saturate-material-thin: 1.4;
  --saturate-material-thick: 1.6;
  --saturate-material-refract: 1.8;
  --font-family-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-input: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --heading-1-size: 32px;
  --heading-1-weight: 500;
  --heading-1-leading: 1.2;
  --heading-2-size: 24px;
  --heading-2-weight: 500;
  --heading-2-leading: 1.25;
  --heading-3-size: 18px;
  --heading-3-weight: 500;
  --heading-3-leading: 1.3;
  --body-size: 14px;
  --body-weight: 400;
  --body-leading: 1.5;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --color-background-page: #0a0a0a;
  --color-background-surface: #111111;
  --color-background-raised: #181818;
  --color-background-sunken: #060606;
  --color-background-inverse: #f5f5f5;
  --color-background-disabled: #1e1e1e;
  --color-background-material-thin: #111111d9;
  --color-background-material-thick: #181818e6;
  --color-background-material-refract: #181818e6;
  --color-background-gray: #222222;
  --color-background-red: #361715;
  --color-background-orange: #341a0b;
  --color-background-yellow: #2a2009;
  --color-background-green: #112716;
  --color-background-teal: #0e2625;
  --color-background-blue: #112238;
  --color-background-purple: #251c36;
  --color-background-pink: #331725;
  --color-background-danger: #361715;
  --color-background-success: #112716;
  --color-background-warning: #2a2009;
  --color-background-info: #112238;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a4a4a4;
  --color-text-tertiary: #747474;
  --color-text-disabled: #484848;
  --color-text-inverse: #171717;
  --color-text-accent: #f5f5f5;
  --color-text-on-accent: #0a0a0a;
  --color-text-on-muted: #f5f5f5;
  --color-text-gray: #b6b6b6;
  --color-text-red: #ff9992;
  --color-text-orange: #ff9d64;
  --color-text-yellow: #edb417;
  --color-text-green: #4dcd73;
  --color-text-teal: #35c9c2;
  --color-text-blue: #82b9ff;
  --color-text-purple: #c6a5ff;
  --color-text-pink: #ff92c8;
  --color-text-danger: #ff9992;
  --color-text-success: #4dcd73;
  --color-text-warning: #edb417;
  --color-text-info: #82b9ff;
  --color-text-on-danger: #ffffff;
  --color-text-on-success: #0a0a0a;
  --color-text-on-warning: #0a0a0a;
  --color-text-on-info: #ffffff;
  --color-text-on-gray: #ffffff;
  --color-text-on-red: #0a0a0a;
  --color-text-on-orange: #0a0a0a;
  --color-text-on-yellow: #0a0a0a;
  --color-text-on-green: #0a0a0a;
  --color-text-on-teal: #0a0a0a;
  --color-text-on-blue: #0a0a0a;
  --color-text-on-purple: #ffffff;
  --color-text-on-pink: #0a0a0a;
  --color-icon-primary: #f5f5f5;
  --color-icon-secondary: #a4a4a4;
  --color-icon-disabled: #484848;
  --color-icon-accent: #f5f5f5;
  --color-icon-on-accent: #0a0a0a;
  --color-icon-on-danger: #ffffff;
  --color-icon-on-success: #0a0a0a;
  --color-icon-on-warning: #0a0a0a;
  --color-icon-on-info: #ffffff;
  --color-border: #262626;
  --color-border-strong: #404040;
  --color-border-control: #656565;
  --color-border-material-edge: #ffffff1f;
  --color-border-gray: #656565;
  --color-border-red: #9a4f4a;
  --color-border-orange: #925531;
  --color-border-yellow: #7a6129;
  --color-border-green: #3c7048;
  --color-border-teal: #356e6a;
  --color-border-blue: #3d669a;
  --color-border-purple: #715998;
  --color-border-pink: #934f71;
  --color-border-danger: #9a4f4a;
  --color-border-success: #3c7048;
  --color-border-warning: #7a6129;
  --color-border-info: #3d669a;
  --color-focus-ring: #f5f5f5;
  --color-accent: #f5f5f5;
  --color-accent-muted: #222222;
  --color-overlay-hover: #ffffff0f;
  --color-overlay-pressed: #ffffff1a;
  --color-overlay-scrim: #00000099;
  --color-overlay-hover-on-accent: #00000012;
  --color-overlay-pressed-on-accent: #00000024;
  --color-overlay-hover-on-danger: #0000001f;
  --color-overlay-pressed-on-danger: #0000003b;
  --color-overlay-hover-on-success: #ffffff2b;
  --color-overlay-pressed-on-success: #ffffff52;
  --color-overlay-hover-on-warning: #00000017;
  --color-overlay-pressed-on-warning: #0000002b;
  --color-overlay-hover-on-info: #0000001f;
  --color-overlay-pressed-on-info: #0000003d;
  --color-overlay-highlight-on-accent: #ffffff33;
  --color-overlay-shade-on-accent: #00000033;
  --color-overlay-highlight-on-danger: #ffffff00;
  --color-overlay-shade-on-danger: #00000033;
  --color-overlay-highlight-on-material: #ffffff29;
  --color-gray: #747474;
  --color-red: #e72c35;
  --color-orange: #ec6f00;
  --color-yellow: #edb417;
  --color-green: #17a750;
  --color-teal: #00a59e;
  --color-blue: #127eee;
  --color-purple: #914de6;
  --color-pink: #e652a3;
  --color-danger: #e42732;
  --color-success: #17a750;
  --color-warning: #edb417;
  --color-info: #0075e2;
  --shadow-low: 0px 1px 3px 0px #00000066, inset 0px 1px 0px 0px #ffffff1a;
  --shadow-med: 0px 4px 16px 0px #00000080, inset 0px 1px 0px 0px #ffffff1a;
  --shadow-high: 0px 16px 40px 0px #00000099, inset 0px 1px 0px 0px #ffffff1a;
  --werewolf-shadow-low: 0px 1px 3px 0px #00000066;
  --werewolf-shadow-med: 0px 4px 16px 0px #00000080;
  --werewolf-shadow-high: 0px 16px 40px 0px #00000099;
  --werewolf-shadow-edge-default: inset 0px 1px 0px 0px #ffffff1a;
}

[data-theme="light"] {
  color-scheme: light;
  --color-background-page: #ffffff;
  --color-background-surface: #fafafa;
  --color-background-raised: #ffffff;
  --color-background-sunken: #f4f4f4;
  --color-background-inverse: #171717;
  --color-background-disabled: #ededed;
  --color-background-material-thin: #fafafae6;
  --color-background-material-thick: #ffffffd9;
  --color-background-material-refract: #ffffffd9;
  --color-background-gray: #eeeeee;
  --color-background-red: #ffe9e6;
  --color-background-orange: #ffeade;
  --color-background-yellow: #fbedd1;
  --color-background-green: #dbf7e0;
  --color-background-teal: #d9f5f3;
  --color-background-blue: #e4f0ff;
  --color-background-purple: #f1ebff;
  --color-background-pink: #ffe7f1;
  --color-background-danger: #ffe9e6;
  --color-background-success: #dbf7e0;
  --color-background-warning: #fbedd1;
  --color-background-info: #e4f0ff;
  --color-text-primary: #171717;
  --color-text-secondary: #5d5d5d;
  --color-text-tertiary: #868686;
  --color-text-disabled: #b7b7b7;
  --color-text-inverse: #fafafa;
  --color-text-accent: #111111;
  --color-text-on-accent: #ffffff;
  --color-text-on-muted: #111111;
  --color-text-gray: #606060;
  --color-text-red: #c3001f;
  --color-text-orange: #9d4800;
  --color-text-yellow: #7b5c00;
  --color-text-green: #007132;
  --color-text-teal: #006d69;
  --color-text-blue: #0060bb;
  --color-text-purple: #7f37d0;
  --color-text-pink: #b31a77;
  --color-text-danger: #c3001f;
  --color-text-success: #007132;
  --color-text-warning: #7b5c00;
  --color-text-info: #0060bb;
  --color-text-on-danger: #ffffff;
  --color-text-on-success: #0a0a0a;
  --color-text-on-warning: #0a0a0a;
  --color-text-on-info: #ffffff;
  --color-text-on-gray: #ffffff;
  --color-text-on-red: #0a0a0a;
  --color-text-on-orange: #0a0a0a;
  --color-text-on-yellow: #0a0a0a;
  --color-text-on-green: #0a0a0a;
  --color-text-on-teal: #0a0a0a;
  --color-text-on-blue: #0a0a0a;
  --color-text-on-purple: #ffffff;
  --color-text-on-pink: #0a0a0a;
  --color-icon-primary: #171717;
  --color-icon-secondary: #5d5d5d;
  --color-icon-disabled: #b7b7b7;
  --color-icon-accent: #111111;
  --color-icon-on-accent: #ffffff;
  --color-icon-on-danger: #ffffff;
  --color-icon-on-success: #0a0a0a;
  --color-icon-on-warning: #0a0a0a;
  --color-icon-on-info: #ffffff;
  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;
  --color-border-control: #8d8d8d;
  --color-border-material-edge: #ffffff99;
  --color-border-gray: #8d8d8d;
  --color-border-red: #c77871;
  --color-border-orange: #bf7e5a;
  --color-border-yellow: #a48a53;
  --color-border-green: #64996f;
  --color-border-teal: #5e9793;
  --color-border-blue: #658fc6;
  --color-border-purple: #9982c4;
  --color-border-pink: #c0779a;
  --color-border-danger: #c77871;
  --color-border-success: #64996f;
  --color-border-warning: #a48a53;
  --color-border-info: #658fc6;
  --color-focus-ring: #111111;
  --color-accent: #111111;
  --color-accent-muted: #eeeeee;
  --color-overlay-hover: #0000000a;
  --color-overlay-pressed: #00000014;
  --color-overlay-scrim: #00000066;
  --color-overlay-hover-on-accent: #ffffff0d;
  --color-overlay-pressed-on-accent: #ffffff1a;
  --color-overlay-hover-on-danger: #0000001f;
  --color-overlay-pressed-on-danger: #0000003b;
  --color-overlay-hover-on-success: #ffffff2b;
  --color-overlay-pressed-on-success: #ffffff52;
  --color-overlay-hover-on-warning: #ffffff29;
  --color-overlay-pressed-on-warning: #ffffff52;
  --color-overlay-hover-on-info: #0000001f;
  --color-overlay-pressed-on-info: #0000003d;
  --color-overlay-highlight-on-accent: #ffffff33;
  --color-overlay-shade-on-accent: #00000033;
  --color-overlay-highlight-on-danger: #ffffff00;
  --color-overlay-shade-on-danger: #00000033;
  --color-overlay-highlight-on-material: #ffffffcc;
  --color-gray: #747474;
  --color-red: #e72c35;
  --color-orange: #ec6f00;
  --color-yellow: #bc8d00;
  --color-green: #17a750;
  --color-teal: #00a59e;
  --color-blue: #127eee;
  --color-purple: #914de6;
  --color-pink: #e652a3;
  --color-danger: #e42732;
  --color-success: #17a750;
  --color-warning: #bc8d00;
  --color-info: #0075e2;
  --shadow-low: 0px 1px 2px 0px #0000001f;
  --shadow-med: 0px 4px 12px 0px #00000029;
  --shadow-high: 0px 12px 32px 0px #00000033;
  --werewolf-shadow-low: 0px 1px 2px 0px #0000001f;
  --werewolf-shadow-med: 0px 4px 12px 0px #00000029;
  --werewolf-shadow-high: 0px 12px 32px 0px #00000033;
  --werewolf-shadow-edge-default: 0 0 #0000;
}

/* Touch: bigger controls and input text for fingers, in every theme. */
@media (pointer: coarse) {
  :root {
    --size-element-md: 36px;
    --size-element-lg: 44px;
    --size-element-xl: 48px;
    --size-target-min: 44px;
    --font-size-input: 16px;
  }
}

/* Hover and pressed: layer the overlay on the element's own fill. On accent and status solids use the -on-<solid> one. */
@utility overlay-hover {
  background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover)), var(--werewolf-gloss, none);
}
@utility overlay-pressed {
  background-image: linear-gradient(var(--color-overlay-pressed), var(--color-overlay-pressed)), var(--werewolf-gloss, none);
}
@utility overlay-hover-on-accent {
  background-image: linear-gradient(var(--color-overlay-hover-on-accent), var(--color-overlay-hover-on-accent)), var(--werewolf-gloss, none);
}
@utility overlay-pressed-on-accent {
  background-image: linear-gradient(var(--color-overlay-pressed-on-accent), var(--color-overlay-pressed-on-accent)), var(--werewolf-gloss, none);
}
@utility overlay-hover-on-danger {
  background-image: linear-gradient(var(--color-overlay-hover-on-danger), var(--color-overlay-hover-on-danger)), var(--werewolf-gloss, none);
}
@utility overlay-pressed-on-danger {
  background-image: linear-gradient(var(--color-overlay-pressed-on-danger), var(--color-overlay-pressed-on-danger)), var(--werewolf-gloss, none);
}
@utility overlay-hover-on-success {
  background-image: linear-gradient(var(--color-overlay-hover-on-success), var(--color-overlay-hover-on-success)), var(--werewolf-gloss, none);
}
@utility overlay-pressed-on-success {
  background-image: linear-gradient(var(--color-overlay-pressed-on-success), var(--color-overlay-pressed-on-success)), var(--werewolf-gloss, none);
}
@utility overlay-hover-on-warning {
  background-image: linear-gradient(var(--color-overlay-hover-on-warning), var(--color-overlay-hover-on-warning)), var(--werewolf-gloss, none);
}
@utility overlay-pressed-on-warning {
  background-image: linear-gradient(var(--color-overlay-pressed-on-warning), var(--color-overlay-pressed-on-warning)), var(--werewolf-gloss, none);
}
@utility overlay-hover-on-info {
  background-image: linear-gradient(var(--color-overlay-hover-on-info), var(--color-overlay-hover-on-info)), var(--werewolf-gloss, none);
}
@utility overlay-pressed-on-info {
  background-image: linear-gradient(var(--color-overlay-pressed-on-info), var(--color-overlay-pressed-on-info)), var(--werewolf-gloss, none);
}

/* Shadows: drop layers per mode plus the dark edge. Set --werewolf-shadow-edge on an element to replace its edge. */
@property --werewolf-shadow-edge {
  syntax: "*";
  inherits: false;
}
@utility shadow-low {
  --tw-shadow: var(--werewolf-shadow-low), var(--werewolf-shadow-edge, var(--werewolf-shadow-edge-default));
  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@utility shadow-med {
  --tw-shadow: var(--werewolf-shadow-med), var(--werewolf-shadow-edge, var(--werewolf-shadow-edge-default));
  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@utility shadow-high {
  --tw-shadow: var(--werewolf-shadow-high), var(--werewolf-shadow-edge, var(--werewolf-shadow-edge-default));
  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Gloss: a lit-from-above sheen and inner edges on a solid (glossy Button). Pair with bg-<solid> and a shadow-* class. */
@property --werewolf-gloss {
  syntax: "*";
  inherits: false;
}
@utility gloss-on-accent {
  --werewolf-gloss: linear-gradient(var(--color-overlay-highlight-on-accent), var(--color-overlay-shade-on-accent));
  --tw-inset-shadow: inset 0 var(--border-width) 0 var(--color-overlay-highlight-on-accent), inset 0 calc(var(--border-width) * -1) 0 var(--color-overlay-shade-on-accent);
  --werewolf-shadow-edge: 0 0 #0000;
  background-image: var(--werewolf-gloss);
  background-origin: border-box;
}
@utility gloss-on-danger {
  --werewolf-gloss: linear-gradient(var(--color-overlay-highlight-on-danger), var(--color-overlay-shade-on-danger));
  --tw-inset-shadow: inset 0 var(--border-width) 0 var(--color-overlay-highlight-on-danger), inset 0 calc(var(--border-width) * -1) 0 var(--color-overlay-shade-on-danger);
  --werewolf-shadow-edge: 0 0 #0000;
  background-image: var(--werewolf-gloss);
  background-origin: border-box;
}

/* Glass, the material levels: material-thin (bars), material-thick (sheets, popovers, dialogs, menus), material-refract (fixed-size
   elements only). Solid fill without backdrop blur, under reduced transparency and in forced colors. Refraction only
   under [data-material-refract] on the root, set by a runtime check, never by @supports. */
@property --werewolf-refract-filter {
  syntax: "*";
  inherits: false;
  initial-value: blur(0px);
}
@utility material-thin {
  background-color: var(--color-background-material-thin);
  border: var(--border-width) solid transparent;
  -webkit-backdrop-filter: blur(var(--blur-material-thin)) saturate(var(--saturate-material-thin));
  backdrop-filter: blur(var(--blur-material-thin)) saturate(var(--saturate-material-thin));
  --tw-inset-shadow: inset 0 var(--border-width) 0 var(--color-overlay-highlight-on-material), inset 0 0 0 var(--border-width) var(--color-border-material-edge);
  --werewolf-shadow-edge: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    background-color: var(--color-background-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (prefers-reduced-transparency: reduce) {
    background-color: var(--color-background-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (forced-colors: active) {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: CanvasText;
    box-shadow: none;
  }
}
@utility material-thick {
  background-color: var(--color-background-material-thick);
  border: var(--border-width) solid transparent;
  -webkit-backdrop-filter: blur(var(--blur-material-thick)) saturate(var(--saturate-material-thick));
  backdrop-filter: blur(var(--blur-material-thick)) saturate(var(--saturate-material-thick));
  --tw-inset-shadow: inset 0 var(--border-width) 0 var(--color-overlay-highlight-on-material), inset 0 0 0 var(--border-width) var(--color-border-material-edge);
  --werewolf-shadow-edge: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    background-color: var(--color-background-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (prefers-reduced-transparency: reduce) {
    background-color: var(--color-background-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (forced-colors: active) {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: CanvasText;
    box-shadow: none;
  }
}
@utility material-refract {
  background-color: var(--color-background-material-refract);
  border: var(--border-width) solid transparent;
  -webkit-backdrop-filter: blur(var(--blur-material-refract)) saturate(var(--saturate-material-refract));
  backdrop-filter: blur(var(--blur-material-refract)) saturate(var(--saturate-material-refract));
  --tw-inset-shadow: inset 0 var(--border-width) 0 var(--color-overlay-highlight-on-material), inset 0 0 0 var(--border-width) var(--color-border-material-edge);
  --werewolf-shadow-edge: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
  @media (forced-colors: none) and (prefers-reduced-transparency: no-preference) {
    @supports (backdrop-filter: blur(1px)) {
      :root[data-material-refract] & {
        backdrop-filter: var(--werewolf-refract-filter) blur(var(--blur-material-refract)) saturate(var(--saturate-material-refract));
      }
    }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    background-color: var(--color-background-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (prefers-reduced-transparency: reduce) {
    background-color: var(--color-background-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --tw-inset-shadow: 0 0 #0000;
    --werewolf-shadow-edge: initial;
  }
  @media (forced-colors: active) {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Keyboard focus: focus-visible:focus-ring */
@utility focus-ring {
  --tw-outline-style: solid;
  outline: var(--outline-width-focus-ring) solid var(--color-focus-ring);
  outline-offset: var(--outline-offset-focus-ring);
}

/* Inline code in running text: <code class="code-inline"> */
@utility code-inline {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

@layer base {
  *, ::before, ::after, ::backdrop {
    border-color: var(--color-border);
  }
  body, [data-theme] {
    background-color: var(--color-background-page);
    color: var(--color-text-primary);
  }
  body {
    font-family: var(--font-family-sans);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-leading);
  }
}