/* Otet design tokens — generated by previews/_build/build_tokens.py. Do not edit; edit tokens/*.tokens.json. */

:root {
  --ot-color-secondary-50: #E3E4EA;
  --ot-color-secondary-100: #B9BCCC;
  --ot-color-secondary-200: #8C91AA;
  --ot-color-secondary-300: #626888;
  --ot-color-secondary-400: #454B72;
  --ot-color-secondary-500: #29305E;
  --ot-color-secondary-600: #242A57;
  --ot-color-secondary-700: #1C224D;
  --ot-color-secondary-800: #151941;
  --ot-color-secondary-900: #0D072B;
  --ot-color-secondary-950: #0A0520;
  --ot-color-neutral-0: #FFFFFF;
  --ot-color-neutral-50: #F8F8F8;
  --ot-color-neutral-100: #F0F0F0;
  --ot-color-neutral-150: #EDEDED;
  --ot-color-neutral-200: #E6E6E6;
  --ot-color-neutral-300: #D5D5D5;
  --ot-color-neutral-400: #B0B0B0;
  --ot-color-neutral-500: #909090;
  --ot-color-neutral-600: #686868;
  --ot-color-neutral-700: #555555;
  --ot-color-neutral-800: #373737;
  --ot-color-neutral-900: #171717;
  --ot-color-neutral-1000: #000000;
  --ot-color-primary-50: #EEFFEE;
  --ot-color-primary-100: #D7FFDA;
  --ot-color-primary-200: #B2FFB9;
  --ot-color-primary-300: #83FF8F;
  --ot-color-primary-400: #33F547;
  --ot-color-primary-500: #09DE1F;
  --ot-color-primary-600: #01B813;
  --ot-color-primary-700: #059014;
  --ot-color-primary-800: #0A7116;
  --ot-color-primary-900: #0A5D15;
  --ot-color-primary-950: #003407;
  --ot-color-error-50: #F9E9E8;
  --ot-color-error-100: #FCCCBE;
  --ot-color-error-200: #FBAB95;
  --ot-color-error-300: #FA8A6B;
  --ot-color-error-400: #FA704B;
  --ot-color-error-500: #FA572D;
  --ot-color-error-600: #EF5129;
  --ot-color-error-700: #E14A24;
  --ot-color-error-800: #D34320;
  --ot-color-error-900: #BA3718;
  --ot-color-error-950: #93250A;
  --ot-color-warning-50: #FFF9E9;
  --ot-color-warning-100: #FFF0CB;
  --ot-color-warning-200: #FFE6AA;
  --ot-color-warning-300: #FDDA88;
  --ot-color-warning-400: #F7CD6F;
  --ot-color-warning-500: #F0C05A;
  --ot-color-warning-600: #DB9E38;
  --ot-color-warning-700: #B8751A;
  --ot-color-warning-800: #965813;
  --ot-color-warning-900: #75400E;
  --ot-color-lime: #C5F07F;
  --ot-color-logo-navy: #201A73;
  --ot-color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --ot-color-white-alpha-6: rgba(255, 255, 255, 0.06);
  --ot-color-white-alpha-8: rgba(255, 255, 255, 0.08);
  --ot-color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --ot-color-white-alpha-12: rgba(255, 255, 255, 0.12);
  --ot-color-white-alpha-28: rgba(255, 255, 255, 0.28);
  --ot-color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --ot-color-black-alpha-6: rgba(0, 0, 0, 0.06);
  --ot-color-black-alpha-8: rgba(0, 0, 0, 0.08);
  --ot-color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --ot-color-black-alpha-12: rgba(0, 0, 0, 0.12);
  --ot-color-black-alpha-24: rgba(0, 0, 0, 0.24);
  --ot-color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --ot-color-primary-alpha-12: rgba(131, 255, 143, 0.12);
  --ot-color-primary-alpha-28: rgba(131, 255, 143, 0.28);
  --ot-color-secondary-alpha-32: rgba(10, 5, 32, 0.32);
  --ot-color-secondary-alpha-56: rgba(10, 5, 32, 0.56);
  --ot-color-glass-scrolled: rgba(36, 42, 87, 0.75);
  --ot-color-glass-nav: rgba(35, 25, 82, 0.1);
  --ot-gradient-primary: linear-gradient(91.24deg, var(--ot-color-primary-300) 0%, var(--ot-color-lime) 100%);
  --ot-gradient-primary-hover: linear-gradient(91.24deg, #79F585 0%, #BBE675 100%);
  --ot-gradient-primary-pressed: linear-gradient(91.24deg, #6FEB7B 0%, #B1DC6B 100%);
  --ot-space-0: 0px;
  --ot-space-2: 2px;
  --ot-space-4: 4px;
  --ot-space-8: 8px;
  --ot-space-12: 12px;
  --ot-space-16: 16px;
  --ot-space-20: 20px;
  --ot-space-24: 24px;
  --ot-space-32: 32px;
  --ot-space-40: 40px;
  --ot-space-48: 48px;
  --ot-space-64: 64px;
  --ot-space-80: 80px;
  --ot-space-96: 96px;
  --ot-space-128: 128px;
  --ot-space-160: 160px;
  --ot-radius-none: 0px;
  --ot-radius-xs: 4px;
  --ot-radius-sm: 8px;
  --ot-radius-md: 12px;
  --ot-radius-lg: 16px;
  --ot-radius-xl: 24px;
  --ot-radius-2xl: 32px;
  --ot-radius-3xl: 64px;
  --ot-radius-full: 9999px;
  --ot-border-width-1: 1px;
  --ot-border-width-2: 2px;
  --ot-size-control-sm: 32px;
  --ot-size-control-md: 40px;
  --ot-size-control-lg: 48px;
  --ot-size-icon-sm: 16px;
  --ot-size-icon-md: 20px;
  --ot-size-icon-lg: 24px;
  --ot-size-icon-stroke: 1.5px;
  --ot-size-target-min: 24px;
  --ot-font-family-heading: "Peyda", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --ot-font-family-body: "IRANYekanX", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --ot-font-family-heading-en: "Clash Display", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --ot-font-family-body-en: "Archivo", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --ot-font-weight-regular: 400;
  --ot-font-weight-medium: 500;
  --ot-font-weight-semibold: 600;
  --ot-font-weight-bold: 700;
  --ot-font-line-height-heading: 1.4;
  --ot-font-line-height-body: 1.6;
  --ot-font-line-height-en-display: 1.1;
  --ot-font-line-height-en-heading: 1.2;
  --ot-font-line-height-en-body: 1.5;
  --ot-font-letter-spacing-en-display: -0.03em;
  --ot-font-letter-spacing-en-h1: -0.025em;
  --ot-font-letter-spacing-en-h2: -0.02em;
  --ot-font-letter-spacing-en-h3: -0.015em;
  --ot-font-letter-spacing-en-h4: -0.01em;
  --ot-font-letter-spacing-en-h5: 0em;
  --ot-font-letter-spacing-en-eyebrow: 0.06em;
  --ot-duration-fast: 100ms;
  --ot-duration-base: 150ms;
  --ot-duration-moderate: 200ms;
  --ot-duration-slow: 300ms;
  --ot-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ot-easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ot-easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ot-breakpoint-tablet: 768px;
  --ot-breakpoint-desktop: 1200px;
  --ot-z-index-base: 0;
  --ot-z-index-raised: 10;
  --ot-z-index-dropdown: 100;
  --ot-z-index-header: 200;
  --ot-z-index-overlay: 300;
  --ot-z-index-modal: 400;
  --ot-z-index-toast: 500;
  --ot-z-index-tooltip: 600;
}

:root,
[data-surface="light"] {
  color-scheme: light;
  --ot-bg-page: var(--ot-color-neutral-50);
  --ot-bg-surface: var(--ot-color-neutral-0);
  --ot-bg-surface-raised: var(--ot-color-neutral-0);
  --ot-bg-subtle: var(--ot-color-neutral-100);
  --ot-bg-subtle-hover: var(--ot-color-neutral-200);
  --ot-bg-inverse: var(--ot-color-secondary-900);
  --ot-bg-disabled: var(--ot-color-neutral-200);
  --ot-bg-brand: var(--ot-color-secondary-600);
  --ot-bg-brand-hover: var(--ot-color-secondary-400);
  --ot-bg-brand-subtle: var(--ot-color-secondary-50);
  --ot-bg-success-subtle: var(--ot-color-primary-50);
  --ot-bg-error-subtle: var(--ot-color-error-50);
  --ot-bg-warning-subtle: var(--ot-color-warning-50);
  --ot-bg-info-subtle: var(--ot-color-secondary-50);
  --ot-bg-overlay: var(--ot-color-secondary-alpha-56);
  --ot-bg-dialog: linear-gradient(180deg, var(--ot-color-neutral-0) 0%, var(--ot-color-neutral-0) 100%);
  --ot-text-primary: var(--ot-color-neutral-900);
  --ot-text-secondary: var(--ot-color-neutral-600);
  --ot-text-disabled: var(--ot-color-neutral-500);
  --ot-text-inverse: var(--ot-color-neutral-0);
  --ot-text-brand: var(--ot-color-secondary-600);
  --ot-text-link: var(--ot-color-secondary-600);
  --ot-text-link-hover: var(--ot-color-secondary-900);
  --ot-text-success: var(--ot-color-primary-800);
  --ot-text-error: var(--ot-color-error-900);
  --ot-text-warning: var(--ot-color-warning-800);
  --ot-text-info: var(--ot-color-secondary-600);
  --ot-text-on-brand: var(--ot-color-neutral-0);
  --ot-text-on-primary: var(--ot-color-secondary-900);
  --ot-text-on-error: var(--ot-color-neutral-0);
  --ot-icon-primary: var(--ot-color-neutral-900);
  --ot-icon-secondary: var(--ot-color-neutral-600);
  --ot-icon-brand: var(--ot-color-secondary-600);
  --ot-icon-disabled: var(--ot-color-neutral-500);
  --ot-icon-success: var(--ot-color-primary-700);
  --ot-icon-error: var(--ot-color-error-700);
  --ot-icon-warning: var(--ot-color-warning-700);
  --ot-border-subtle: var(--ot-color-neutral-200);
  --ot-border-default: var(--ot-color-neutral-300);
  --ot-border-control: var(--ot-color-neutral-500);
  --ot-border-control-hover: var(--ot-color-neutral-700);
  --ot-border-disabled: var(--ot-color-neutral-200);
  --ot-border-success: var(--ot-color-primary-700);
  --ot-border-error: var(--ot-color-error-700);
  --ot-border-warning: var(--ot-color-warning-700);
  --ot-focus-ring: var(--ot-color-secondary-600);
  --ot-elevation-sm: 0px 1px 2px 0px var(--ot-color-black-alpha-6), 0px 1px 3px 0px var(--ot-color-black-alpha-10);
  --ot-elevation-md: 0px 4px 8px -2px var(--ot-color-black-alpha-8), 0px 2px 4px -2px var(--ot-color-black-alpha-6);
  --ot-elevation-dialog: 0px 32px 64px -16px var(--ot-color-secondary-alpha-32), 0px 0px 0px 1px var(--ot-color-black-alpha-6);
  --ot-motion-hover: var(--ot-duration-fast) var(--ot-easing-standard) 0ms;
  --ot-motion-control: var(--ot-duration-base) var(--ot-easing-standard) 0ms;
  --ot-motion-expand: var(--ot-duration-moderate) var(--ot-easing-standard) 0ms;
  --ot-motion-panel: var(--ot-duration-slow) var(--ot-easing-enter) 0ms;
}

[data-surface="dark"] {
  color-scheme: dark;
  --ot-bg-page: var(--ot-color-secondary-900);
  --ot-bg-surface: var(--ot-color-secondary-800);
  --ot-bg-surface-raised: var(--ot-color-secondary-700);
  --ot-bg-subtle: var(--ot-color-white-alpha-5);
  --ot-bg-subtle-hover: var(--ot-color-white-alpha-10);
  --ot-bg-inverse: var(--ot-color-neutral-0);
  --ot-bg-disabled: var(--ot-color-white-alpha-5);
  --ot-bg-brand: var(--ot-color-primary-300);
  --ot-bg-brand-hover: var(--ot-color-primary-200);
  --ot-bg-brand-subtle: var(--ot-color-primary-alpha-12);
  --ot-bg-success-subtle: var(--ot-color-primary-alpha-12);
  --ot-bg-error-subtle: var(--ot-color-white-alpha-5);
  --ot-bg-warning-subtle: var(--ot-color-white-alpha-5);
  --ot-bg-info-subtle: var(--ot-color-white-alpha-5);
  --ot-bg-overlay: var(--ot-color-secondary-alpha-56);
  --ot-bg-dialog: linear-gradient(180deg, var(--ot-color-secondary-700) 0%, var(--ot-color-secondary-800) 100%);
  --ot-text-primary: var(--ot-color-neutral-0);
  --ot-text-secondary: var(--ot-color-secondary-200);
  --ot-text-disabled: var(--ot-color-white-alpha-40);
  --ot-text-inverse: var(--ot-color-secondary-900);
  --ot-text-brand: var(--ot-color-primary-300);
  --ot-text-link: var(--ot-color-primary-300);
  --ot-text-link-hover: var(--ot-color-primary-200);
  --ot-text-success: var(--ot-color-primary-300);
  --ot-text-error: var(--ot-color-error-400);
  --ot-text-warning: var(--ot-color-warning-400);
  --ot-text-info: var(--ot-color-secondary-100);
  --ot-text-on-brand: var(--ot-color-secondary-900);
  --ot-text-on-primary: var(--ot-color-secondary-900);
  --ot-text-on-error: var(--ot-color-neutral-0);
  --ot-icon-primary: var(--ot-color-neutral-0);
  --ot-icon-secondary: var(--ot-color-secondary-200);
  --ot-icon-brand: var(--ot-color-primary-300);
  --ot-icon-disabled: var(--ot-color-white-alpha-40);
  --ot-icon-success: var(--ot-color-primary-300);
  --ot-icon-error: var(--ot-color-error-400);
  --ot-icon-warning: var(--ot-color-warning-400);
  --ot-border-subtle: var(--ot-color-white-alpha-10);
  --ot-border-default: var(--ot-color-white-alpha-28);
  --ot-border-control: var(--ot-color-secondary-200);
  --ot-border-control-hover: var(--ot-color-secondary-100);
  --ot-border-disabled: var(--ot-color-white-alpha-10);
  --ot-border-success: var(--ot-color-primary-300);
  --ot-border-error: var(--ot-color-error-400);
  --ot-border-warning: var(--ot-color-warning-400);
  --ot-focus-ring: var(--ot-color-primary-300);
  --ot-elevation-sm: 0px 1px 2px 0px var(--ot-color-black-alpha-6), 0px 1px 3px 0px var(--ot-color-black-alpha-10);
  --ot-elevation-md: 0px 4px 8px -2px var(--ot-color-black-alpha-8), 0px 2px 4px -2px var(--ot-color-black-alpha-6);
  --ot-elevation-dialog: 0px 32px 64px -16px var(--ot-color-black-alpha-50), inset 0px 1px 0px 0px var(--ot-color-white-alpha-8), 0px 0px 0px 1px var(--ot-color-white-alpha-10);
  --ot-motion-hover: var(--ot-duration-fast) var(--ot-easing-standard) 0ms;
  --ot-motion-control: var(--ot-duration-base) var(--ot-easing-standard) 0ms;
  --ot-motion-expand: var(--ot-duration-moderate) var(--ot-easing-standard) 0ms;
  --ot-motion-panel: var(--ot-duration-slow) var(--ot-easing-enter) 0ms;
}

:root {
  --ot-layout-margin: var(--ot-space-16);
  --ot-layout-gutter: var(--ot-space-16);
  --ot-layout-section: var(--ot-space-80);
  --ot-layout-columns: 4;
  --ot-layout-content-max: 1280px;
}

@media (min-width: 768px) {
  :root {
    --ot-layout-margin: var(--ot-space-48);
    --ot-layout-gutter: var(--ot-space-24);
    --ot-layout-section: var(--ot-space-80);
    --ot-layout-columns: 8;
  }
}

@media (min-width: 1200px) {
  :root {
    --ot-layout-margin: var(--ot-space-80);
    --ot-layout-gutter: var(--ot-space-24);
    --ot-layout-section: var(--ot-space-160);
    --ot-layout-columns: 12;
  }
}

:root,
[data-surface] {
  --ot-button-height-sm: var(--ot-size-control-sm);
  --ot-button-height-md: var(--ot-size-control-md);
  --ot-button-height-lg: var(--ot-size-control-lg);
  --ot-button-padding-x-sm: var(--ot-space-16);
  --ot-button-padding-x-md: var(--ot-space-20);
  --ot-button-padding-x-lg: var(--ot-space-24);
  --ot-button-gap-sm: var(--ot-space-4);
  --ot-button-gap-md: var(--ot-space-8);
  --ot-button-gap-lg: var(--ot-space-8);
  --ot-button-radius: var(--ot-radius-full);
  --ot-button-primary-bg: var(--ot-gradient-primary);
  --ot-button-primary-bg-hover: var(--ot-gradient-primary-hover);
  --ot-button-primary-bg-pressed: var(--ot-gradient-primary-pressed);
  --ot-button-primary-text: var(--ot-text-on-primary);
  --ot-button-secondary-bg: var(--ot-color-secondary-600);
  --ot-button-secondary-bg-hover: var(--ot-color-secondary-400);
  --ot-button-secondary-bg-pressed: var(--ot-color-secondary-900);
  --ot-button-secondary-text: var(--ot-color-neutral-0);
  --ot-button-error-bg: var(--ot-color-error-800);
  --ot-button-error-bg-hover: var(--ot-color-error-900);
  --ot-button-error-bg-pressed: var(--ot-color-error-950);
  --ot-button-error-text: var(--ot-text-on-error);
  --ot-button-outlined-secondary-fg: var(--ot-color-secondary-600);
  --ot-button-outlined-secondary-bg-hover: var(--ot-color-secondary-50);
  --ot-button-outlined-secondary-bg-pressed: var(--ot-color-secondary-100);
  --ot-button-outlined-secondary-fg-pressed: var(--ot-color-secondary-900);
  --ot-button-outlined-error-fg: var(--ot-color-error-900);
  --ot-button-outlined-error-bg-hover: var(--ot-color-error-50);
  --ot-button-outlined-error-bg-pressed: var(--ot-color-error-100);
  --ot-button-outlined-error-fg-pressed: var(--ot-color-error-950);
  --ot-button-tonal-bg: var(--ot-color-neutral-100);
  --ot-button-tonal-bg-hover: var(--ot-color-neutral-200);
  --ot-button-tonal-bg-pressed: var(--ot-color-neutral-300);
  --ot-button-tonal-text: var(--ot-color-neutral-900);
  --ot-button-tonal-on-dark-bg: var(--ot-color-white-alpha-5);
  --ot-button-tonal-on-dark-bg-hover: var(--ot-color-white-alpha-12);
  --ot-button-tonal-on-dark-bg-pressed: var(--ot-color-white-alpha-28);
  --ot-button-tonal-on-dark-border: var(--ot-color-white-alpha-10);
  --ot-button-tonal-on-dark-text: var(--ot-color-neutral-0);
  --ot-button-primary-on-dark-fg: var(--ot-color-primary-300);
  --ot-button-primary-on-dark-bg-hover: var(--ot-color-primary-alpha-12);
  --ot-button-primary-on-dark-bg-pressed: var(--ot-color-primary-alpha-28);
  --ot-button-disabled-bg: var(--ot-color-neutral-200);
  --ot-button-disabled-border: var(--ot-color-neutral-300);
  --ot-button-disabled-text: var(--ot-color-neutral-500);
  --ot-button-disabled-on-dark-bg: var(--ot-color-white-alpha-5);
  --ot-button-disabled-on-dark-border: var(--ot-color-white-alpha-10);
  --ot-button-disabled-on-dark-text: var(--ot-color-white-alpha-40);
  --ot-button-focus-ring-width: var(--ot-border-width-2);
  --ot-button-focus-ring-offset: 2px;
  --ot-button-focus-ring-color: var(--ot-focus-ring);
  --ot-input-height-md: var(--ot-size-control-md);
  --ot-input-height-lg: var(--ot-size-control-lg);
  --ot-input-padding-x-md: var(--ot-space-12);
  --ot-input-padding-x-lg: var(--ot-space-16);
  --ot-input-radius: var(--ot-radius-md);
  --ot-input-radius-search: var(--ot-radius-full);
  --ot-input-bg: var(--ot-bg-surface);
  --ot-input-bg-disabled: var(--ot-color-neutral-100);
  --ot-input-bg-readonly: var(--ot-color-neutral-50);
  --ot-input-border: var(--ot-border-control);
  --ot-input-border-hover: var(--ot-border-control-hover);
  --ot-input-border-focus: var(--ot-focus-ring);
  --ot-input-border-error: var(--ot-border-error);
  --ot-input-border-warning: var(--ot-border-warning);
  --ot-input-border-disabled: var(--ot-border-disabled);
  --ot-input-text: var(--ot-text-primary);
  --ot-input-placeholder: var(--ot-text-secondary);
  --ot-input-label: var(--ot-text-primary);
  --ot-input-helper: var(--ot-text-secondary);
  --ot-input-icon: var(--ot-icon-secondary);
  --ot-header-glass-bg: var(--ot-color-glass-scrolled);
  --ot-header-glass-blur: 100px;
  --ot-header-glass-border: var(--ot-color-white-alpha-8);
  --ot-header-glass-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.3), inset 0px 0px 20px 0px rgba(255, 255, 255, 0.05), inset 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  --ot-header-nav-bg: var(--ot-color-glass-nav);
  --ot-footer-bg: var(--ot-color-secondary-900);
  --ot-footer-border: var(--ot-color-white-alpha-10);
  --ot-footer-radius-desktop: var(--ot-radius-3xl);
  --ot-footer-radius-tablet: var(--ot-radius-2xl);
  --ot-footer-radius-mobile: var(--ot-radius-none);
  --ot-footer-tile-bg: var(--ot-color-white-alpha-6);
  --ot-checkbox-size: 20px;
  --ot-checkbox-border-width: var(--ot-border-width-2);
  --ot-checkbox-bg: var(--ot-bg-surface);
  --ot-checkbox-border: var(--ot-border-control);
  --ot-checkbox-border-hover: var(--ot-border-control-hover);
  --ot-checkbox-bg-checked: var(--ot-bg-brand);
  --ot-checkbox-bg-checked-hover: var(--ot-bg-brand-hover);
  --ot-checkbox-mark: var(--ot-text-on-brand);
  --ot-checkbox-border-error: var(--ot-border-error);
  --ot-checkbox-bg-disabled: var(--ot-bg-disabled);
  --ot-checkbox-border-disabled: var(--ot-border-disabled);
  --ot-checkbox-mark-disabled: var(--ot-icon-disabled);
  --ot-checkbox-row-min-height: var(--ot-size-control-md);
  --ot-checkbox-gap: var(--ot-space-12);
  --ot-checkbox-radius: var(--ot-radius-xs);
  --ot-radio-size: 20px;
  --ot-radio-border-width: var(--ot-border-width-2);
  --ot-radio-bg: var(--ot-bg-surface);
  --ot-radio-border: var(--ot-border-control);
  --ot-radio-border-hover: var(--ot-border-control-hover);
  --ot-radio-border-error: var(--ot-border-error);
  --ot-radio-bg-disabled: var(--ot-bg-disabled);
  --ot-radio-border-disabled: var(--ot-border-disabled);
  --ot-radio-mark-disabled: var(--ot-icon-disabled);
  --ot-radio-row-min-height: var(--ot-size-control-md);
  --ot-radio-gap: var(--ot-space-12);
  --ot-radio-radius: var(--ot-radius-full);
  --ot-radio-border-checked: var(--ot-bg-brand);
  --ot-radio-border-checked-hover: var(--ot-bg-brand-hover);
  --ot-radio-dot: var(--ot-bg-brand);
  --ot-radio-dot-hover: var(--ot-bg-brand-hover);
  --ot-radio-dot-size: 10px;
  --ot-select-height-md: var(--ot-size-control-md);
  --ot-select-height-lg: var(--ot-size-control-lg);
  --ot-select-padding-start-md: var(--ot-space-12);
  --ot-select-padding-start-lg: var(--ot-space-16);
  --ot-select-padding-end: 44px;
  --ot-select-chevron: var(--ot-icon-secondary);
  --ot-select-chevron-size: var(--ot-size-icon-md);
  --ot-select-radius: var(--ot-input-radius);
  --ot-select-bg: var(--ot-input-bg);
  --ot-select-border: var(--ot-input-border);
  --ot-select-placeholder: var(--ot-text-secondary);
  --ot-textarea-min-height: 104px;
  --ot-textarea-padding-y: var(--ot-space-12);
  --ot-textarea-padding-x: var(--ot-space-16);
  --ot-textarea-radius: var(--ot-input-radius);
  --ot-textarea-bg: var(--ot-input-bg);
  --ot-textarea-border: var(--ot-input-border);
  --ot-textarea-counter: var(--ot-text-secondary);
  --ot-combobox-height-md: var(--ot-size-control-md);
  --ot-combobox-height-lg: var(--ot-size-control-lg);
  --ot-combobox-padding-x-md: var(--ot-space-12);
  --ot-combobox-padding-x-lg: var(--ot-space-16);
  --ot-combobox-button-size-md: var(--ot-size-control-sm);
  --ot-combobox-button-size-lg: var(--ot-size-control-md);
  --ot-combobox-radius: var(--ot-input-radius);
  --ot-combobox-chevron: var(--ot-icon-secondary);
  --ot-combobox-chevron-size: var(--ot-size-icon-md);
  --ot-combobox-flag-size: var(--ot-size-icon-md);
  --ot-combobox-flag-border: var(--ot-color-black-alpha-10);
  --ot-combobox-popup-bg: var(--ot-bg-surface-raised);
  --ot-combobox-popup-border: var(--ot-border-subtle);
  --ot-combobox-popup-radius: var(--ot-radius-md);
  --ot-combobox-popup-padding: var(--ot-space-4);
  --ot-combobox-popup-offset: var(--ot-space-4);
  --ot-combobox-popup-max-height: 272px;
  --ot-combobox-popup-shadow: var(--ot-elevation-md);
  --ot-combobox-popup-z: var(--ot-z-index-dropdown);
  --ot-combobox-option-min-height: var(--ot-size-control-md);
  --ot-combobox-option-padding-x: var(--ot-space-12);
  --ot-combobox-option-gap: var(--ot-space-12);
  --ot-combobox-option-radius: var(--ot-radius-sm);
  --ot-combobox-option-text: var(--ot-text-primary);
  --ot-combobox-option-description: var(--ot-text-secondary);
  --ot-combobox-option-bg-hover: var(--ot-bg-subtle);
  --ot-combobox-option-active-ring: var(--ot-focus-ring);
  --ot-combobox-option-check: var(--ot-icon-brand);
  --ot-combobox-option-text-disabled: var(--ot-text-disabled);
  --ot-combobox-empty-text: var(--ot-text-secondary);
  --ot-combobox-button-bg-hover: var(--ot-bg-subtle);
  --ot-tabs-seg-track-bg: var(--ot-bg-subtle);
  --ot-tabs-seg-track-padding: var(--ot-space-4);
  --ot-tabs-seg-track-gap: var(--ot-space-4);
  --ot-tabs-seg-radius: var(--ot-radius-full);
  --ot-tabs-seg-height-md: var(--ot-size-control-md);
  --ot-tabs-seg-height-sm: var(--ot-size-control-sm);
  --ot-tabs-seg-padding-x-md: var(--ot-space-16);
  --ot-tabs-seg-padding-x-sm: var(--ot-space-12);
  --ot-tabs-seg-text: var(--ot-text-secondary);
  --ot-tabs-seg-text-hover: var(--ot-text-primary);
  --ot-tabs-seg-bg-hover: var(--ot-bg-subtle-hover);
  --ot-tabs-seg-bg-selected: var(--ot-bg-brand);
  --ot-tabs-seg-text-selected: var(--ot-text-on-brand);
  --ot-tabs-line-height-md: var(--ot-size-control-lg);
  --ot-tabs-line-height-sm: var(--ot-size-control-md);
  --ot-tabs-line-padding-x: var(--ot-space-16);
  --ot-tabs-line-radius: var(--ot-radius-sm);
  --ot-tabs-line-text: var(--ot-text-secondary);
  --ot-tabs-line-text-hover: var(--ot-text-primary);
  --ot-tabs-line-bg-hover: var(--ot-bg-subtle);
  --ot-tabs-line-text-selected: var(--ot-text-brand);
  --ot-tabs-line-indicator: var(--ot-bg-brand);
  --ot-tabs-line-indicator-height: var(--ot-border-width-2);
  --ot-tabs-line-divider: var(--ot-border-subtle);
  --ot-tabs-icon-size: var(--ot-size-icon-md);
  --ot-tabs-icon-gap: var(--ot-space-8);
  --ot-tabs-text-disabled: var(--ot-text-disabled);
  --ot-chip-height: var(--ot-size-control-sm);
  --ot-chip-padding-x: var(--ot-space-12);
  --ot-chip-padding-start-selected: var(--ot-space-8);
  --ot-chip-icon-gap: var(--ot-space-4);
  --ot-chip-gap: var(--ot-space-8);
  --ot-chip-radius: var(--ot-radius-full);
  --ot-chip-bg: var(--ot-bg-surface);
  --ot-chip-bg-hover: var(--ot-bg-subtle);
  --ot-chip-border: var(--ot-border-default);
  --ot-chip-text: var(--ot-text-primary);
  --ot-chip-bg-selected: var(--ot-bg-brand-subtle);
  --ot-chip-border-selected: var(--ot-bg-brand);
  --ot-chip-border-selected-hover: var(--ot-bg-brand-hover);
  --ot-chip-text-selected: var(--ot-text-brand);
  --ot-chip-check: var(--ot-icon-brand);
  --ot-chip-check-size: var(--ot-size-icon-sm);
  --ot-chip-count: var(--ot-text-secondary);
  --ot-chip-count-selected: var(--ot-text-brand);
  --ot-chip-text-disabled: var(--ot-text-disabled);
  --ot-chip-border-disabled: var(--ot-border-disabled);
  --ot-badge-height-sm: 20px;
  --ot-badge-height-md: 24px;
  --ot-badge-height-lg: var(--ot-size-control-sm);
  --ot-badge-padding-x-sm: var(--ot-space-8);
  --ot-badge-padding-x-md: var(--ot-space-8);
  --ot-badge-padding-x-lg: var(--ot-space-12);
  --ot-badge-gap: var(--ot-space-4);
  --ot-badge-gap-lg: var(--ot-space-8);
  --ot-badge-radius: var(--ot-radius-full);
  --ot-badge-icon-size-sm: 12px;
  --ot-badge-icon-size-md: var(--ot-size-icon-sm);
  --ot-badge-dot-size: 6px;
  --ot-badge-dot-size-lg: 8px;
  --ot-badge-neutral-bg: var(--ot-bg-subtle);
  --ot-badge-neutral-text: var(--ot-text-primary);
  --ot-badge-neutral-icon: var(--ot-icon-secondary);
  --ot-badge-info-bg: var(--ot-bg-info-subtle);
  --ot-badge-info-text: var(--ot-text-info);
  --ot-badge-info-icon: var(--ot-text-info);
  --ot-badge-success-bg: var(--ot-bg-success-subtle);
  --ot-badge-success-text: var(--ot-text-success);
  --ot-badge-success-icon: var(--ot-icon-success);
  --ot-badge-warning-bg: var(--ot-bg-warning-subtle);
  --ot-badge-warning-text: var(--ot-text-warning);
  --ot-badge-warning-icon: var(--ot-icon-warning);
  --ot-badge-error-bg: var(--ot-bg-error-subtle);
  --ot-badge-error-text: var(--ot-text-error);
  --ot-badge-error-icon: var(--ot-icon-error);
  --ot-badge-skeleton-bg: var(--ot-bg-subtle-hover);
  --ot-badge-skeleton-width: 64px;
  --ot-badge-flash-up: var(--ot-bg-success-subtle);
  --ot-badge-flash-down: var(--ot-bg-error-subtle);
  --ot-badge-flash-duration: 1000ms;
  --ot-link-text: var(--ot-text-link);
  --ot-link-text-hover: var(--ot-text-link-hover);
  --ot-link-underline-width: 1px;
  --ot-link-underline-width-hover: 2px;
  --ot-link-underline-offset: 4px;
  --ot-link-icon-gap: var(--ot-space-4);
  --ot-link-icon-size-sm: var(--ot-size-icon-sm);
  --ot-link-icon-size-md: var(--ot-size-icon-md);
  --ot-link-min-height: 24px;
  --ot-link-focus-ring: var(--ot-focus-ring);
  --ot-link-focus-width: 2px;
  --ot-link-focus-offset: 2px;
  --ot-link-focus-radius: var(--ot-radius-xs);
  --ot-link-nav-text: var(--ot-text-secondary);
  --ot-link-nav-text-hover: var(--ot-text-link);
  --ot-link-nav-current: var(--ot-text-primary);
  --ot-alert-radius: var(--ot-radius-md);
  --ot-alert-padding-sm: var(--ot-space-12);
  --ot-alert-padding-md: var(--ot-space-16);
  --ot-alert-gap: var(--ot-space-12);
  --ot-alert-icon-size: var(--ot-size-icon-md);
  --ot-alert-text: var(--ot-text-primary);
  --ot-alert-close-size: 32px;
  --ot-alert-info-bg: var(--ot-bg-info-subtle);
  --ot-alert-info-border: var(--ot-text-info);
  --ot-alert-info-icon: var(--ot-text-info);
  --ot-alert-success-bg: var(--ot-bg-success-subtle);
  --ot-alert-success-border: var(--ot-border-success);
  --ot-alert-success-icon: var(--ot-icon-success);
  --ot-alert-warning-bg: var(--ot-bg-warning-subtle);
  --ot-alert-warning-border: var(--ot-border-warning);
  --ot-alert-warning-icon: var(--ot-icon-warning);
  --ot-alert-error-bg: var(--ot-bg-error-subtle);
  --ot-alert-error-border: var(--ot-border-error);
  --ot-alert-error-icon: var(--ot-icon-error);
  --ot-dialog-width-sm: 420px;
  --ot-dialog-width-md: 560px;
  --ot-dialog-width-lg: 840px;
  --ot-dialog-padding: var(--ot-space-32);
  --ot-dialog-padding-mobile: var(--ot-space-24);
  --ot-dialog-padding-top: var(--ot-space-24);
  --ot-dialog-header-pb: var(--ot-space-16);
  --ot-dialog-body-py: var(--ot-space-20);
  --ot-dialog-footer-pt: var(--ot-space-16);
  --ot-dialog-gap: var(--ot-space-24);
  --ot-dialog-radius: var(--ot-radius-2xl);
  --ot-dialog-margin: var(--ot-space-24);
  --ot-dialog-sheet-inset: var(--ot-space-8);
  --ot-dialog-sheet-half: 56dvh;
  --ot-dialog-bg: var(--ot-bg-dialog);
  --ot-dialog-title: var(--ot-text-primary);
  --ot-dialog-text: var(--ot-text-secondary);
  --ot-dialog-divider: var(--ot-border-subtle);
  --ot-dialog-overlay: var(--ot-bg-overlay);
  --ot-dialog-overlay-blur: 8px;
  --ot-dialog-shadow: var(--ot-elevation-dialog);
  --ot-dialog-close-size: 40px;
  --ot-dialog-close-bg: var(--ot-bg-subtle);
  --ot-dialog-close-bg-hover: var(--ot-bg-subtle-hover);
  --ot-dialog-medallion-size: 64px;
  --ot-dialog-grabber: var(--ot-border-default);
  --ot-dialog-motion-enter: var(--ot-motion-panel);
  --ot-dialog-motion-exit: var(--ot-duration-moderate) var(--ot-easing-exit) 0ms;
  --ot-dialog-z-index: var(--ot-z-index-modal);
  --ot-menu-bg: var(--ot-bg-surface-raised);
  --ot-menu-border: var(--ot-border-subtle);
  --ot-menu-radius: var(--ot-radius-md);
  --ot-menu-padding: var(--ot-space-4);
  --ot-menu-offset: var(--ot-space-4);
  --ot-menu-shadow: var(--ot-elevation-md);
  --ot-menu-min-width: 220px;
  --ot-menu-max-width: 320px;
  --ot-menu-nav-width: 360px;
  --ot-menu-item-min-height: var(--ot-size-control-md);
  --ot-menu-item-padding-x: var(--ot-space-12);
  --ot-menu-item-gap: var(--ot-space-12);
  --ot-menu-item-radius: var(--ot-radius-sm);
  --ot-menu-item-text: var(--ot-text-primary);
  --ot-menu-item-icon: var(--ot-icon-secondary);
  --ot-menu-item-description: var(--ot-text-secondary);
  --ot-menu-item-bg-hover: var(--ot-bg-subtle);
  --ot-menu-item-bg-pressed: var(--ot-bg-subtle-hover);
  --ot-menu-item-focus-ring: var(--ot-focus-ring);
  --ot-menu-item-check: var(--ot-icon-brand);
  --ot-menu-item-danger: var(--ot-text-error);
  --ot-menu-item-danger-bg-hover: var(--ot-bg-error-subtle);
  --ot-menu-item-disabled: var(--ot-text-disabled);
  --ot-menu-nav-item-min-height: 64px;
  --ot-menu-nav-tile-size: var(--ot-size-control-md);
  --ot-menu-nav-tile-bg: var(--ot-bg-subtle);
  --ot-menu-nav-item-bg-hover: var(--ot-bg-page);
  --ot-menu-nav-item-bg-pressed: var(--ot-bg-subtle);
  --ot-menu-nav-tile-bg-hover: var(--ot-bg-brand);
  --ot-menu-nav-tile-icon-hover: var(--ot-text-on-brand);
  --ot-menu-group-label: var(--ot-text-secondary);
  --ot-menu-divider: var(--ot-border-subtle);
  --ot-menu-motion: var(--ot-motion-control);
  --ot-menu-z-index: var(--ot-z-index-dropdown);
  --ot-switch-width-sm: 36px;
  --ot-switch-width-md: 44px;
  --ot-switch-height-sm: 20px;
  --ot-switch-height-md: 24px;
  --ot-switch-thumb-sm: 16px;
  --ot-switch-thumb-md: 20px;
  --ot-switch-padding: 2px;
  --ot-switch-track-off: var(--ot-border-control);
  --ot-switch-track-off-hover: var(--ot-border-control-hover);
  --ot-switch-track-on: var(--ot-bg-brand);
  --ot-switch-track-on-hover: var(--ot-bg-brand-hover);
  --ot-switch-thumb-off: var(--ot-bg-surface);
  --ot-switch-thumb-on: var(--ot-text-on-brand);
  --ot-switch-check: var(--ot-bg-brand);
  --ot-switch-track-disabled: var(--ot-bg-disabled);
  --ot-switch-thumb-disabled: var(--ot-text-disabled);
  --ot-switch-check-disabled: var(--ot-bg-disabled);
  --ot-switch-focus-ring: var(--ot-focus-ring);
  --ot-switch-row-min-height: var(--ot-size-control-md);
  --ot-switch-gap: var(--ot-space-12);
  --ot-switch-motion: var(--ot-motion-control);
  --ot-drawer-bg: var(--ot-bg-surface);
  --ot-drawer-bg-tablet: var(--ot-bg-dialog);
  --ot-drawer-width-tablet: 400px;
  --ot-drawer-inset-tablet: var(--ot-space-8);
  --ot-drawer-radius-tablet: var(--ot-radius-2xl);
  --ot-drawer-shadow-tablet: var(--ot-elevation-dialog);
  --ot-drawer-overlay: var(--ot-bg-overlay);
  --ot-drawer-overlay-blur: 8px;
  --ot-drawer-top-height: 64px;
  --ot-drawer-padding-x: var(--ot-space-16);
  --ot-drawer-padding-x-tablet: var(--ot-space-20);
  --ot-drawer-tile-min-height: 76px;
  --ot-drawer-tile-radius: var(--ot-radius-lg);
  --ot-drawer-tile-bg: var(--ot-bg-subtle);
  --ot-drawer-tile-bg-pressed: var(--ot-bg-subtle-hover);
  --ot-drawer-item-min-height: 60px;
  --ot-drawer-item-text: var(--ot-text-primary);
  --ot-drawer-item-text-hover: var(--ot-text-brand);
  --ot-drawer-sub-min-height: 56px;
  --ot-drawer-sub-tile-size: 36px;
  --ot-drawer-sub-tile-bg: var(--ot-bg-subtle);
  --ot-drawer-sub-bg-pressed: var(--ot-bg-subtle-hover);
  --ot-drawer-current-bg: var(--ot-bg-brand-subtle);
  --ot-drawer-current-text: var(--ot-text-brand);
  --ot-drawer-current-tile-bg: var(--ot-bg-brand);
  --ot-drawer-current-icon: var(--ot-text-on-brand);
  --ot-drawer-current-dot: var(--ot-bg-brand);
  --ot-drawer-section-title: var(--ot-text-secondary);
  --ot-drawer-divider: var(--ot-border-subtle);
  --ot-drawer-motion-enter: var(--ot-motion-panel);
  --ot-drawer-motion-exit: var(--ot-duration-moderate) var(--ot-easing-exit) 0ms;
  --ot-drawer-motion-expand: var(--ot-motion-expand);
  --ot-drawer-stagger: 35ms;
  --ot-breadcrumb-text: var(--ot-text-secondary);
  --ot-breadcrumb-text-hover: var(--ot-text-link);
  --ot-breadcrumb-current: var(--ot-text-primary);
  --ot-breadcrumb-separator: var(--ot-icon-secondary);
  --ot-breadcrumb-separator-size: 16px;
  --ot-breadcrumb-gap: 4px;
  --ot-breadcrumb-min-height: 24px;
  --ot-breadcrumb-max-width: 240px;
  --ot-breadcrumb-max-width-narrow: 160px;
  --ot-breadcrumb-underline-width: 1px;
  --ot-breadcrumb-underline-offset: 4px;
  --ot-breadcrumb-focus-ring: var(--ot-focus-ring);
  --ot-breadcrumb-focus-radius: 4px;
  --ot-breadcrumb-collapse-below: 600px;
  --ot-breadcrumb-collapse-from-levels: 4;
  --ot-faq-max-width: 800px;
  --ot-faq-gap: 8px;
  --ot-faq-radius: var(--ot-radius-lg);
  --ot-faq-bg: var(--ot-bg-surface);
  --ot-faq-border: var(--ot-border-subtle);
  --ot-faq-bg-hover: var(--ot-bg-subtle);
  --ot-faq-question: var(--ot-text-primary);
  --ot-faq-answer: var(--ot-text-secondary);
  --ot-faq-icon: var(--ot-icon-secondary);
  --ot-faq-icon-size: 20px;
  --ot-faq-focus-ring: var(--ot-focus-ring);
  --ot-faq-padding-x-sm: 20px;
  --ot-faq-padding-x-md: 24px;
  --ot-faq-padding-y-sm: 16px;
  --ot-faq-padding-y-md: 20px;
  --ot-faq-min-height-sm: 56px;
  --ot-faq-min-height-md: 64px;
  --ot-faq-wide-from: 600px;
  --ot-faq-motion: var(--ot-duration-base);
  --ot-card-bg: var(--ot-bg-surface);
  --ot-card-border: var(--ot-border-subtle);
  --ot-card-border-hover: var(--ot-border-default);
  --ot-card-bg-pressed: var(--ot-bg-subtle);
  --ot-card-shadow-hover: var(--ot-elevation-md);
  --ot-card-radius: var(--ot-radius-xl);
  --ot-card-radius-compact: var(--ot-radius-lg);
  --ot-card-padding-sm: 20px;
  --ot-card-padding-md: 24px;
  --ot-card-padding-compact: 16px;
  --ot-card-gap: 8px;
  --ot-card-title: var(--ot-text-primary);
  --ot-card-text: var(--ot-text-secondary);
  --ot-card-meta: var(--ot-text-secondary);
  --ot-card-tile-bg: var(--ot-bg-subtle);
  --ot-card-tile-icon: var(--ot-icon-primary);
  --ot-card-tile-size: 48px;
  --ot-card-tile-size-compact: 40px;
  --ot-card-tile-radius: var(--ot-radius-md);
  --ot-card-arrow: var(--ot-icon-secondary);
  --ot-card-arrow-hover: var(--ot-icon-primary);
  --ot-card-arrow-nudge: 4px;
  --ot-card-media-ratio: 16/9;
  --ot-card-focus-ring: var(--ot-focus-ring);
  --ot-card-grid-gap-sm: 16px;
  --ot-card-grid-gap-md: 24px;
  --ot-card-skeleton: var(--ot-bg-subtle-hover);
  --ot-card-feature-radius: var(--ot-radius-2xl);
  --ot-card-feature-padding: 12px;
  --ot-card-feature-visual-radius: 20px;
  --ot-card-feature-visual-height: 240px;
  --ot-card-feature-visual-bg: var(--ot-bg-page);
  --ot-card-feature-body-padding: 20px 12px 12px;
  --ot-mega-menu-bg: var(--ot-bg-surface-raised);
  --ot-mega-menu-border: var(--ot-border-subtle);
  --ot-mega-menu-shadow: var(--ot-elevation-md);
  --ot-mega-menu-radius: var(--ot-radius-xl);
  --ot-mega-menu-padding: 32px;
  --ot-mega-menu-offset: 8px;
  --ot-mega-menu-max-width: 1328px;
  --ot-mega-menu-column-gap: 32px;
  --ot-mega-menu-promo-width: 300px;
  --ot-mega-menu-column-label: var(--ot-text-secondary);
  --ot-mega-menu-current-bg: var(--ot-bg-subtle);
  --ot-mega-menu-current-indicator: var(--ot-bg-brand);
  --ot-mega-menu-current-indicator-width: 3px;
  --ot-mega-menu-footer-link: var(--ot-text-link);
  --ot-mega-menu-motion: var(--ot-duration-base);
  --ot-mega-menu-from: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ot-duration-fast: 0ms;
    --ot-duration-base: 0ms;
    --ot-duration-moderate: 0ms;
    --ot-duration-slow: 0ms;
  }
}

