html[data-theme="vaimail"] {
  --font-family-base: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-4xl: 2.5rem;
  --border-width-none: 0px;
  --border-width-thin: 1px;
  --border-width-default: 1px;
  --border-width-medium: 1.5px;
  --border-width-thick: 2px;
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-22: 5.5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --spacing-0_5: 0.125rem;
  --spacing-1_5: 0.375rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-control: 0 0 0 0 rgb(0 0 0 / 0);
  --shadow-control-pressed: 0 0 0 0 rgb(0 0 0 / 0);
  --shadow-control-bordered: 0 0 0 0 rgb(0 0 0 / 0);
  --shadow-control-bordered-pressed: 0 0 0 0 rgb(0 0 0 / 0);
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-drawer: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --container-width: 80rem;
  --container-dialog: 30rem;
  --container-toast-min: 18.75rem;
  --container-toast-max: 26.25rem;
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;
  --control-height-xl: 3.5rem;
  --control-padding-x-sm: 0.75rem;
  --control-padding-x-md: 1rem;
  --control-padding-x-lg: 1.25rem;
  --control-padding-x-xl: 1.5rem;
  --control-padding-y-sm: 0.25rem;
  --control-padding-y-md: 0.5rem;
  --control-padding-y-lg: 0.5rem;
  --control-padding-y-xl: 0.75rem;
  --focus-ring-width: 3px;
  --focus-ring-offset: 0px;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --motion-preset-interactive: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-preset-fade: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --intent-success: var(--success-fill);
  --intent-warning: var(--warning-fill);
  --intent-danger: var(--error-fill);
  --intent-info: var(--info-fill);
  --elevation-0: none;
  --elevation-1: var(--shadow-sm);
  --elevation-2: var(--shadow-default);
  --elevation-3: var(--shadow-md);
  --elevation-4: var(--shadow-lg);
  --elevation-5: var(--shadow-xl);
  --shadow-sm-color: rgb(0 0 0 / 0.05);
  --shadow-default-color: rgb(0 0 0 / 0.1);
  --shadow-md-color: rgb(0 0 0 / 0.1);
  --shadow-lg-color: rgb(0 0 0 / 0.1);
  --shadow-xl-color: rgb(0 0 0 / 0.1);
  --shadow-control-color: rgb(0 0 0 / 0);
  --shadow-control-pressed-color: rgb(0 0 0 / 0);
  --shadow-control-bordered-color: rgb(0 0 0 / 0);
  --shadow-control-bordered-pressed-color: rgb(0 0 0 / 0);
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line-height: 1.25rem;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: 0em;
  --type-body-md-size: 1rem;
  --type-body-md-line-height: 1.5rem;
  --type-body-md-weight: 400;
  --type-body-md-tracking: 0em;
  --type-body-lg-size: 1.125rem;
  --type-body-lg-line-height: 1.75rem;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: 0em;
  --type-label-sm-size: 0.75rem;
  --type-label-sm-line-height: 1rem;
  --type-label-sm-weight: 500;
  --type-label-sm-tracking: 0em;
  --type-label-md-size: 0.875rem;
  --type-label-md-line-height: 1.25rem;
  --type-label-md-weight: 500;
  --type-label-md-tracking: 0em;
  --type-label-lg-size: 1rem;
  --type-label-lg-line-height: 1.5rem;
  --type-label-lg-weight: 500;
  --type-label-lg-tracking: 0em;
  --type-caption-size: 0.75rem;
  --type-caption-line-height: 1rem;
  --type-caption-weight: 400;
  --type-caption-tracking: 0em;
  --type-overline-size: 0.75rem;
  --type-overline-line-height: 1rem;
  --type-overline-weight: 400;
  --type-overline-tracking: 0em;
  --type-heading-sm-size: 1.25rem;
  --type-heading-sm-line-height: 1.75rem;
  --type-heading-sm-weight: 600;
  --type-heading-sm-tracking: 0em;
  --type-heading-md-size: 1.5rem;
  --type-heading-md-line-height: 2rem;
  --type-heading-md-weight: 600;
  --type-heading-md-tracking: 0em;
  --type-heading-lg-size: 2rem;
  --type-heading-lg-line-height: 2.5rem;
  --type-heading-lg-weight: 600;
  --type-heading-lg-tracking: 0em;
  --type-code-sm-size: 0.75rem;
  --type-code-sm-line-height: 1rem;
  --type-code-sm-weight: 400;
  --type-code-sm-tracking: 0em;
  --type-code-md-size: 0.875rem;
  --type-code-md-line-height: 1.25rem;
  --type-code-md-weight: 400;
  --type-code-md-tracking: 0em;
  --generic-white: 0 0% 100%;
  --generic-black: 0 0% 0%;
  --foreground-primary: 240 3% 6%;
  --foreground-secondary: 228 4% 25%;
  --foreground-muted: 227 4% 43%;
  --foreground-disabled: 229 5% 57%;
  --surface-page: 0 0% 98%;
  --surface-card: 0 0% 100%;
  --surface-subtle: 0 0% 94%;
  --surface-moderate: 245 10% 88%;
  --surface-strong: 238 8% 80%;
  --border-default: 245 10% 88%;
  --border-strong: 238 8% 80%;
  --focus-ring: 219 88% 54%;
  --brand-fill: 221 83% 53%;
  --neutral-fill: 0 0% 98%;
  --neutral-fill-hover: 0 0% 94%;
  --neutral-fill-pressed: 245 10% 88%;
  --neutral-fill-disabled: 0 0% 98%;
  --on-neutral: 240 3% 6%;
  --success-fill: 162 86% 35%;
  --success-surface: 152 39% 98%;
  --success-border: 152 48% 84%;
  --warning-fill: 30 100% 44%;
  --warning-surface: 34 100% 97%;
  --warning-border: 32 94% 83%;
  --error-fill: 4 83% 55%;
  --error-surface: 0 100% 99%;
  --error-border: 2 92% 91%;
  --info-fill: 219 88% 54%;
  --info-surface: 217 100% 98%;
  --info-border: 216 92% 90%;
  --brand-50: 216 44% 98%;
  --brand-100: 216 54% 95%;
  --brand-200: 216 66% 90%;
  --brand-300: 216 77% 82%;
  --brand-400: 217 88% 69%;
  --brand-500: 221 83% 53%;
  --brand-600: 221 70% 48%;
  --brand-700: 220 71% 40%;
  --brand-800: 219 69% 31%;
  --brand-900: 218 64% 23%;
  --brand-950: 217 57% 15%;
  --brand-fill-hover: var(--brand-600);
  --brand-fill-pressed: var(--brand-700);
  --brand-fill-disabled: var(--brand-200);
  --on-brand: 0 0% 100%;
  --on-error: 0 0% 100%;
  --on-success: 0 0% 100%;
  --on-warning: 0 0% 100%;
  --on-info: 0 0% 100%;
  --info-fill-hover: 222 82% 48%;
  --info-fill-pressed: 224 76% 40%;
  --info-fill-disabled: 216 92% 90%;
  --info-text: 224 76% 40%;
  --success-fill-hover: 164 80% 29%;
  --success-fill-pressed: 166 74% 23%;
  --success-fill-disabled: 152 48% 84%;
  --success-text: 166 74% 23%;
  --warning-fill-hover: 28 90% 35%;
  --warning-fill-pressed: 26 80% 27%;
  --warning-fill-disabled: 32 94% 83%;
  --warning-text: 26 80% 27%;
  --error-fill-hover: 6 76% 48%;
  --error-fill-pressed: 8 70% 40%;
  --error-fill-disabled: 2 92% 91%;
  --error-text: 8 70% 40%;
}

