:root {
    --tp-primary: var(--mud-palette-primary);
    --tp-primary-hover: var(--mud-palette-primary-lighten);
    --tp-on-primary: var(--mud-palette-primary-text);
    --tp-secondary: var(--mud-palette-secondary);
    --tp-success: var(--mud-palette-success);
    --tp-tertiary: var(--mud-palette-tertiary);
    --tp-error: var(--mud-palette-error);
    --tp-warning: var(--mud-palette-warning);
    --tp-info: var(--mud-palette-info);

    --tp-bg: var(--mud-palette-background);
    --tp-surface: var(--mud-palette-surface);
    --tp-surface-2: color-mix(in srgb, var(--mud-palette-surface) 95.4%, var(--mud-palette-text-primary));
    --tp-surface-sunken: color-mix(in srgb, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    --tp-surface-raised: color-mix(in srgb, var(--mud-palette-surface) 95%, #fff);

    --tp-text: var(--mud-palette-text-primary);
    --tp-text-secondary: var(--mud-palette-text-secondary);
    --tp-text-muted: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent);
    --tp-text-faint: color-mix(in srgb, var(--mud-palette-text-primary) 50%, transparent);

    --tp-border: var(--mud-palette-divider);
    --tp-border-input: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    --tp-border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 26%, transparent);

    --tp-scrollbar-size: 4px;
    --tp-scrollbar-thumb: color-mix(in srgb, var(--mud-palette-text-primary) 25%, transparent);
    --tp-scrollbar-thumb-hover: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);

    --tp-hover: color-mix(in srgb, var(--mud-palette-text-primary) 11%, transparent);

    --tp-interactive-transition: background-color var(--tp-dur-fast) ease, border-color var(--tp-dur-fast) ease;
    --tp-cover-field-1: var(--tp-secondary);
    --tp-cover-field-2: var(--tp-tertiary);
    --tp-cover-field-3: var(--tp-primary);

    --tp-focus-ring: 2px solid var(--mud-palette-primary);
    --tp-focus-ring-offset: -1px;
    --tp-chip-bg: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);

    --tp-primary-border: color-mix(in srgb, var(--mud-palette-primary) 58%, #000);
    --tp-primary-border-hover: color-mix(in srgb, var(--mud-palette-primary-darken) 58%, #000);

    --tp-active-bar-color: var(--tp-primary);
    --tp-active-bar-width: 3px;
    --tp-active-bar-inset: 5px;
    --tp-active-bar-radius: 2px;
    --tp-primary-wash: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --tp-primary-wash-strong: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    --tp-success-wash: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    --tp-warning-wash: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    --tp-error-wash: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --tp-info-wash: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);

    --tp-warning-wash-solid: color-mix(in srgb, var(--mud-palette-warning) 15%, var(--tp-bg));
    --tp-error-wash-solid: color-mix(in srgb, var(--mud-palette-error) 12%, var(--tp-bg));

    --tp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --tp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --tp-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --tp-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.45);

    --tp-shadow-ink-sm: 0 4px 12px rgba(var(--tp-ink-rgb), 0.35);
    --tp-shadow-ink-md: 0 10px 24px rgba(var(--tp-ink-rgb), 0.28);
    --tp-shadow-ink-lg: 0 18px 40px rgba(var(--tp-ink-rgb), 0.45);

    --tp-radius-xs: 3px;
    --tp-radius-sm: 6px;
    --tp-radius: 8px;
    --tp-radius-lg: 12px;
    --tp-radius-pill: 999px;

    --tp-ink-rgb: 9, 30, 41;
    --tp-cover-aspect: 9 / 16;
    --tp-cover-safe-top: 8.8%;
    --tp-cover-aspect-tight: 9 / 13.18;
    --tp-thumb-line-height: 1.16;
    --tp-cover-height-in-widths: 16 / 9;
    --tp-thumb-area: #7dd3e8;
    --tp-thumb-ink: #ffffff;
    --tp-thumb-shade: rgba(var(--tp-ink-rgb), 0.75);

    --tp-dur-fast: 0.12s;
    --tp-dur: 0.22s;
    --tp-dur-slow: 0.34s;
    --tp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tp-shimmer-dur: 1.4s;

    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 24px;
    --tp-space-6: 32px;
    --tp-space-7: 48px;
    --tp-space-8: 64px;

    --tp-page-pad-x: clamp(16px, 3vw, 32px);
    --tp-page-pad-y: var(--tp-space-5);
    --tp-page-max: 1440px;
}