:root { --color-empty: unset; --gray-950: #0f1117; --gray-900: #17191c; --gray-800: #2c3038; --gray-700: #3d4350; --gray-600: #4a5669; --gray-500: #5f6d82; --gray-400: #8895a7; --gray-300: #a0abbc; --gray-200: #c5cbd6; --gray-100: #e6e9ee; --gray-50: #f0f2f5; --gray-25: #f7f8fa; --gray-0: #ffffff; --gray-gradient-start: #f7f8fa; --gray-gradient-end: #e6e9ee; --gray-gradient-h: linear-gradient(90deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%); --gray-gradient-v: linear-gradient(0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%); --brand-primary: #844fe1; --brand-primary-hover: #7340cc; --brand-primary-active: #6535b8; --brand-primary-lighter: #a478f0; --brand-primary-lighter-2: #c9adf7; --brand-primary-lighter-3: #e4d6fb; --brand-primary-lighter-4: #f3edfd; --brand-primary-darker: #663dad; --brand-primary-darkest: #4a2b7e; --brand-primary-gradient-start: #663dad; --brand-primary-gradient-end: #a478f0; --brand-primary-gradient-h: linear-gradient(90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%); --brand-primary-gradient-v: linear-gradient(0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%); --brand-primary-shadow: rgba(132, 79, 225, 0.25); --brand-primary-ghost: rgba(132, 79, 225, 0.08); --brand-secondary: #ffcc33; --brand-secondary-hover: #f0be1a; --brand-secondary-active: #daaf00; --brand-secondary-lighter: #ffdb66; --brand-secondary-lighter-2: #ffe999; --brand-secondary-lighter-3: #fff4cc; --brand-secondary-lighter-4: #fffae6; --brand-secondary-darker: #cc9900; --brand-secondary-darkest: #997300; --brand-secondary-gradient-start: #cc9900; --brand-secondary-gradient-end: #ffdb66; --brand-secondary-gradient-h: linear-gradient(90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%); --brand-secondary-gradient-v: linear-gradient(0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%); --brand-secondary-shadow: rgba(255, 204, 51, 0.25); --brand-accent: #0098ef; --brand-accent-hover: #0085d4; --brand-accent-active: #0073b9; --brand-accent-lighter: #33b0f5; --brand-accent-lighter-2: #80ccf7; --brand-accent-lighter-3: #cce8fc; --brand-accent-lighter-4: #e6f4fe; --brand-accent-darker: #006bb3; --brand-accent-darkest: #004d80; --brand-accent-gradient-start: #006bb3; --brand-accent-gradient-end: #33b0f5; --brand-accent-gradient-h: linear-gradient(90deg, var(--brand-accent-gradient-start) 0%, var(--brand-accent-gradient-end) 100%); --brand-accent-gradient-v: linear-gradient(0deg, var(--brand-accent-gradient-end) 0%, var(--brand-accent-gradient-start) 100%); --brand-accent-shadow: rgba(0, 152, 239, 0.25); --brand-success: #10b981; --brand-success-hover: #0d9f6e; --brand-success-lighter: #34d399; --brand-success-lighter-2: #a7f3d0; --brand-success-lighter-3: #d1fae5; --brand-success-lighter-4: #ecfdf5; --brand-success-darker: #047857; --brand-success-gradient-start: #047857; --brand-success-gradient-end: #34d399; --brand-success-gradient-h: linear-gradient(90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%); --brand-success-gradient-v: linear-gradient(0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-start) 100%); --brand-warning: #f59e0b; --brand-warning-hover: #d97706; --brand-warning-lighter: #fbbf24; --brand-warning-lighter-2: #fde68a; --brand-warning-lighter-3: #fef3c7; --brand-warning-lighter-4: #fffbeb; --brand-warning-darker: #b45309; --brand-warning-gradient-start: #b45309; --brand-warning-gradient-end: #fbbf24; --brand-warning-gradient-h: linear-gradient(90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%); --brand-warning-gradient-v: linear-gradient(0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%); --brand-danger: #ef4444; --brand-danger-hover: #dc2626; --brand-danger-lighter: #f87171; --brand-danger-lighter-2: #fca5a5; --brand-danger-lighter-3: #fee2e2; --brand-danger-lighter-4: #fef2f2; --brand-danger-darker: #b91c1c; --brand-danger-gradient-start: #b91c1c; --brand-danger-gradient-end: #f87171; --brand-danger-gradient-h: linear-gradient(90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%); --brand-danger-gradient-v: linear-gradient(0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%); --brand-info: #3b82f6; --brand-info-hover: #2563eb; --brand-info-lighter: #60a5fa; --brand-info-lighter-2: #93c5fd; --brand-info-lighter-3: #dbeafe; --brand-info-lighter-4: #eff6ff; --brand-info-darker: #1d4ed8; --brand-info-gradient-start: #1d4ed8; --brand-info-gradient-end: #60a5fa; --brand-info-gradient-h: linear-gradient(90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%); --brand-info-gradient-v: linear-gradient(0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%); --surface-page: #f7f8fa; --surface-card: #ffffff; --surface-card-hover: #f7f8fa; --surface-overlay: #ffffff; --surface-elevated: #ffffff; --surface-inset: #f0f2f5; --surface-disabled: #f0f2f5; --border-default: #e6e9ee; --border-light: #f0f2f5; --border-strong: #c5cbd6; --border-focus: var(--brand-primary); --border-error: var(--brand-danger); --spacing-unit: 8px; --spacing-0: 0px; --spacing-0_5x: calc(var(--spacing-unit) * 0.5); --spacing-1x: var(--spacing-unit); --spacing-1_5x: calc(var(--spacing-unit) * 1.5); --spacing-2x: calc(var(--spacing-unit) * 2); --spacing-2_5x: calc(var(--spacing-unit) * 2.5); --spacing-3x: calc(var(--spacing-unit) * 3); --spacing-4x: calc(var(--spacing-unit) * 4); --spacing-5x: calc(var(--spacing-unit) * 5); --spacing-6x: calc(var(--spacing-unit) * 6); --spacing-8x: calc(var(--spacing-unit) * 8); --spacing-10x: calc(var(--spacing-unit) * 10); --spacing-12x: calc(var(--spacing-unit) * 12); --spacing-16x: calc(var(--spacing-unit) * 16); --spacing-20x: calc(var(--spacing-unit) * 20); --spacing-24x: calc(var(--spacing-unit) * 24); --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; --shadow-none: none; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.10), 0 8px 16px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.08); --shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.20); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px var(--brand-primary-shadow); --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.25); --ui-block-bg: var(--surface-card); --ui-block-bg-hover: var(--surface-card-hover); --ui-block-bg-form: var(--surface-card); --ui-block-border-color: var(--border-default); --ui-block-border: 1px solid var(--ui-block-border-color); --ui-block-border-radius: var(--radius-lg); --ui-block-border-radius-lg: var(--radius-xl); --ui-block-shadow: var(--shadow-sm); --ui-block-shadow-hover: var(--shadow-md); --ui-block-shadow-lg: var(--shadow-lg); --ui-block-shadow-xl: var(--shadow-xl); --ui-block-overlay-bg: var(--surface-overlay); --ui-block-overlay-shadow: var(--shadow-lg); --ui-block-divider-color: var(--border-default); --ui-block-divider: 1px solid var(--ui-block-divider-color); --ui-block-header-bg: transparent; --ui-block-header-height: 56px; --ui-block-padding-xs: var(--spacing-1x); --ui-block-padding-sm: var(--spacing-2x); --ui-block-padding-base: var(--spacing-2x); --ui-block-padding-lg: var(--spacing-3x); --ui-block-padding-xl: var(--spacing-4x); --ui-block-spacing-xs: var(--spacing-1x); --ui-block-spacing-sm: var(--spacing-1_5x); --ui-block-spacing-base: var(--spacing-2x); --ui-block-spacing-lg: var(--spacing-2x); --ui-block-spacing-xl: var(--spacing-3x); --ui-block-spacing-2xl: var(--spacing-4x); --ui-block-spacing-3xl: var(--spacing-5x); --ui-height-xs: 28px; --ui-height-sm: 32px; --ui-height-base: 40px; --ui-height-lg: 48px; --ui-height-xl: 56px; --ui-block-link-hover-bg: var(--gray-50); --ui-block-link-active-bg: var(--gray-100); --ui-block-link-disabled-color: var(--gray-400); --ui-nav-link-bg: transparent; --ui-nav-link-border-radius: var(--radius-base); --ui-nav-link-hover-bg: var(--gray-50); --ui-nav-link-active-bg: var(--brand-primary-ghost); --ui-nav-link-icon-size: 18px; --ui-nav-link-icon-spacing: 10px; --ui-nav-link-padding-h: var(--spacing-2x); --ui-nav-link-padding-v: var(--spacing-1x); --state-success-bg: var(--brand-success-lighter-4); --state-success-border: var(--brand-success-lighter-2); --state-success-text: var(--brand-success-darker); --state-info-bg: var(--brand-info-lighter-4); --state-info-border: var(--brand-info-lighter-2); --state-info-text: var(--brand-info-darker); --state-warning-bg: var(--brand-warning-lighter-4); --state-warning-border: var(--brand-warning-lighter-2); --state-warning-text: var(--brand-warning-darker); --state-danger-bg: var(--brand-danger-lighter-4); --state-danger-border: var(--brand-danger-lighter-2); --state-danger-text: var(--brand-danger-darker); --label-font-size: var(--font-size-xs); --label-line-height: var(--line-height-xs); --label-padding: 3px 8px; --label-border-radius: var(--radius-sm); --label-font-weight: var(--font-weight-semibold); --label-text-transform: none; --label-default-bg: var(--gray-100); --label-default-color: var(--gray-700); --label-primary-bg: var(--brand-primary-lighter-4); --label-primary-color: var(--brand-primary-darker); --label-secondary-bg: var(--brand-secondary-lighter-4); --label-secondary-color: var(--brand-secondary-darker); --label-success-bg: var(--brand-success-lighter-4); --label-success-color: var(--brand-success-darker); --label-warning-bg: var(--brand-warning-lighter-4); --label-warning-color: var(--brand-warning-darker); --label-danger-bg: var(--brand-danger-lighter-4); --label-danger-color: var(--brand-danger-darker); --label-info-bg: var(--brand-info-lighter-4); --label-info-color: var(--brand-info-darker); --status-active: var(--brand-success); --status-pending: var(--brand-warning); --status-pending-transfer: var(--brand-warning-lighter); --status-suspended: var(--brand-warning-darker); --status-terminated: var(--gray-400); --status-cancelled: var(--gray-300); --status-fraud: var(--gray-800); --status-expired: var(--brand-info); --status-grace: var(--brand-warning-darker); --status-onhold: var(--brand-info-lighter); --status-inprogress: var(--brand-accent); --status-customer-reply: var(--brand-warning); --status-answered: var(--brand-primary-lighter); --status-closed: var(--gray-600); --status-paid: var(--brand-success); --status-unpaid: var(--brand-danger); --status-collections: var(--gray-500); --status-refunded: var(--brand-warning); --status-payment-pending: var(--brand-info); --status-accepted: var(--brand-success); --status-delivered: var(--brand-warning-lighter); --status-lost: var(--gray-800); --status-default: var(--gray-600); --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fade: opacity 150ms ease; --transition-collapse: height 300ms ease; --transition-transform: transform 200ms ease; --transition-all: all 200ms ease; --z-below: -1; --z-base: 0; --z-raised: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; --z-max: 9999; --container-xs: 380px; --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1200px; --container-2xl: 1400px; --gutter-base: var(--spacing-2x); --gutter-sm: var(--spacing-2x); --gutter-lg: var(--spacing-3x); --gutter-xl: var(--spacing-4x); --scrollbar-width: 6px; --scrollbar-track-bg: var(--gray-50); --scrollbar-thumb-bg: var(--gray-200); --scrollbar-thumb-hover-bg: var(--gray-300); --scrollbar-thumb-radius: var(--radius-full); --icon-color: var(--gray-500); --icon-color-hover: var(--gray-700); --icon-color-active: var(--brand-primary); --icon-size-xs: 12px; --icon-size-sm: 16px; --icon-size-base: 20px; --icon-size-lg: 24px; --icon-size-xl: 32px; --icon-size-2xl: 40px; --icon-size-3xl: 48px; --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', monospace; --font-family-system: unset; --font-family-custom: unset; --font-weight-thin: 100; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --font-weight-base: var(--font-weight-regular); --font-weight-heading: var(--font-weight-semibold); --font-size-2xs: 10px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-h6: 16px; --font-size-h5: 18px; --font-size-h4: 18px; --font-size-h3: 20px; --font-size-h2: 24px; --font-size-h1: 28px; --font-size-display-sm: 32px; --font-size-display: 36px; --font-size-display-lg: 42px; --font-weight-h6: var(--font-weight-semibold); --font-weight-h5: var(--font-weight-semibold); --font-weight-h4: var(--font-weight-semibold); --font-weight-h3: var(--font-weight-semibold); --font-weight-h2: var(--font-weight-bold); --font-weight-h1: var(--font-weight-bold); --font-weight-display: var(--font-weight-extrabold); --line-height-2xs: 14px; --line-height-xs: 16px; --line-height-sm: 18px; --line-height-base: 20px; --line-height-md: 22px; --line-height-lg: 24px; --line-height-xl: 28px; --line-height-2xl: 30px; --line-height-3xl: 36px; --line-height-h6: 24px; --line-height-h5: 28px; --line-height-h4: 26px; --line-height-h3: 28px; --line-height-h2: 32px; --line-height-h1: 36px; --line-height-display-sm: 40px; --line-height-display: 44px; --line-height-display-lg: 50px; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; --letter-spacing-h1: var(--letter-spacing-tight); --letter-spacing-h2: var(--letter-spacing-tight); --letter-spacing-h3: var(--letter-spacing-tight); --letter-spacing-display: -0.04em; --text-heading: var(--gray-900); --text-body: var(--gray-600); --text-secondary: var(--gray-500); --text-muted: var(--gray-400); --text-disabled: var(--gray-300); --text-inverse: var(--gray-0); --text-primary: var(--brand-primary); --text-success: var(--brand-success-darker); --text-warning: var(--brand-warning-darker); --text-danger: var(--brand-danger-darker); --link-color: var(--brand-primary); --link-hover-color: var(--brand-primary-darker); --link-active-color: var(--brand-primary-darkest); --link-visited-color: var(--brand-primary-darker); --link-decoration: none; --link-hover-decoration: none; --ui-nav-link-color: var(--gray-700); --ui-nav-link-hover-color: var(--gray-900); --ui-nav-link-active-color: var(--brand-primary); --ui-nav-link-icon-color: var(--gray-400); --ui-nav-link-icon-hover-color: var(--gray-600); --ui-nav-link-icon-active-color: var(--brand-primary); --ui-nav-link-disabled-color: var(--gray-300); --ui-nav-secondary-link-color: var(--gray-600); --ui-nav-secondary-link-hover-color: var(--gray-900); --ui-nav-secondary-link-active-color: var(--brand-primary); --btn-font-family: var(--font-family-body); --btn-font-weight: var(--font-weight-semibold); --btn-text-transform: none; --btn-letter-spacing: var(--letter-spacing-normal); --btn-border-width: 1px; --btn-cursor: pointer; --btn-disabled-opacity: 0.5; --btn-transition: var(--transition-base); --btn-xs-height: var(--ui-height-xs); --btn-xs-padding: 4px 10px; --btn-xs-font-size: var(--font-size-xs); --btn-xs-line-height: var(--line-height-xs); --btn-xs-border-radius: var(--radius-sm); --btn-sm-height: var(--ui-height-sm); --btn-sm-padding: 6px 14px; --btn-sm-font-size: var(--font-size-sm); --btn-sm-line-height: var(--line-height-sm); --btn-sm-border-radius: var(--radius-base); --btn-base-height: var(--ui-height-base); --btn-base-padding: 8px 18px; --btn-base-font-size: var(--font-size-base); --btn-base-line-height: var(--line-height-base); --btn-base-border-radius: var(--radius-base); --btn-lg-height: var(--ui-height-lg); --btn-lg-padding: 12px 24px; --btn-lg-font-size: var(--font-size-lg); --btn-lg-line-height: var(--line-height-lg); --btn-lg-border-radius: var(--radius-md); --btn-xl-height: var(--ui-height-xl); --btn-xl-padding: 16px 32px; --btn-xl-font-size: var(--font-size-xl); --btn-xl-line-height: var(--line-height-xl); --btn-xl-border-radius: var(--radius-md); --btn-primary-bg: var(--brand-primary); --btn-primary-color: #ffffff; --btn-primary-border: var(--brand-primary); --btn-primary-hover-bg: var(--brand-primary-hover); --btn-primary-hover-color: #ffffff; --btn-primary-hover-border: var(--brand-primary-hover); --btn-primary-active-bg: var(--brand-primary-active); --btn-primary-focus-shadow: var(--shadow-focus); --btn-primary-shadow: 0 1px 3px var(--brand-primary-shadow); --btn-secondary-bg: var(--brand-secondary); --btn-secondary-color: var(--gray-900); --btn-secondary-border: var(--brand-secondary); --btn-secondary-hover-bg: var(--brand-secondary-hover); --btn-secondary-hover-color: var(--gray-900); --btn-secondary-hover-border: var(--brand-secondary-hover); --btn-secondary-active-bg: var(--brand-secondary-active); --btn-secondary-focus-shadow: 0 0 0 3px var(--brand-secondary-shadow); --btn-accent-bg: var(--brand-accent); --btn-accent-color: #ffffff; --btn-accent-border: var(--brand-accent); --btn-accent-hover-bg: var(--brand-accent-hover); --btn-accent-hover-color: #ffffff; --btn-accent-hover-border: var(--brand-accent-hover); --btn-accent-active-bg: var(--brand-accent-active); --btn-accent-focus-shadow: 0 0 0 3px var(--brand-accent-shadow); --btn-outline-bg: transparent; --btn-outline-color: var(--brand-primary); --btn-outline-border: var(--brand-primary); --btn-outline-hover-bg: var(--brand-primary); --btn-outline-hover-color: #ffffff; --btn-outline-hover-border: var(--brand-primary); --btn-ghost-bg: transparent; --btn-ghost-color: var(--brand-primary); --btn-ghost-border: transparent; --btn-ghost-hover-bg: var(--brand-primary-ghost); --btn-ghost-hover-color: var(--brand-primary-darker); --btn-ghost-hover-border: transparent; --btn-neutral-bg: var(--surface-card); --btn-neutral-color: var(--gray-700); --btn-neutral-border: var(--border-default); --btn-neutral-hover-bg: var(--gray-50); --btn-neutral-hover-color: var(--gray-900); --btn-neutral-hover-border: var(--border-strong); --btn-neutral-active-bg: var(--gray-100); --btn-neutral-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); --btn-neutral-shadow: var(--shadow-xs); --btn-danger-bg: var(--brand-danger); --btn-danger-color: #ffffff; --btn-danger-border: var(--brand-danger); --btn-danger-hover-bg: var(--brand-danger-hover); --btn-danger-hover-color: #ffffff; --btn-danger-hover-border: var(--brand-danger-hover); --btn-danger-focus-shadow: var(--shadow-focus-danger); --btn-success-bg: var(--brand-success); --btn-success-color: #ffffff; --btn-success-border: var(--brand-success); --btn-success-hover-bg: var(--brand-success-hover); --btn-success-hover-color: #ffffff; --btn-success-hover-border: var(--brand-success-hover); --btn-group-spacing: var(--spacing-1x); --btn-group-border-radius: var(--radius-base); --btn-icon-only-xs: var(--ui-height-xs); --btn-icon-only-sm: var(--ui-height-sm); --btn-icon-only-base: var(--ui-height-base); --btn-icon-only-lg: var(--ui-height-lg); --btn-icon-spacing: var(--spacing-1x); --input-font-family: var(--font-family-body); --input-font-size: var(--font-size-base); --input-line-height: var(--line-height-base); --input-font-weight: var(--font-weight-regular); --input-bg: var(--surface-card); --input-color: var(--gray-900); --input-border-color: var(--border-default); --input-border-width: 1px; --input-border-radius: var(--radius-base); --input-placeholder-color: var(--gray-400); --input-transition: var(--transition-base); --input-sm-height: var(--ui-height-sm); --input-sm-padding: 4px 10px; --input-sm-font-size: var(--font-size-sm); --input-base-height: var(--ui-height-base); --input-base-padding: 8px 14px; --input-lg-height: var(--ui-height-lg); --input-lg-padding: 12px 16px; --input-lg-font-size: var(--font-size-lg); --input-hover-border-color: var(--gray-300); --input-focus-border-color: var(--brand-primary); --input-focus-shadow: var(--shadow-focus); --input-disabled-bg: var(--surface-disabled); --input-disabled-color: var(--gray-400); --input-disabled-border-color: var(--border-light); --input-readonly-bg: var(--gray-50); --input-error-border-color: var(--brand-danger); --input-error-color: var(--brand-danger); --input-error-focus-shadow: var(--shadow-focus-danger); --input-error-bg: var(--brand-danger-lighter-4); --input-success-border-color: var(--brand-success); --input-success-focus-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); --select-bg: var(--input-bg); --select-indicator-padding: var(--spacing-4x); --select-indicator-color: var(--gray-500); --textarea-min-height: 80px; --textarea-padding: var(--spacing-1_5x) var(--spacing-2x); --check-size: 18px; --check-border-color: var(--border-strong); --check-border-radius: var(--radius-sm); --check-bg: var(--surface-card); --check-checked-bg: var(--brand-primary); --check-checked-border: var(--brand-primary); --check-checked-color: #ffffff; --check-focus-shadow: var(--shadow-focus); --check-disabled-bg: var(--surface-disabled); --check-disabled-border: var(--border-light); --check-spacing: var(--spacing-1x); --check-label-spacing: var(--spacing-1x); --radio-border-radius: var(--radius-full); --switch-width: 44px; --switch-height: 24px; --switch-bg: var(--gray-200); --switch-checked-bg: var(--brand-primary); --switch-dot-size: 18px; --switch-dot-bg: #ffffff; --switch-border-radius: var(--radius-full); --switch-transition: var(--transition-base); --form-label-font-size: var(--font-size-sm); --form-label-font-weight: var(--font-weight-medium); --form-label-color: var(--gray-700); --form-label-margin-bottom: var(--spacing-0_5x); --form-help-font-size: var(--font-size-xs); --form-help-color: var(--gray-500); --form-help-margin-top: var(--spacing-0_5x); --input-group-addon-bg: var(--gray-50); --input-group-addon-color: var(--gray-600); --input-group-addon-border: var(--border-default); --input-group-addon-padding: 0 var(--spacing-1_5x); --form-group-margin-bottom: var(--spacing-2_5x); --table-bg: transparent; --table-bg-accent: var(--gray-25); --table-bg-hover: var(--ui-block-link-hover-bg); --table-bg-active: var(--brand-primary-ghost); --table-border-color: var(--ui-block-divider-color); --table-vertical-align: middle; --table-th-bg: var(--gray-50); --table-th-padding: var(--spacing-1_5x) var(--spacing-2x); --table-th-font-color: var(--gray-600); --table-th-font-size: var(--font-size-xs); --table-th-font-weight: var(--font-weight-semibold); --table-th-text-transform: uppercase; --table-th-letter-spacing: var(--letter-spacing-wider); --table-th-height: 40px; --table-td-bg: transparent; --table-td-padding: var(--spacing-1_5x) var(--spacing-2x); --table-td-font-color: var(--text-body); --table-td-font-size: var(--font-size-base); --table-td-height: 52px; --table-container-bg: var(--ui-block-bg); --table-container-border: var(--ui-block-border); --table-container-shadow: var(--ui-block-shadow); --table-container-border-radius: var(--ui-block-border-radius); --table-container-header-bg: var(--gray-50); --table-container-header-height: 48px; --dropdown-bg: var(--surface-overlay); --dropdown-border: var(--ui-block-border); --dropdown-border-radius: var(--radius-lg); --dropdown-shadow: var(--shadow-lg); --dropdown-min-width: 200px; --dropdown-max-height: 320px; --dropdown-padding: var(--spacing-0_5x); --dropdown-divider-bg: var(--border-default); --dropdown-link-padding: var(--spacing-1x) var(--spacing-1_5x); --dropdown-link-color: var(--gray-700); --dropdown-link-hover-color: var(--gray-900); --dropdown-link-hover-bg: var(--gray-50); --dropdown-link-active-color: var(--brand-primary); --dropdown-link-active-bg: var(--brand-primary-ghost); --dropdown-link-disabled-color: var(--gray-300); --dropdown-link-border-radius: var(--radius-base); --dropdown-link-font-size: var(--font-size-base); --dropdown-header-color: var(--gray-500); --dropdown-header-font-size: var(--font-size-xs); --dropdown-header-font-weight: var(--font-weight-semibold); --dropdown-header-text-transform: uppercase; --dropdown-header-letter-spacing: var(--letter-spacing-wider); --modal-bg: var(--surface-overlay); --modal-border-radius: var(--radius-xl); --modal-shadow: var(--shadow-2xl); --modal-backdrop-bg: rgba(0, 0, 0, 0.5); --modal-backdrop-blur: 4px; --modal-header-padding: var(--spacing-3x) var(--spacing-3x); --modal-body-padding: var(--spacing-3x); --modal-footer-padding: var(--spacing-2x) var(--spacing-3x); --modal-footer-border: var(--ui-block-divider); --modal-header-border: var(--ui-block-divider); --modal-sm-width: 400px; --modal-md-width: 560px; --modal-lg-width: 800px; --modal-xl-width: 1024px; --alert-border-radius: var(--radius-lg); --alert-padding: var(--spacing-2x); --alert-border-width: 1px; --alert-font-size: var(--font-size-base); --alert-icon-size: var(--icon-size-base); --alert-icon-spacing: var(--spacing-1_5x); --alert-close-size: 20px; --alert-success-bg: var(--state-success-bg); --alert-success-border: var(--state-success-border); --alert-success-color: var(--state-success-text); --alert-info-bg: var(--state-info-bg); --alert-info-border: var(--state-info-border); --alert-info-color: var(--state-info-text); --alert-warning-bg: var(--state-warning-bg); --alert-warning-border: var(--state-warning-border); --alert-warning-color: var(--state-warning-text); --alert-danger-bg: var(--state-danger-bg); --alert-danger-border: var(--state-danger-border); --alert-danger-color: var(--state-danger-text); --tooltip-bg: var(--gray-900); --tooltip-color: #ffffff; --tooltip-border-radius: var(--radius-base); --tooltip-padding: var(--spacing-0_5x) var(--spacing-1x); --tooltip-font-size: var(--font-size-xs); --tooltip-max-width: 250px; --tooltip-arrow-size: 5px; --popover-bg: var(--surface-overlay); --popover-border: var(--ui-block-border); --popover-border-radius: var(--radius-lg); --popover-shadow: var(--shadow-lg); --popover-padding: var(--spacing-2x); --popover-header-bg: var(--gray-50); --popover-header-padding: var(--spacing-1_5x) var(--spacing-2x); --popover-body-padding: var(--spacing-2x); --popover-max-width: 300px; --tab-border-color: var(--border-default); --tab-border-width: 2px; --tab-padding: var(--spacing-1_5x) var(--spacing-2x); --tab-font-size: var(--font-size-base); --tab-font-weight: var(--font-weight-medium); --tab-color: var(--gray-500); --tab-hover-color: var(--gray-700); --tab-hover-border-color: var(--gray-300); --tab-active-color: var(--brand-primary); --tab-active-border-color: var(--brand-primary); --tab-active-font-weight: var(--font-weight-semibold); --tab-content-padding: var(--spacing-3x); --tab-gap: 0; --tab-pill-bg: transparent; --tab-pill-hover-bg: var(--gray-50); --tab-pill-active-bg: var(--brand-primary); --tab-pill-active-color: #ffffff; --tab-pill-border-radius: var(--radius-base); --tab-pill-padding: var(--spacing-1x) var(--spacing-2x); --accordion-bg: var(--ui-block-bg); --accordion-border: var(--ui-block-border); --accordion-border-radius: var(--ui-block-border-radius); --accordion-header-padding: var(--spacing-2x) var(--spacing-3x); --accordion-header-font-size: var(--font-size-lg); --accordion-header-font-weight: var(--font-weight-medium); --accordion-header-color: var(--text-heading); --accordion-header-hover-bg: var(--gray-50); --accordion-body-padding: var(--spacing-2x) var(--spacing-3x); --accordion-icon-size: 20px; --accordion-icon-color: var(--gray-500); --accordion-active-header-bg: transparent; --accordion-active-header-color: var(--brand-primary); --accordion-divider: var(--ui-block-divider); --accordion-shadow: var(--ui-block-shadow); --breadcrumb-font-size: var(--font-size-sm); --breadcrumb-color: var(--gray-500); --breadcrumb-active-color: var(--gray-700); --breadcrumb-separator-color: var(--gray-300); --breadcrumb-link-color: var(--gray-500); --breadcrumb-link-hover-color: var(--brand-primary); --breadcrumb-padding: 0; --pagination-padding: var(--spacing-1x) var(--spacing-1_5x); --pagination-font-size: var(--font-size-sm); --pagination-border-radius: var(--radius-base); --pagination-min-width: 36px; --pagination-height: 36px; --pagination-gap: var(--spacing-0_5x); --pagination-color: var(--gray-600); --pagination-bg: var(--surface-card); --pagination-border: var(--border-default); --pagination-hover-color: var(--gray-900); --pagination-hover-bg: var(--gray-50); --pagination-hover-border: var(--border-strong); --pagination-active-color: #ffffff; --pagination-active-bg: var(--brand-primary); --pagination-active-border: var(--brand-primary); --pagination-disabled-color: var(--gray-300); --pagination-disabled-bg: var(--gray-50); --progress-height: 8px; --progress-bg: var(--gray-100); --progress-border-radius: var(--radius-full); --progress-bar-bg: var(--brand-primary-gradient-h); --progress-bar-color: #ffffff; --progress-bar-font-size: var(--font-size-xs); --badge-size: 20px; --badge-font-size: var(--font-size-2xs); --badge-font-weight: var(--font-weight-bold); --badge-border-radius: var(--radius-full); --badge-padding: 2px 6px; --badge-primary-bg: var(--brand-primary); --badge-primary-color: #ffffff; --badge-danger-bg: var(--brand-danger); --badge-danger-color: #ffffff; --badge-neutral-bg: var(--gray-200); --badge-neutral-color: var(--gray-700); --toast-bg: var(--surface-overlay); --toast-border-radius: var(--radius-lg); --toast-shadow: var(--shadow-xl); --toast-padding: var(--spacing-2x); --toast-max-width: 420px; --toast-border: var(--ui-block-border); --card-bg: var(--ui-block-bg); --card-border: var(--ui-block-border); --card-border-radius: var(--ui-block-border-radius); --card-shadow: var(--ui-block-shadow); --card-hover-shadow: var(--ui-block-shadow-hover); --card-hover-transform: translateY(-2px); --card-padding: var(--ui-block-padding-base); --card-header-padding: var(--spacing-2x) var(--spacing-3x); --card-header-bg: transparent; --card-header-border: var(--ui-block-divider); --card-footer-padding: var(--spacing-2x) var(--spacing-3x); --card-footer-bg: var(--gray-25); --card-footer-border: var(--ui-block-divider); --list-group-bg: var(--ui-block-bg); --list-group-border: var(--ui-block-divider); --list-group-border-radius: var(--ui-block-border-radius); --list-group-item-padding: var(--spacing-1_5x) var(--spacing-2x); --list-group-hover-bg: var(--gray-50); --list-group-active-bg: var(--brand-primary-ghost); --list-group-active-color: var(--brand-primary); --list-group-disabled-color: var(--gray-400); --list-group-disabled-bg: var(--gray-50); --empty-state-icon-size: var(--icon-size-3xl); --empty-state-icon-color: var(--gray-300); --empty-state-title-color: var(--text-heading); --empty-state-desc-color: var(--text-secondary); --empty-state-padding: var(--spacing-8x) var(--spacing-4x); --pricing-bg: var(--ui-block-bg); --pricing-border: var(--ui-block-border); --pricing-border-radius: var(--radius-xl); --pricing-shadow: var(--ui-block-shadow); --pricing-hover-shadow: var(--shadow-lg); --pricing-hover-transform: translateY(-4px); --pricing-padding: var(--spacing-4x); --pricing-header-padding: var(--spacing-3x) var(--spacing-4x); --pricing-footer-padding: var(--spacing-3x) var(--spacing-4x); --pricing-title-font-size: var(--font-size-xl); --pricing-title-font-weight: var(--font-weight-semibold); --pricing-title-color: var(--text-heading); --pricing-price-font-size: var(--font-size-display-sm); --pricing-price-font-weight: var(--font-weight-bold); --pricing-price-color: var(--text-heading); --pricing-period-font-size: var(--font-size-sm); --pricing-period-color: var(--text-secondary); --pricing-desc-font-size: var(--font-size-base); --pricing-desc-color: var(--text-body); --pricing-feature-font-size: var(--font-size-base); --pricing-feature-color: var(--text-body); --pricing-feature-icon-color: var(--brand-success); --pricing-feature-disabled-color: var(--gray-300); --pricing-feature-spacing: var(--spacing-1_5x); --pricing-divider: var(--ui-block-divider); --pricing-label-spacing: var(--spacing-2x); --pricing-featured-bg: var(--brand-primary); --pricing-featured-color: #ffffff; --pricing-featured-border: none; --pricing-featured-shadow: 0 8px 32px var(--brand-primary-shadow); --pricing-featured-scale: 1.02; --avatar-xs: 24px; --avatar-sm: 32px; --avatar-base: 40px; --avatar-lg: 48px; --avatar-xl: 64px; --avatar-2xl: 80px; --avatar-3xl: 120px; --avatar-border-radius: var(--radius-full); --avatar-bg: var(--brand-primary-lighter-3); --avatar-color: var(--brand-primary); --avatar-font-weight: var(--font-weight-semibold); --avatar-border: 2px solid var(--surface-card); --avatar-online-color: var(--brand-success); --avatar-offline-color: var(--gray-400); --panel-bg: var(--ui-block-bg); --panel-border: var(--ui-block-border); --panel-border-radius: var(--ui-block-border-radius); --panel-shadow: var(--ui-block-shadow); --panel-header-bg: var(--gray-50); --panel-header-padding: var(--spacing-2x) var(--spacing-3x); --panel-header-font-size: var(--font-size-lg); --panel-header-font-weight: var(--font-weight-semibold); --panel-header-color: var(--text-heading); --panel-header-border: var(--ui-block-divider); --panel-body-padding: var(--spacing-3x); --panel-footer-padding: var(--spacing-2x) var(--spacing-3x); --panel-footer-bg: var(--gray-25); --panel-footer-border: var(--ui-block-divider); --panel-primary-header-bg: var(--brand-primary); --panel-primary-header-color: #ffffff; --panel-primary-border: var(--brand-primary); --domain-search-bg: var(--surface-card); --domain-search-border: 2px solid var(--brand-primary-lighter-2); --domain-search-border-radius: var(--radius-xl); --domain-search-shadow: var(--shadow-md); --domain-search-padding: var(--spacing-0_5x); --domain-search-height: var(--ui-height-xl); --domain-search-input-font-size: var(--font-size-lg); --domain-search-btn-border-radius: var(--radius-lg); --domain-search-focus-border: 2px solid var(--brand-primary); --domain-search-focus-shadow: var(--shadow-focus); --tld-bg: var(--ui-block-bg); --tld-border: var(--ui-block-border); --tld-border-radius: var(--radius-lg); --tld-shadow: var(--ui-block-shadow); --tld-padding: var(--spacing-2x) var(--spacing-3x); --tld-hover-shadow: var(--shadow-md); --tld-hover-transform: translateY(-1px); --tld-name-font-size: var(--font-size-xl); --tld-name-font-weight: var(--font-weight-bold); --tld-price-font-size: var(--font-size-lg); --tld-price-font-weight: var(--font-weight-semibold); --tld-price-color: var(--brand-primary); --tld-sale-color: var(--brand-danger); --stat-card-bg: var(--ui-block-bg); --stat-card-border: var(--ui-block-border); --stat-card-border-radius: var(--ui-block-border-radius); --stat-card-shadow: var(--ui-block-shadow); --stat-card-padding: var(--spacing-3x); --stat-value-font-size: var(--font-size-h3); --stat-value-font-weight: var(--font-weight-bold); --stat-value-color: var(--text-heading); --stat-label-font-size: var(--font-size-sm); --stat-label-color: var(--text-secondary); --stat-icon-size: var(--icon-size-2xl); --stat-icon-bg: var(--brand-primary-lighter-4); --stat-icon-color: var(--brand-primary); --stat-icon-border-radius: var(--radius-lg); --shortcut-bg: var(--ui-block-bg); --shortcut-border: var(--ui-block-border); --shortcut-border-radius: var(--radius-lg); --shortcut-shadow: var(--ui-block-shadow); --shortcut-padding: var(--spacing-3x); --shortcut-hover-shadow: var(--shadow-md); --shortcut-hover-transform: translateY(-2px); --shortcut-icon-size: var(--icon-size-2xl); --shortcut-icon-bg: var(--brand-primary-lighter-4); --shortcut-icon-color: var(--brand-primary); --shortcut-icon-border-radius: var(--radius-lg); --shortcut-title-font-size: var(--font-size-base); --shortcut-title-font-weight: var(--font-weight-medium); --invoice-bg: var(--surface-card); --invoice-border: var(--ui-block-border); --invoice-border-radius: var(--ui-block-border-radius); --invoice-shadow: var(--ui-block-shadow); --invoice-header-bg: var(--brand-primary); --invoice-header-color: #ffffff; --invoice-header-padding: var(--spacing-4x); --invoice-body-padding: var(--spacing-4x); --invoice-footer-bg: var(--gray-25); --invoice-total-font-size: var(--font-size-h3); --invoice-total-font-weight: var(--font-weight-bold); --invoice-total-color: var(--text-heading); --summary-bg: var(--brand-primary); --summary-color: #ffffff; --summary-border-radius: var(--radius-xl); --summary-padding: var(--spacing-3x); --summary-shadow: 0 4px 16px var(--brand-primary-shadow); --summary-title-font-size: var(--font-size-lg); --summary-title-font-weight: var(--font-weight-semibold); --summary-value-font-size: var(--font-size-h3); --summary-value-font-weight: var(--font-weight-bold); --summary-divider: 1px solid rgba(255, 255, 255, 0.2); --account-box-bg: var(--ui-block-bg); --account-box-border: var(--ui-block-border); --account-box-border-radius: var(--ui-block-border-radius); --account-box-shadow: var(--ui-block-shadow); --account-box-padding: var(--spacing-3x); --account-box-avatar-size: var(--avatar-xl); --ticket-reply-bg: var(--ui-block-bg); --ticket-reply-border: var(--ui-block-border); --ticket-reply-border-radius: var(--radius-lg); --ticket-reply-padding: var(--spacing-3x); --ticket-reply-shadow: var(--shadow-xs); --ticket-staff-reply-bg: var(--brand-primary-lighter-4); --ticket-staff-reply-border: 1px solid var(--brand-primary-lighter-2); --ticket-divider: var(--ui-block-divider); --ticket-meta-font-size: var(--font-size-sm); --ticket-meta-color: var(--text-secondary); --body-bg: var(--surface-page); --body-color: var(--text-body); --body-font-family: var(--font-family-body); --body-font-size: var(--font-size-base); --body-line-height: var(--line-height-base); --body-font-weight: var(--font-weight-regular); --topbar-bg: var(--surface-card); --topbar-border-bottom: var(--ui-block-divider); --topbar-shadow: var(--shadow-xs); --topbar-height: 40px; --topbar-padding: 0 var(--spacing-3x); --topbar-font-size: var(--font-size-sm); --topbar-color: var(--text-secondary); --topbar-link-color: var(--text-body); --topbar-link-hover-color: var(--brand-primary); --header-bg: var(--surface-card); --header-border-bottom: var(--ui-block-divider); --header-shadow: var(--shadow-sm); --header-height: 56px; --header-padding: 0 var(--spacing-3x); --header-sticky-bg: rgba(255, 255, 255, 0.95); --header-sticky-backdrop: blur(12px); --header-sticky-shadow: var(--shadow-md); --header-logo-max-height: 40px; --header-logo-max-width: 180px; --header-nav-font-size: var(--font-size-base); --header-nav-font-weight: var(--font-weight-medium); --header-nav-color: var(--gray-700); --header-nav-hover-color: var(--brand-primary); --header-nav-active-color: var(--brand-primary); --header-nav-padding: var(--spacing-1x) var(--spacing-2x); --header-nav-gap: var(--spacing-0_5x); --header-user-avatar-size: var(--avatar-sm); --header-user-font-size: var(--font-size-base); --header-user-color: var(--gray-700); --page-header-bg: transparent; --page-header-padding: var(--spacing-3x) 0; --page-header-title-color: var(--text-heading); --page-header-title-font-size: var(--font-size-h2); --page-header-title-font-weight: var(--font-weight-h2); --page-header-title-line-height: var(--line-height-h2); --page-header-breadcrumb-font-size: var(--font-size-sm); --page-header-breadcrumb-color: var(--gray-500); --page-header-breadcrumb-active-color: var(--gray-700); --page-header-breadcrumb-separator: "/"; --page-header-banner-bg: var(--brand-primary-gradient-h); --page-header-banner-color: #ffffff; --page-header-banner-padding: var(--spacing-5x) 0; --content-padding: var(--spacing-2x) 0; --content-max-width: var(--container-xl); --content-gap: var(--gutter-lg); --sidebar-width: 280px; --sidebar-lg-width: 320px; --sidebar-spacing: var(--spacing-5x); --sidebar-sticky-top: var(--spacing-3x); --footer-bg: var(--gray-900); --footer-color: var(--gray-400); --footer-border-top: none; --footer-padding: var(--spacing-5x) 0; --footer-link-color: var(--gray-300); --footer-link-hover-color: #ffffff; --footer-heading-color: #ffffff; --footer-heading-font-size: var(--font-size-lg); --footer-heading-font-weight: var(--font-weight-semibold); --footer-divider: 1px solid rgba(255, 255, 255, 0.1); --footer-bottom-bg: var(--gray-950); --footer-bottom-padding: var(--spacing-3x) 0; --footer-bottom-font-size: var(--font-size-sm); --footer-bottom-color: var(--gray-500); --footer-extended-bg: var(--gray-800); --footer-extended-padding: var(--spacing-6x) 0; --nav-main-bg: transparent; --nav-main-padding: 0; --nav-main-gap: var(--spacing-0_5x); --nav-main-link-padding: var(--spacing-1x) var(--spacing-2x); --nav-main-link-color: var(--gray-700); --nav-main-link-font-size: var(--font-size-base); --nav-main-link-font-weight: var(--font-weight-medium); --nav-main-link-border-radius: var(--radius-base); --nav-main-link-hover-bg: var(--gray-50); --nav-main-link-hover-color: var(--gray-900); --nav-main-link-active-bg: var(--brand-primary-ghost); --nav-main-link-active-color: var(--brand-primary); --nav-main-dropdown-bg: var(--surface-overlay); --nav-main-dropdown-shadow: var(--shadow-lg); --nav-main-dropdown-border-radius: var(--radius-lg); --nav-main-dropdown-padding: var(--spacing-1x); --nav-main-dropdown-min-width: 220px; --nav-main-dropdown-max-height: 480px; --nav-left-bg: var(--surface-card); --nav-left-border: var(--ui-block-border); --nav-left-border-radius: var(--ui-block-border-radius); --nav-left-shadow: var(--ui-block-shadow); --nav-left-padding: var(--spacing-1x); --nav-left-width: var(--sidebar-width); --nav-left-link-padding: var(--spacing-1x) var(--spacing-2x); --nav-left-link-color: var(--gray-700); --nav-left-link-font-size: var(--font-size-base); --nav-left-link-font-weight: var(--font-weight-regular); --nav-left-link-border-radius: var(--radius-base); --nav-left-link-hover-bg: var(--gray-50); --nav-left-link-hover-color: var(--gray-900); --nav-left-link-active-bg: var(--brand-primary-ghost); --nav-left-link-active-color: var(--brand-primary); --nav-left-link-active-font-weight: var(--font-weight-medium); --nav-left-link-icon-size: var(--icon-size-base); --nav-left-link-icon-color: var(--gray-400); --nav-left-link-icon-active-color: var(--brand-primary); --nav-left-link-icon-spacing: var(--spacing-1_5x); --nav-left-group-title-font-size: var(--font-size-xs); --nav-left-group-title-font-weight: var(--font-weight-semibold); --nav-left-group-title-color: var(--gray-500); --nav-left-group-title-text-transform: uppercase; --nav-left-group-title-letter-spacing: var(--letter-spacing-wider); --nav-left-group-title-padding: var(--spacing-2x) var(--spacing-2x) var(--spacing-0_5x); --nav-left-group-spacing: var(--spacing-2x); --nav-left-divider: var(--ui-block-divider); --nav-left-sub-padding-left: var(--spacing-5x); --nav-left-sub-link-font-size: var(--font-size-sm); --nav-left-sub-link-color: var(--gray-600); --nav-left-sub-link-hover-color: var(--gray-900); --nav-left-sub-link-active-color: var(--brand-primary); --nav-top-bg: var(--surface-card); --nav-top-border-bottom: var(--ui-block-divider); --nav-top-height: var(--header-height); --nav-top-padding: 0 var(--spacing-3x); --nav-top-shadow: var(--header-shadow); --nav-top-link-color: var(--gray-700); --nav-top-link-hover-color: var(--brand-primary); --nav-top-link-active-color: var(--brand-primary); --nav-top-link-font-size: var(--font-size-base); --nav-top-link-font-weight: var(--font-weight-medium); --nav-top-link-padding: var(--spacing-1x) var(--spacing-2x); --nav-top-link-gap: var(--spacing-0_5x); --nav-mobile-bg: var(--surface-overlay); --nav-mobile-shadow: var(--shadow-2xl); --nav-mobile-width: 320px; --nav-mobile-padding: var(--spacing-2x); --nav-mobile-backdrop-bg: rgba(0, 0, 0, 0.5); --nav-mobile-backdrop-blur: 4px; --nav-mobile-link-padding: var(--spacing-1_5x) var(--spacing-2x); --nav-mobile-link-color: var(--gray-700); --nav-mobile-link-font-size: var(--font-size-lg); --nav-mobile-link-font-weight: var(--font-weight-medium); --nav-mobile-link-border-radius: var(--radius-md); --nav-mobile-link-hover-bg: var(--gray-50); --nav-mobile-link-active-bg: var(--brand-primary-ghost); --nav-mobile-link-active-color: var(--brand-primary); --nav-mobile-divider: var(--ui-block-divider); --nav-mobile-close-size: 40px; --nav-mobile-close-color: var(--gray-500); --nav-tab-border: 2px solid var(--border-default); --nav-tab-link-padding: var(--spacing-1_5x) var(--spacing-2_5x); --nav-tab-link-font-size: var(--font-size-base); --nav-tab-link-font-weight: var(--font-weight-medium); --nav-tab-link-color: var(--gray-500); --nav-tab-link-hover-color: var(--gray-700); --nav-tab-link-active-color: var(--brand-primary); --nav-tab-link-active-border: 2px solid var(--brand-primary); --nav-pill-bg: var(--gray-100); --nav-pill-border-radius: var(--radius-md); --nav-pill-padding: var(--spacing-0_5x); --nav-pill-link-padding: var(--spacing-1x) var(--spacing-2x); --nav-pill-link-border-radius: var(--radius-base); --nav-pill-link-color: var(--gray-600); --nav-pill-link-active-bg: var(--surface-card); --nav-pill-link-active-color: var(--gray-900); --nav-pill-link-active-shadow: var(--shadow-sm); --site-banner-bg: var(--brand-primary-gradient-h); --site-banner-color: #ffffff; --site-banner-min-height: 360px; --site-banner-padding: var(--spacing-6x) 0; --site-banner-content-max-width: 560px; --site-banner-title-font-size: var(--font-size-display); --site-banner-title-font-weight: var(--font-weight-display); --site-banner-title-line-height: var(--line-height-display); --site-banner-title-letter-spacing: var(--letter-spacing-display); --site-banner-subtitle-font-size: var(--font-size-2xl); --site-banner-subtitle-font-weight: var(--font-weight-regular); --site-banner-subtitle-line-height: var(--line-height-2xl); --site-banner-subtitle-opacity: 0.85; --site-banner-element-spacing: var(--spacing-4x); --site-banner-illustration-width: 560px; --site-banner-shape-primary: var(--brand-primary-lighter); --site-banner-shape-secondary: var(--brand-primary); --site-banner-shape-opacity: 0.15; --site-section-bg: transparent; --site-section-padding: var(--spacing-6x) 0; --site-section-padding-sm: var(--spacing-8x) 0; --site-section-border: none; --site-section-title-color: var(--text-heading); --site-section-title-font-size: var(--font-size-h2); --site-section-title-font-weight: var(--font-weight-bold); --site-section-title-line-height: var(--line-height-h2); --site-section-title-max-width: var(--container-md); --site-section-title-margin-bottom: var(--spacing-3x); --site-section-title-letter-spacing: var(--letter-spacing-tight); --site-section-subtitle-color: var(--text-body); --site-section-subtitle-font-size: var(--font-size-xl); --site-section-subtitle-font-weight: var(--font-weight-regular); --site-section-subtitle-line-height: var(--line-height-xl); --site-section-subtitle-max-width: var(--container-sm); --site-section-subtitle-margin-bottom: var(--spacing-4x); --site-section-alt-bg: var(--gray-25); --site-section-alt-border: 1px solid var(--border-light); --feature-bg: var(--ui-block-bg); --feature-border: var(--ui-block-border); --feature-border-radius: var(--radius-xl); --feature-shadow: var(--ui-block-shadow); --feature-padding: var(--spacing-4x); --feature-hover-shadow: var(--shadow-md); --feature-hover-transform: translateY(-4px); --feature-title-font-size: var(--font-size-xl); --feature-title-font-weight: var(--font-weight-semibold); --feature-title-line-height: var(--line-height-xl); --feature-title-color: var(--text-heading); --feature-title-margin-bottom: var(--spacing-1x); --feature-desc-font-size: var(--font-size-base); --feature-desc-font-weight: var(--font-weight-regular); --feature-desc-line-height: var(--line-height-lg); --feature-desc-color: var(--text-body); --feature-icon-size: var(--icon-size-2xl); --feature-icon-bg: var(--brand-primary-lighter-4); --feature-icon-color: var(--brand-primary); --feature-icon-border-radius: var(--radius-lg); --feature-icon-padding: var(--spacing-1_5x); --feature-icon-margin-bottom: var(--spacing-2x); --feature-gap: var(--spacing-3x); --feature-row-margin-bottom: var(--spacing-3x); --feature-lg-title-font-size: var(--font-size-3xl); --feature-lg-title-font-weight: var(--font-weight-bold); --feature-lg-desc-font-size: var(--font-size-lg); --feature-lg-padding: var(--spacing-6x); --feature-sm-title-font-size: var(--font-size-lg); --feature-sm-desc-font-size: var(--font-size-sm); --feature-sm-padding: var(--spacing-3x); --feature-sm-icon-size: var(--icon-size-xl); --testimonial-bg: var(--ui-block-bg); --testimonial-border: var(--ui-block-border); --testimonial-border-radius: var(--radius-xl); --testimonial-shadow: var(--ui-block-shadow); --testimonial-padding: var(--spacing-4x); --testimonial-quote-font-size: var(--font-size-xl); --testimonial-quote-font-weight: var(--font-weight-regular); --testimonial-quote-font-style: italic; --testimonial-quote-color: var(--text-body); --testimonial-quote-line-height: var(--line-height-relaxed); --testimonial-author-font-size: var(--font-size-base); --testimonial-author-font-weight: var(--font-weight-semibold); --testimonial-author-color: var(--text-heading); --testimonial-role-font-size: var(--font-size-sm); --testimonial-role-color: var(--text-secondary); --testimonial-star-color: #fbbf24; --testimonial-star-size: 16px; --cta-bg: var(--brand-primary-gradient-h); --cta-color: #ffffff; --cta-border-radius: var(--radius-2xl); --cta-padding: var(--spacing-6x) var(--spacing-3x); --cta-title-font-size: var(--font-size-h2); --cta-title-font-weight: var(--font-weight-bold); --cta-desc-font-size: var(--font-size-xl); --cta-desc-opacity: 0.85; --cta-shadow: 0 16px 48px var(--brand-primary-shadow); --trust-logo-opacity: 0.5; --trust-logo-hover-opacity: 1; --trust-logo-height: 32px; --trust-logo-gap: var(--spacing-6x); --trust-logo-filter: grayscale(100%); --trust-logo-hover-filter: grayscale(0%); --faq-bg: var(--ui-block-bg); --faq-border: var(--ui-block-border); --faq-border-radius: var(--radius-xl); --faq-shadow: var(--ui-block-shadow); --faq-padding: 0; --faq-question-padding: var(--spacing-3x) var(--spacing-4x); --faq-question-font-size: var(--font-size-lg); --faq-question-font-weight: var(--font-weight-medium); --faq-question-color: var(--text-heading); --faq-question-hover-bg: var(--gray-25); --faq-answer-padding: 0 var(--spacing-4x) var(--spacing-3x); --faq-answer-font-size: var(--font-size-base); --faq-answer-color: var(--text-body); --faq-divider: var(--ui-block-divider); --block-default-bg: var(--surface-card); --block-default-color: var(--text-body); --block-default-heading-color: var(--text-heading); --block-default-link-color: var(--link-color); --block-default-link-hover-color: var(--link-hover-color); --block-default-border: var(--ui-block-border); --block-default-shadow: var(--ui-block-shadow); --block-default-btn-bg: var(--btn-primary-bg); --block-default-btn-color: var(--btn-primary-color); --block-default-divider: var(--ui-block-divider); --block-default-icon-color: var(--icon-color); --block-default-muted-color: var(--text-secondary); --block-default-input-bg: var(--input-bg); --block-default-input-border: var(--input-border-color); --block-primary-bg: var(--brand-primary); --block-primary-color: rgba(255, 255, 255, 0.85); --block-primary-heading-color: #ffffff; --block-primary-link-color: #ffffff; --block-primary-link-hover-color: rgba(255, 255, 255, 0.8); --block-primary-border: none; --block-primary-shadow: 0 4px 16px var(--brand-primary-shadow); --block-primary-btn-bg: #ffffff; --block-primary-btn-color: var(--brand-primary); --block-primary-divider: 1px solid rgba(255, 255, 255, 0.2); --block-primary-icon-color: rgba(255, 255, 255, 0.8); --block-primary-muted-color: rgba(255, 255, 255, 0.65); --block-primary-input-bg: rgba(255, 255, 255, 0.15); --block-primary-input-border: rgba(255, 255, 255, 0.3); --block-primary-gradient-bg: var(--brand-primary-gradient-v); --block-secondary-bg: var(--brand-secondary); --block-secondary-color: var(--gray-800); --block-secondary-heading-color: var(--gray-900); --block-secondary-link-color: var(--gray-900); --block-secondary-link-hover-color: var(--gray-700); --block-secondary-border: none; --block-secondary-shadow: 0 4px 16px var(--brand-secondary-shadow); --block-secondary-btn-bg: var(--gray-900); --block-secondary-btn-color: #ffffff; --block-secondary-divider: 1px solid rgba(0, 0, 0, 0.1); --block-secondary-icon-color: var(--gray-800); --block-secondary-muted-color: var(--gray-700); --block-secondary-input-bg: rgba(0, 0, 0, 0.08); --block-secondary-input-border: rgba(0, 0, 0, 0.15); --block-accent-bg: var(--brand-accent); --block-accent-color: rgba(255, 255, 255, 0.85); --block-accent-heading-color: #ffffff; --block-accent-link-color: #ffffff; --block-accent-link-hover-color: rgba(255, 255, 255, 0.8); --block-accent-border: none; --block-accent-shadow: 0 4px 16px var(--brand-accent-shadow); --block-accent-btn-bg: #ffffff; --block-accent-btn-color: var(--brand-accent); --block-accent-divider: 1px solid rgba(255, 255, 255, 0.2); --block-accent-icon-color: rgba(255, 255, 255, 0.8); --block-accent-muted-color: rgba(255, 255, 255, 0.65); --block-accent-input-bg: rgba(255, 255, 255, 0.15); --block-accent-input-border: rgba(255, 255, 255, 0.3); --block-accent-gradient-bg: var(--brand-accent-gradient-v); --block-dark-bg: var(--gray-900); --block-dark-color: var(--gray-300); --block-dark-heading-color: #ffffff; --block-dark-link-color: var(--brand-primary-lighter); --block-dark-link-hover-color: #ffffff; --block-dark-border: none; --block-dark-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); --block-dark-btn-bg: #ffffff; --block-dark-btn-color: var(--gray-900); --block-dark-divider: 1px solid rgba(255, 255, 255, 0.1); --block-dark-icon-color: var(--gray-400); --block-dark-muted-color: var(--gray-500); --block-dark-input-bg: rgba(255, 255, 255, 0.1); --block-dark-input-border: rgba(255, 255, 255, 0.2); --block-light-bg: var(--gray-50); --block-light-color: var(--text-body); --block-light-heading-color: var(--text-heading); --block-light-link-color: var(--link-color); --block-light-link-hover-color: var(--link-hover-color); --block-light-border: 1px solid var(--border-light); --block-light-shadow: none; --block-light-btn-bg: var(--btn-primary-bg); --block-light-btn-color: var(--btn-primary-color); --block-light-divider: 1px solid var(--border-default); --block-light-icon-color: var(--icon-color); --block-light-muted-color: var(--text-secondary); --block-light-input-bg: var(--surface-card); --block-light-input-border: var(--border-default); } @media (max-width: 767px) { :root { --gutter-base: var(--spacing-2x); --gutter-lg: var(--spacing-3x); --gutter-xl: var(--spacing-4x); --ui-block-padding-base: var(--spacing-2x); --ui-block-padding-lg: var(--spacing-3x); --ui-block-padding-xl: var(--spacing-4x); --ui-block-spacing-lg: var(--spacing-2x); --ui-block-spacing-xl: var(--spacing-3x); --ui-block-spacing-2xl: var(--spacing-4x); --ui-block-spacing-3xl: var(--spacing-5x); } } @media (max-width: 991px) { :root { --font-size-h1: 36px; --font-size-h2: 28px; --font-size-h3: 24px; --font-size-display-sm: 40px; --font-size-display: 48px; --font-size-display-lg: 56px; --line-height-h1: 44px; --line-height-h2: 36px; --line-height-h3: 32px; --line-height-display-sm: 48px; --line-height-display: 56px; --line-height-display-lg: 64px; --header-height: 60px; --page-header-padding: var(--spacing-4x) 0; --page-header-banner-padding: var(--spacing-5x) 0; --content-padding: var(--spacing-3x) 0; --footer-padding: var(--spacing-5x) 0; --site-banner-min-height: 420px; --site-banner-padding: var(--spacing-8x) 0; --site-section-padding: var(--spacing-8x) 0; --feature-gap: var(--spacing-3x); } } @media (max-width: 575px) { :root { --font-size-h1: 28px; --font-size-h2: 24px; --font-size-h3: 20px; --font-size-h4: 18px; --font-size-display-sm: 32px; --font-size-display: 36px; --font-size-display-lg: 42px; --line-height-h1: 36px; --line-height-h2: 32px; --line-height-h3: 28px; --line-height-h4: 26px; --line-height-display-sm: 40px; --line-height-display: 44px; --line-height-display-lg: 50px; --header-height: 56px; --page-header-padding: var(--spacing-3x) 0; --content-padding: var(--spacing-2x) 0; --site-banner-min-height: 360px; --site-banner-padding: var(--spacing-6x) 0; --site-section-padding: var(--spacing-6x) 0; --site-section-subtitle-margin-bottom: var(--spacing-4x); --cta-padding: var(--spacing-6x) var(--spacing-3x); --feature-row-margin-bottom: var(--spacing-3x); } }