html.dark[data-theme="vaimail"] {
  --foreground-primary: 0 0% 98%;
  --foreground-secondary: 245 10% 88%;
  --foreground-muted: 231 6% 69%;
  --foreground-disabled: 227 4% 43%;
  --surface-page: 0 0% 0%;
  --surface-card: 240 3% 6%;
  --surface-subtle: 240 4% 15%;
  --surface-moderate: 228 4% 25%;
  --surface-strong: 228 4% 34%;
  --border-default: 240 4% 15%;
  --border-strong: 228 4% 25%;
  --focus-ring: 218 88% 69%;
  --brand-fill: 221 83% 53%;
  --neutral-fill: 240 4% 15%;
  --neutral-fill-hover: 228 4% 25%;
  --neutral-fill-pressed: 228 4% 34%;
  --neutral-fill-disabled: 240 4% 15%;
  --on-neutral: 0 0% 98%;
  --success-fill: 162 86% 35%;
  --success-surface: 150 55% 10%;
  --success-border: 168 68% 18%;
  --warning-fill: 30 100% 44%;
  --warning-surface: 30 100% 10%;
  --warning-border: 24 70% 20%;
  --error-fill: 4 83% 55%;
  --error-surface: 356 89% 17%;
  --error-border: 10 64% 32%;
  --info-fill: 219 88% 54%;
  --info-surface: 216 82% 17%;
  --info-border: 226 70% 32%;
  --on-brand: 0 0% 100%;
  --on-error: 0 0% 100%;
  --on-success: 0 0% 100%;
  --on-warning: 0 0% 100%;
  --on-info: 0 0% 100%;
  --brand-fill-disabled: var(--brand-900);
  --info-fill-hover: 222 82% 48%;
  --info-fill-pressed: 224 76% 40%;
  --info-fill-disabled: 228 64% 24%;
  --info-text: 217 90% 83%;
  --success-fill-hover: 164 80% 29%;
  --success-fill-pressed: 166 74% 23%;
  --success-fill-disabled: 168 58% 14%;
  --success-text: 156 52% 71%;
  --warning-fill-hover: 28 90% 35%;
  --warning-fill-pressed: 26 80% 27%;
  --warning-fill-disabled: 22 60% 14%;
  --warning-text: 31 92% 73%;
  --error-fill-hover: 6 76% 48%;
  --error-fill-pressed: 8 70% 40%;
  --error-fill-disabled: 12 58% 24%;
  --error-text: 3 88% 84%;
}