/* Typography styles */
.ot-display { font-family: var(--ot-font-family-heading); font-size: 40px; line-height: 1.4; font-weight: var(--ot-font-weight-medium); }
.ot-h1 { font-family: var(--ot-font-family-heading); font-size: 32px; line-height: 1.4; font-weight: var(--ot-font-weight-medium); }
.ot-h2 { font-family: var(--ot-font-family-heading); font-size: 28px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
.ot-h3 { font-family: var(--ot-font-family-heading); font-size: 24px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
.ot-h4 { font-family: var(--ot-font-family-heading); font-size: 20px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
.ot-h5 { font-family: var(--ot-font-family-heading); font-size: 18px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
@media (min-width: 768px) {
  .ot-display { font-family: var(--ot-font-family-heading); font-size: 64px; line-height: 1.4; font-weight: var(--ot-font-weight-medium); }
  .ot-h1 { font-family: var(--ot-font-family-heading); font-size: 48px; line-height: 1.4; font-weight: var(--ot-font-weight-medium); }
  .ot-h2 { font-family: var(--ot-font-family-heading); font-size: 40px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
  .ot-h3 { font-family: var(--ot-font-family-heading); font-size: 32px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
  .ot-h4 { font-family: var(--ot-font-family-heading); font-size: 24px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
  .ot-h5 { font-family: var(--ot-font-family-heading); font-size: 20px; line-height: 1.4; font-weight: var(--ot-font-weight-semibold); }
}
.ot-body-lg { font-family: var(--ot-font-family-body); font-size: 18px; line-height: 1.6; font-weight: var(--ot-font-weight-regular); }
.ot-body-md { font-family: var(--ot-font-family-body); font-size: 16px; line-height: 1.6; font-weight: var(--ot-font-weight-regular); }
.ot-body-sm { font-family: var(--ot-font-family-body); font-size: 14px; line-height: 1.6; font-weight: var(--ot-font-weight-regular); }
.ot-caption { font-family: var(--ot-font-family-body); font-size: 12px; line-height: 1.6; font-weight: var(--ot-font-weight-regular); }
.ot-label-lg { font-family: var(--ot-font-family-body); font-size: 16px; line-height: 24px; font-weight: var(--ot-font-weight-medium); }
.ot-label-md { font-family: var(--ot-font-family-body); font-size: 14px; line-height: 20px; font-weight: var(--ot-font-weight-medium); }
.ot-label-sm { font-family: var(--ot-font-family-body); font-size: 12px; line-height: 16px; font-weight: var(--ot-font-weight-medium); }

/* English (LTR) */
:lang(en) {
  --ot-font-family-heading: var(--ot-font-family-heading-en);
  --ot-font-family-body: var(--ot-font-family-body-en);
  --ot-font-line-height-heading: var(--ot-font-line-height-en-heading);
  --ot-font-line-height-body: var(--ot-font-line-height-en-body);
}
:lang(en) .ot-display { line-height: var(--ot-font-line-height-en-display); letter-spacing: var(--ot-font-letter-spacing-en-display); }
:lang(en) .ot-h1 { line-height: var(--ot-font-line-height-en-heading); letter-spacing: var(--ot-font-letter-spacing-en-h1); }
:lang(en) .ot-h2 { line-height: var(--ot-font-line-height-en-heading); letter-spacing: var(--ot-font-letter-spacing-en-h2); }
:lang(en) .ot-h3 { line-height: var(--ot-font-line-height-en-heading); letter-spacing: var(--ot-font-letter-spacing-en-h3); }
:lang(en) .ot-h4 { line-height: var(--ot-font-line-height-en-heading); letter-spacing: var(--ot-font-letter-spacing-en-h4); }
:lang(en) .ot-h5 { line-height: var(--ot-font-line-height-en-heading); letter-spacing: var(--ot-font-letter-spacing-en-h5); }
:lang(en) .ot-body-lg { line-height: var(--ot-font-line-height-en-body); }
:lang(en) .ot-body-md { line-height: var(--ot-font-line-height-en-body); }
:lang(en) .ot-body-sm { line-height: var(--ot-font-line-height-en-body); }
:lang(en) .ot-caption { line-height: var(--ot-font-line-height-en-body); }