/* Generated from tokens/howto.tokens.json. Do not edit by hand. */
:root {
  --ht-color-blue-50: #EDF3FA;
  --ht-color-blue-100: #DCE8F5;
  --ht-color-blue-200: #B8D0EB;
  --ht-color-blue-300: #84ACD7;
  --ht-color-blue-400: #4D85BE;
  --ht-color-blue-500: #28669E;
  --ht-color-blue-600: #144B7D;
  --ht-color-blue-700: #0A2E5A;
  --ht-color-blue-800: #082548;
  --ht-color-blue-900: #071D38;
  --ht-color-green-50: #F4F9E7;
  --ht-color-green-100: #EAF4CF;
  --ht-color-green-200: #D4E7A1;
  --ht-color-green-300: #BCDC6E;
  --ht-color-green-400: #99CE1D;
  --ht-color-green-500: #84BD00;
  --ht-color-green-550: #7AB100;
  --ht-color-green-600: #5D8700;
  --ht-color-green-700: #426000;
  --ht-color-neutral-0: #FFFFFF;
  --ht-color-neutral-50: #F7F9FB;
  --ht-color-neutral-100: #EDF2F6;
  --ht-color-neutral-200: #D5DEE8;
  --ht-color-neutral-300: #B4C2D1;
  --ht-color-neutral-400: #8A9CB0;
  --ht-color-neutral-500: #70839A;
  --ht-color-neutral-600: #52657A;
  --ht-color-neutral-700: #354A61;
  --ht-color-neutral-800: #24364B;
  --ht-color-neutral-900: #14263B;
  --ht-color-neutral-950: #0B1727;
  --ht-color-state-success: #1B6E43;
  --ht-color-state-success-bg: #EAF6EF;
  --ht-color-state-warning: #805300;
  --ht-color-state-warning-bg: #FFF5DB;
  --ht-color-state-danger: #B42332;
  --ht-color-state-danger-bg: #FFF1F2;
  --ht-color-state-info: #0A4B82;
  --ht-color-state-info-bg: #EAF3FC;
  --ht-color-dark-surface: #0D2C4E;
  --ht-color-dark-raised: #14395E;
  --ht-color-dark-border: #7890A9;
  --ht-color-dark-text: #F4F7FB;
  --ht-color-dark-muted: #BECCDB;
  --ht-color-dark-success: #8FE0B2;
  --ht-color-dark-success-bg: #123D32;
  --ht-color-dark-warning: #F4CE78;
  --ht-color-dark-warning-bg: #3E3219;
  --ht-color-dark-danger: #FFB4BC;
  --ht-color-dark-danger-bg: #48232F;
  --ht-color-dark-info: #ACD6FF;
  --ht-color-dark-info-bg: #143B61;
  --ht-space-0: 0px;
  --ht-space-4: 4px;
  --ht-space-8: 8px;
  --ht-space-12: 12px;
  --ht-space-16: 16px;
  --ht-space-24: 24px;
  --ht-space-32: 32px;
  --ht-space-40: 40px;
  --ht-space-48: 48px;
  --ht-space-64: 64px;
  --ht-space-80: 80px;
  --ht-space-96: 96px;
  --ht-radius-0: 0px;
  --ht-radius-4: 4px;
  --ht-radius-8: 8px;
  --ht-radius-12: 12px;
  --ht-radius-16: 16px;
  --ht-radius-999: 999px;
  --ht-font-display: "Rajdhani", sans-serif;
  --ht-font-body: "Inter", "Arial", sans-serif;
  --ht-font-regular: 400;
  --ht-font-semibold: 600;
  --ht-font-bold: 700;
  --ht-type-12: 12px;
  --ht-type-14: 14px;
  --ht-type-16: 16px;
  --ht-type-18: 18px;
  --ht-type-20: 20px;
  --ht-type-24: 24px;
  --ht-type-28: 28px;
  --ht-type-36: 36px;
  --ht-type-40: 40px;
  --ht-type-48: 48px;
  --ht-type-56: 56px;
  --ht-duration-0: 0ms;
  --ht-duration-100: 100ms;
  --ht-duration-160: 160ms;
  --ht-duration-240: 240ms;
  --ht-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ht-layout-max: 1200px;
  --ht-layout-mobile: 0px;
  --ht-layout-tablet: 640px;
  --ht-layout-desktop: 1024px;
  --ht-layout-wide: 1440px;
  --ht-layer-base: 0;
  --ht-layer-sticky: 100;
  --ht-layer-popover: 200;
  --ht-layer-overlay: 300;
  --ht-layer-toast: 400;
  --ht-button-height: 44px;
  --ht-button-height-small: 36px;
  --ht-button-height-large: 52px;
  --ht-button-radius: 8px;
  --ht-button-padding-x: 16px;
  --ht-button-gap: 8px;
  --ht-field-height: 48px;
  --ht-field-radius: 8px;
  --ht-field-padding-x: 12px;
  --ht-card-radius: 12px;
  --ht-card-padding: 24px;
  --ht-dialog-width: 560px;
  --ht-dialog-radius: 16px;
  --ht-dialog-padding: 24px;
  --ht-focus-width: 3px;
  --ht-focus-offset: 3px;
  --ht-icon-size: 24px;
  --ht-icon-stroke: 1.7;
  --ht-target-min: 44px;
  --ht-table-row-min: 56px;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --ht-bg: #F7F9FB;
  --ht-surface: #FFFFFF;
  --ht-surface-raised: #FFFFFF;
  --ht-surface-subtle: #EDF2F6;
  --ht-text: #24364B;
  --ht-text-muted: #52657A;
  --ht-heading: #0A2E5A;
  --ht-border: #D5DEE8;
  --ht-border-control: #70839A;
  --ht-focus: #0A2E5A;
  --ht-link: #0A2E5A;
  --ht-link-hover: #28669E;
  --ht-action-primary: #84BD00;
  --ht-action-primary-hover: #99CE1D;
  --ht-action-primary-active: #7AB100;
  --ht-on-primary: #0A2E5A;
  --ht-action-secondary: #FFFFFF;
  --ht-action-secondary-hover: #EDF3FA;
  --ht-on-secondary: #0A2E5A;
  --ht-disabled-bg: #EDF2F6;
  --ht-disabled-text: #52657A;
  --ht-inverse-bg: #0A2E5A;
  --ht-inverse-text: #FFFFFF;
  --ht-success: #1B6E43;
  --ht-success-bg: #EAF6EF;
  --ht-warning: #805300;
  --ht-warning-bg: #FFF5DB;
  --ht-danger: #B42332;
  --ht-danger-bg: #FFF1F2;
  --ht-info: #0A4B82;
  --ht-info-bg: #EAF3FC;
}
[data-theme="dark"] {
  color-scheme: dark;
  --ht-bg: #071D38;
  --ht-surface: #0D2C4E;
  --ht-surface-raised: #14395E;
  --ht-surface-subtle: #14395E;
  --ht-text: #F4F7FB;
  --ht-text-muted: #BECCDB;
  --ht-heading: #FFFFFF;
  --ht-border: #28669E;
  --ht-border-control: #7890A9;
  --ht-focus: #BCDC6E;
  --ht-link: #BCDC6E;
  --ht-link-hover: #D4E7A1;
  --ht-action-primary: #84BD00;
  --ht-action-primary-hover: #99CE1D;
  --ht-action-primary-active: #7AB100;
  --ht-on-primary: #0A2E5A;
  --ht-action-secondary: #0D2C4E;
  --ht-action-secondary-hover: #14395E;
  --ht-on-secondary: #F4F7FB;
  --ht-disabled-bg: #14395E;
  --ht-disabled-text: #BECCDB;
  --ht-inverse-bg: #0A2E5A;
  --ht-inverse-text: #FFFFFF;
  --ht-success: #8FE0B2;
  --ht-success-bg: #123D32;
  --ht-warning: #F4CE78;
  --ht-warning-bg: #3E3219;
  --ht-danger: #FFB4BC;
  --ht-danger-bg: #48232F;
  --ht-info: #ACD6FF;
  --ht-info-bg: #143B61;
}