/* ============================================================================ HUB v3 - Design Tokens Generated from design/tokens.json. Do not edit this file by hand. ============================================================================ */ /* Base */ :root { color-scheme: light; --auth-panel-bg: var(--ink-900); --auth-text-primary: var(--gray-50); --auth-text-secondary: var(--gray-300); --auth-text-muted: var(--gray-400); --auth-accent: var(--brand-on-dark, var(--brand-300)); --ui-accent: var(--brand-ink, var(--brand-600)); --ui-accent-fill: var(--brand-fill-600, var(--brand-600)); --ui-on-accent: var(--on-brand, var(--gray-50)); --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 8%, var(--bg-surface)); --ui-accent-border: color-mix(in srgb, var(--ui-accent) 24%, var(--border-color)); --ui-focus-ring: color-mix(in srgb, var(--ui-accent) 32%, transparent); --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --transition-fast: 140ms ease; --transition-medium: 220ms cubic-bezier(.2,.8,.2,1); --transition-base: 200ms ease; --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-200: #99f6e4; --brand-300: #5eead4; --brand-400: #14b8a6; --teal-400: #2dd4bf; --brand-500: #0d9488; --brand-600: #0f766e; --brand-700: var(--brand-600); --brand-800: #115e59; --brand-900: #134e4a; --chart-blue: #2563eb; --chart-blue-bright: #3b82f6; --chart-amber: #d97706; --chart-amber-bright: #f59e0b; --chart-green: #059669; --chart-green-bright: #16a34a; --chart-emerald: #10b981; --chart-red: #dc2626; --chart-red-bright: #ef4444; --chart-violet: #7c3aed; --chart-purple: #9333ea; --chart-sky: #0ea5e9; --chart-pink: #db2777; --chart-navy: #2c3e55; --chart-ink: #111827; --chart-brand: #0f766e; --chart-slate: #64748b; --brand-500-rgb: 13, 148, 136; --ink-950: #050A14; --ink-900: #0A1628; --ink-800: #0F2040; --ink-700: #1A2F4A; --ink-600: #2C3E55; --ink-400: #64748B; --ink-300: #94A3B8; --ink-200: #CBD5E1; --ink-100: #E2E8F0; --ink-50: #F1F5F9; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --bg-main: var(--bg-primary); --bg-primary: #F7F9FC; --bg-secondary: #F1F5F9; --bg-surface: #FFFFFF; --bg-surface-hover: #F7F9FC; --border-color: #EAECF0; --border-color-strong: #D0D5DD; --text-primary: var(--ink-950); --text-secondary: #475569; --text-muted: #526176; --text-inverse: #FFFFFF; --platform-amazon: #ff9900; --platform-walmart: #0071ce; --success-50: #ECFDF5; --success-300: #6EE7B7; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --warning-50: #FFFBEB; --warning-200: #fde68a; --warning-300: #FCD34D; --warning-400: #fbbf24; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --warning-800: #92400E; --danger-50: #FEF2F2; --danger-300: #FCA5A5; --danger-400: #f87171; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C; --danger-900: #7f1d1d; --info-50: #EFF6FF; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; --purple-50: #f3e8ff; --purple-600: #9333ea; --indigo-500: #6366f1; --violet-600: #7c3aed; --green-600: #16a34a; --shadow-none: none; --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .04); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 2px 6px -1px rgba(16, 24, 40, .07), 0 1px 3px -1px rgba(16, 24, 40, .04); --shadow-lg: 0 6px 18px -4px rgba(16, 24, 40, .07), 0 2px 6px -2px rgba(16, 24, 40, .04); --shadow-xl: 0 14px 32px -6px rgba(16, 24, 40, .10), 0 6px 12px -4px rgba(16, 24, 40, .06); --radius-xs: 4px; --radius-sm: 6px; --radius-compact: 8px; --radius-md: 10px; --radius-bubble: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 22px; --radius-bubble-tail: 3px; --radius-full: 9999px; --radius-card: 16px; --radius-card-lg: 24px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --control-height-sm: 34px; --control-height-md: 44px; --control-height-lg: 48px; --page-padding-x: 32px; --page-padding-y: 32px; --page-padding-mobile: 16px; --section-gap: 24px; --surface-padding: 20px; --surface-padding-lg: 24px; --table-header-bg: var(--bg-secondary); --sidebar-width: 248px; --topbar-height: 60px; --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --color-primary: var(--brand-500); --color-primary-light: var(--brand-50); --color-success: var(--success-500); --color-warning: var(--warning-500); --color-danger: var(--danger-500); --color-info: var(--info-500); --color-accent: var(--brand-500); --color-bg: var(--bg-surface); --color-bg-secondary: var(--bg-secondary); --color-bg-muted: var(--bg-secondary); --color-bg-subtle: var(--bg-secondary); --color-bg-info: var(--info-50); --color-bg-success: var(--success-50); --color-bg-warning: var(--warning-50); --color-bg-danger: var(--danger-50); --bg-muted: var(--bg-secondary); --bg-subtle: var(--bg-secondary); --bg-tertiary: var(--bg-secondary); --surface-subtle: var(--bg-secondary); --color-surface: var(--bg-surface); --color-surface-alt: var(--bg-secondary); --color-surface-hover: var(--bg-surface-hover); --color-surface-muted: var(--bg-secondary); --color-border: var(--border-color); --border-default: var(--border-color); --border-subtle: var(--border-color); --color-text: var(--text-primary); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-muted: var(--text-muted); --text-tertiary: var(--text-muted); --color-success-bg: var(--success-50); --color-success-border: #A7F3D0; --color-success-dark: #166534; --color-warning-dark: #B45309; --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 960px; --bp-xl: 1200px; --radius-none: 0; --bp-device-xxs: 380px; --bp-device-xs: 390px; --bp-content-sm: 700px; --bp-content-md: 720px; --bp-content-lg: 900px; --bp-content-xl: 1100px; --bp-content-2xl: 1024px; --bp-content-wide: 920px; --bp-content-narrow: 560px; --surface-input: var(--bg-surface); --surface-input-static: var(--bg-secondary); --surface-input-text: var(--text-primary); --surface-input-static-text: var(--text-muted); --state-review-bg: var(--warning-50); --state-review-text: var(--warning-800); --state-review-border: var(--warning-300); --state-ok-bg: var(--success-50); --state-ok-text: var(--success-600); --state-blocked-bg: var(--danger-50); --state-blocked-text: var(--danger-600); --state-readonly-bg: var(--bg-secondary); --state-readonly-text: var(--text-muted); --product-blue: #2D8CFF; --product-deep: #0B4EA2; --product-neutral: #64748B; --product-aqua: #22D3EE; --product-on-dark: #8CC2FF; --product-font: 'Poppins', system-ui, -apple-system, sans-serif; } /* Type Scale */ :root { --type-caption-2-size: 0.6875rem; --type-caption-2-leading: 1.35; --type-caption-2-tracking: 0.01em; --type-caption-size: 0.75rem; --type-caption-leading: 1.35; --type-caption-tracking: 0.01em; --type-footnote-size: 0.8125rem; --type-footnote-leading: 1.4; --type-footnote-tracking: 0; --type-subhead-size: 0.875rem; --type-subhead-leading: 1.45; --type-subhead-tracking: 0; --type-callout-size: 0.9375rem; --type-callout-leading: 1.45; --type-callout-tracking: 0; --type-body-size: 1rem; --type-body-leading: 1.5; --type-body-tracking: 0; --type-title-4-size: 1.125rem; --type-title-4-leading: 1.35; --type-title-4-tracking: -0.01em; --type-title-3-size: 1.25rem; --type-title-3-leading: 1.3; --type-title-3-tracking: -0.015em; --type-title-2-size: 1.375rem; --type-title-2-leading: 1.3; --type-title-2-tracking: -0.02em; --type-title-1-size: 1.75rem; --type-title-1-leading: 1.25; --type-title-1-tracking: -0.03em; --type-display-size: 2rem; --type-display-leading: 1.2; --type-display-tracking: -0.03em; --type-display-lg-size: 3rem; --type-display-lg-leading: 1.1; --type-display-lg-tracking: -0.03em; } /* Glass Light */ :root { --sp-bg-0: #f8fafc; --sp-bg-1: #eef2f7; --sp-bg-2: #e2e8f0; --sp-surface-1: rgba(255, 255, 255, 0.74); --sp-surface-2: rgba(248, 250, 252, 0.62); --sp-surface-3: rgba(241, 245, 249, 0.72); --sp-border-1: rgba(226, 232, 240, 0.88); --sp-border-2: rgba(203, 213, 225, 0.82); --sp-text-1: var(--ink-950); --sp-text-2: var(--ink-600); --sp-text-3: var(--ink-400); --sp-blue: #0a84ff; --sp-blue-2: #38bdf8; --sp-green: #30d158; --sp-red: #ff453a; --sp-orange: #ff9f0a; --sp-purple: #8b5cf6; --sp-blur: 24px; --sp-blur-sm: 8px; --sp-blur-md: 16px; --sp-blur-lg: 24px; --sp-blur-xl: 32px; --sp-saturate-light: 1.15; --sp-saturate-dark: 1.25; --sp-saturate-strong: 1.35; --sp-transition-fast: var(--transition-fast); --sp-transition-med: var(--transition-medium); --glass-blur-desktop: 22px; --glass-blur-mobile: 26px; --glass-blur-panel: 18px; --glass-blur-floating: 24px; --glass-saturate-desktop: 180%; --glass-saturate-mobile: 185%; --glass-saturate-soft: 160%; --glass-shell-bg: color-mix(in srgb, var(--bg-surface) 90%, transparent); --glass-shell-border: rgba(15, 23, 42, 0.1); --glass-shell-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); --glass-shell-text: var(--gray-700); --glass-shell-text-muted: var(--gray-600); --glass-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(241, 247, 250, 0.56)); --glass-panel-border: rgba(255, 255, 255, 0.4); --glass-panel-shadow: 0 14px 28px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.68) inset; --glass-panel-hover-shadow: 0 18px 36px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.74) inset; --glass-floating-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(242, 248, 251, 0.64)); --glass-floating-border: rgba(255, 255, 255, 0.36); --glass-floating-shadow: 0 18px 44px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.72) inset; --glass-floating-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.01)), radial-gradient(circle at top center, rgba(255, 255, 255, 0.14), transparent 58%); --glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(240, 247, 250, 0.54)); --glass-control-border: rgba(255, 255, 255, 0.44); --glass-control-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.74) inset; --glass-control-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(225, 243, 240, 0.58)), rgba(45, 212, 191, 0.12); --glass-accent-bg: var(--ui-accent-soft); --glass-accent-border: var(--ui-accent-border); --glass-accent-text: var(--ui-accent); --glass-accent-shadow: none; --glass-filter-shell: blur(var(--sp-blur-md)) saturate(var(--sp-saturate-light)); --glass-filter-mobile-shell: none; --glass-filter-panel: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate-desktop)); --glass-filter-floating: blur(var(--glass-blur-floating)) saturate(var(--glass-saturate-soft)); --glass-filter-control: blur(var(--glass-blur-panel)) saturate(var(--glass-saturate-soft)); --sp-glass-filter-light: var(--glass-filter-panel); --sp-glass-filter-light-soft: blur(var(--sp-blur-md)) saturate(1.1); --sp-glass-filter-dark: blur(var(--sp-blur-lg)); --sp-glass-filter-dark-md: blur(20px); --sp-glass-filter-dark-soft: blur(var(--sp-blur-md)) saturate(1.08); --sp-glass-surface-bg: var(--glass-panel-bg); --sp-glass-surface-border: var(--glass-panel-border); --sp-glass-surface-shadow: var(--glass-panel-shadow); --sp-glass-surface-hover-shadow: var(--glass-panel-hover-shadow); --sp-glass-tile-bg: var(--glass-panel-bg); --sp-glass-tile-shadow: var(--glass-panel-shadow); --sp-glass-subtle-bg: rgba(248, 250, 252, 0.62); --sp-glass-subtle-border: rgba(226, 232, 240, 0.76); } /* Dark Theme */ :root[data-theme='dark'] { color-scheme: dark; --bg-primary: #16191e; --ui-accent: var(--brand-ink, var(--brand-300)); --bg-secondary: #1b1f24; --bg-surface: #1f2329; --bg-surface-hover: #282d34; --border-color: rgba(255, 255, 255, 0.07); --border-color-strong: rgba(255, 255, 255, 0.12); --text-primary: #EAF1F8; --text-secondary: #90A2B7; --text-muted: #9AABC0; --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.28); --shadow-lg: 0 4px 16px rgba(0, 0, 0, .36); --table-header-bg: rgba(255, 255, 255, 0.03); --color-warning-dark: #ff9f0a; --sp-bg-0: #16191e; --sp-bg-1: #1f2329; --sp-bg-2: #282d34; --sp-surface-1: rgba(31, 35, 41, 0.78); --sp-surface-2: rgba(40, 45, 52, 0.66); --sp-surface-3: rgba(58, 64, 72, 0.5); --sp-border-1: rgba(255, 255, 255, 0.09); --sp-border-2: rgba(255, 255, 255, 0.16); --sp-text-1: #f8fafc; --sp-text-2: #cbd5e1; --sp-text-3: #94a3b8; --sp-purple: #bf5af2; --glass-shell-bg: #22262c; --glass-shell-border: rgba(255, 255, 255, 0.08); --glass-shell-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); --glass-shell-text: var(--text-secondary); --glass-shell-text-muted: var(--sp-text-3); --glass-panel-bg: color-mix(in srgb, var(--sp-bg-1) 82%, transparent); --glass-panel-border: rgba(255, 255, 255, 0.06); --glass-panel-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); --glass-panel-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); --glass-floating-bg: rgba(28, 32, 38, 0.92); --glass-floating-border: rgba(255, 255, 255, 0.1); --glass-floating-shadow: 0 18px 44px rgba(2, 6, 23, 0.34), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --glass-floating-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.01)), radial-gradient(circle at top center, rgba(255, 255, 255, 0.14), transparent 58%); --glass-control-bg: rgba(255, 255, 255, 0.08); --glass-control-border: rgba(255, 255, 255, 0.1); --glass-control-shadow: 0 8px 20px rgba(2, 6, 23, 0.18), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --glass-control-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.04); --glass-accent-bg: var(--ui-accent-soft); --glass-accent-border: var(--ui-accent-border); --glass-accent-text: var(--ui-accent); --glass-accent-shadow: none; --sp-glass-surface-bg: var(--glass-panel-bg); --sp-glass-surface-border: var(--glass-panel-border); --sp-glass-surface-shadow: var(--glass-panel-shadow); --sp-glass-surface-hover-shadow: var(--glass-panel-hover-shadow); --sp-glass-tile-bg: var(--glass-panel-bg); --sp-glass-tile-shadow: var(--glass-panel-shadow); --sp-glass-subtle-bg: rgba(255, 255, 255, 0.05); --sp-glass-subtle-border: rgba(255, 255, 255, 0.07); --surface-input: var(--glass-white-06); --surface-input-static: var(--glass-white-03); --surface-input-text: var(--sp-text-1); --surface-input-static-text: var(--sp-text-3); --state-review-bg: color-mix(in srgb, var(--warning-500) 16%, transparent); --state-review-text: var(--warning-300); --state-review-border: color-mix(in srgb, var(--warning-500) 38%, transparent); --state-ok-bg: color-mix(in srgb, var(--success-500) 16%, transparent); --state-ok-text: var(--success-300); --state-blocked-bg: color-mix(in srgb, var(--danger-500) 16%, transparent); --state-blocked-text: var(--danger-300); --state-readonly-bg: var(--glass-white-03); --state-readonly-text: var(--sp-text-3); } /* Glass Color Primitives */ :root { --glass-blue-04: rgba(37, 99, 235, 0.04); --glass-blue-08: color-mix(in srgb, var(--sp-blue) 8%, transparent); --glass-blue-08-2: rgba(59,130,246,0.08); --glass-blue-10: color-mix(in srgb, var(--sp-blue) 10%, transparent); --glass-blue-12: color-mix(in srgb, var(--sp-blue-2) 12%, transparent); --glass-blue-14: color-mix(in srgb, var(--sp-blue) 14%, transparent); --glass-blue-16: color-mix(in srgb, var(--sp-blue) 16%, transparent); --glass-blue-18: color-mix(in srgb, var(--sp-blue-2) 18%, transparent); --glass-blue-20: color-mix(in srgb, var(--sp-blue) 20%, transparent); --glass-blue-22: color-mix(in srgb, var(--sp-blue) 22%, transparent); --glass-blue-28: color-mix(in srgb, var(--sp-blue) 28%, transparent); --glass-blue-36: color-mix(in srgb, var(--sp-blue) 36%, transparent); --glass-blue-40: color-mix(in srgb, var(--sp-blue) 40%, transparent); --glass-blue-50: color-mix(in srgb, var(--sp-blue) 50%, transparent); --glass-blue-55: color-mix(in srgb, var(--sp-blue) 55%, transparent); --glass-blue-95: color-mix(in srgb, var(--sp-blue) 95%, transparent); --glass-brand-035: color-mix(in srgb, var(--brand-400) 3.5%, transparent); --glass-brand-045: color-mix(in srgb, var(--brand-400) 4.5%, transparent); --glass-brand-05: color-mix(in srgb, var(--brand-500) 5%, transparent); --glass-brand-06: color-mix(in srgb, var(--brand-400) 6%, transparent); --glass-brand-06-2: color-mix(in srgb, var(--teal-400) 6%, transparent); --glass-brand-08: color-mix(in srgb, var(--brand-400) 8%, transparent); --glass-brand-08-2: color-mix(in srgb, var(--teal-400) 8%, transparent); --glass-brand-1: color-mix(in srgb, var(--brand-400) 10%, transparent); --glass-brand-11: color-mix(in srgb, var(--brand-400) 11%, transparent); --glass-brand-11-2: color-mix(in srgb, var(--teal-400) 11%, transparent); --glass-brand-12: color-mix(in srgb, var(--brand-400) 12%, transparent); --glass-brand-12-2: color-mix(in srgb, var(--teal-400) 12%, transparent); --glass-brand-14: color-mix(in srgb, var(--brand-500) 14%, transparent); --glass-brand-14-2: color-mix(in srgb, var(--teal-400) 14%, transparent); --glass-brand-15: color-mix(in srgb, var(--brand-500) 15%, transparent); --glass-brand-18: color-mix(in srgb, var(--brand-500) 18%, transparent); --glass-brand-18-2: color-mix(in srgb, var(--teal-400) 18%, transparent); --glass-brand-2: color-mix(in srgb, var(--brand-400) 20%, transparent); --glass-brand-22: color-mix(in srgb, var(--brand-500) 22%, transparent); --glass-brand-22-2: color-mix(in srgb, var(--teal-400) 22%, transparent); --glass-brand-25: color-mix(in srgb, var(--brand-500) 25%, transparent); --glass-brand-28: color-mix(in srgb, var(--brand-500) 28%, transparent); --glass-brand-32: color-mix(in srgb, var(--teal-400) 32%, transparent); --glass-brand-34: color-mix(in srgb, var(--teal-400) 34%, transparent); --glass-brand-35: color-mix(in srgb, var(--brand-500) 35%, transparent); --glass-brand-36: color-mix(in srgb, var(--brand-500) 36%, transparent); --glass-brand-38: color-mix(in srgb, var(--brand-500) 38%, transparent); --glass-brand-40: color-mix(in srgb, var(--brand-500) 40%, transparent); --glass-brand-42: color-mix(in srgb, var(--brand-500) 42%, transparent); --glass-brand-42-2: color-mix(in srgb, var(--teal-400) 42%, transparent); --glass-brand-45: color-mix(in srgb, var(--brand-500) 45%, transparent); --glass-brand-55: color-mix(in srgb, var(--brand-500) 55%, transparent); --glass-brand-60: color-mix(in srgb, var(--brand-500) 60%, transparent); --glass-brand-deep-06: color-mix(in srgb, var(--brand-600) 6%, transparent); --glass-brand-deep-08: color-mix(in srgb, var(--brand-600) 8%, transparent); --glass-brand-deep-20: color-mix(in srgb, var(--brand-600) 20%, transparent); --glass-brand-deep-28: color-mix(in srgb, var(--brand-600) 28%, transparent); --glass-brand-light-52: color-mix(in srgb, var(--brand-200) 52%, transparent); --glass-brand-light-86: color-mix(in srgb, var(--brand-200) 86%, transparent); --glass-brand-light-94: color-mix(in srgb, var(--brand-200) 94%, transparent); --glass-brand-light-95: color-mix(in srgb, var(--brand-200) 95%, transparent); --glass-chrome-dark: #22262c; --glass-danger-05: color-mix(in srgb, var(--danger-500) 5%, transparent); --glass-danger-08: color-mix(in srgb, var(--danger-500) 8%, transparent); --glass-danger-10: color-mix(in srgb, var(--danger-500) 10%, transparent); --glass-danger-11: color-mix(in srgb, var(--danger-500) 11%, transparent); --glass-danger-12: color-mix(in srgb, var(--danger-500) 12%, transparent); --glass-danger-16: color-mix(in srgb, var(--danger-500) 16%, transparent); --glass-danger-18: color-mix(in srgb, var(--danger-500) 18%, transparent); --glass-danger-20: color-mix(in srgb, var(--danger-500) 20%, transparent); --glass-danger-22: color-mix(in srgb, var(--danger-900) 22%, transparent); --glass-danger-24: color-mix(in srgb, var(--danger-500) 24%, transparent); --glass-danger-28: color-mix(in srgb, var(--danger-900) 28%, transparent); --glass-danger-30: color-mix(in srgb, var(--danger-500) 30%, transparent); --glass-danger-32: color-mix(in srgb, var(--danger-500) 32%, transparent); --glass-danger-38: color-mix(in srgb, var(--danger-500) 38%, transparent); --glass-danger-40: color-mix(in srgb, var(--danger-500) 40%, transparent); --glass-danger-90: color-mix(in srgb, var(--danger-400) 90%, transparent); --glass-danger-95: color-mix(in srgb, var(--danger-400) 95%, transparent); --glass-danger-light-94: rgba(254, 202, 202, 0.94); --glass-danger-surface-dark: #1f1315; --glass-danger-tint-82: color-mix(in srgb, var(--danger-50) 82%, transparent); --glass-dark-50: color-mix(in srgb, var(--ink-900) 50%, transparent); --glass-gray-35: rgba(75, 85, 99, 0.35); --glass-green-10: color-mix(in srgb, var(--green-600) 10%, transparent); --glass-green-25: color-mix(in srgb, var(--green-600) 25%, transparent); --glass-green-light-90: rgba(74, 222, 128, 0.90); --glass-ice-5: color-mix(in srgb, var(--gray-200) 50%, transparent); --glass-ice-52: color-mix(in srgb, var(--gray-200) 52%, transparent); --glass-ice-54: color-mix(in srgb, var(--gray-50) 54%, transparent); --glass-ice-56: color-mix(in srgb, var(--gray-50) 56%, transparent); --glass-ice-58: color-mix(in srgb, var(--gray-200) 58%, transparent); --glass-ice-60: color-mix(in srgb, var(--gray-50) 60%, transparent); --glass-ice-62: color-mix(in srgb, var(--gray-200) 62%, transparent); --glass-ice-66: color-mix(in srgb, var(--gray-50) 66%, transparent); --glass-ice-68: color-mix(in srgb, var(--gray-300) 68%, transparent); --glass-ice-70: color-mix(in srgb, var(--gray-200) 70%, transparent); --glass-ice-72: color-mix(in srgb, var(--gray-300) 72%, transparent); --glass-ice-72-2: color-mix(in srgb, var(--gray-200) 72%, transparent); --glass-ice-74: color-mix(in srgb, var(--gray-300) 74%, transparent); --glass-ice-75: color-mix(in srgb, var(--gray-200) 75%, transparent); --glass-ice-76: color-mix(in srgb, var(--gray-200) 76%, transparent); --glass-ice-80: color-mix(in srgb, var(--gray-300) 80%, transparent); --glass-ice-82: color-mix(in srgb, var(--gray-300) 82%, transparent); --glass-ice-84: color-mix(in srgb, var(--gray-200) 84%, transparent); --glass-ice-88: color-mix(in srgb, var(--gray-200) 88%, transparent); --glass-ice-90: color-mix(in srgb, var(--gray-300) 90%, transparent); --glass-ice-90-2: color-mix(in srgb, var(--gray-200) 90%, transparent); --glass-ice-92: color-mix(in srgb, var(--gray-200) 92%, transparent); --glass-ice-95: color-mix(in srgb, var(--gray-100) 95%, transparent); --glass-ice-96: color-mix(in srgb, var(--gray-200) 96%, transparent); --glass-indigo-12: color-mix(in srgb, var(--indigo-500) 12%, transparent); --glass-indigo-6: color-mix(in srgb, var(--indigo-500) 60%, transparent); --glass-indigo-7: color-mix(in srgb, var(--indigo-500) 70%, transparent); --glass-ink-03: color-mix(in srgb, black 3%, transparent); --glass-ink-04: color-mix(in srgb, var(--gray-900) 4%, transparent); --glass-ink-05: color-mix(in srgb, var(--gray-900) 5%, transparent); --glass-ink-06: color-mix(in srgb, var(--gray-900) 6%, transparent); --glass-ink-07: color-mix(in srgb, var(--gray-900) 7%, transparent); --glass-ink-08: color-mix(in srgb, var(--gray-900) 8%, transparent); --glass-ink-1: color-mix(in srgb, black 10%, transparent); --glass-ink-10: color-mix(in srgb, var(--gray-900) 10%, transparent); --glass-ink-11: color-mix(in srgb, var(--gray-900) 11%, transparent); --glass-ink-12: color-mix(in srgb, var(--gray-900) 12%, transparent); --glass-ink-14: color-mix(in srgb, var(--gray-900) 14%, transparent); --glass-ink-18: rgba(2, 6, 23, 0.18); --glass-ink-2: rgba(2, 6, 23, 0.2); --glass-ink-22: rgba(2, 6, 23, 0.22); --glass-ink-24: color-mix(in srgb, var(--gray-900) 24%, transparent); --glass-ink-25: color-mix(in srgb, black 25%, transparent); --glass-ink-26: rgba(2, 6, 23, 0.26); --glass-ink-28: color-mix(in srgb, var(--gray-900) 28%, transparent); --glass-ink900-30: color-mix(in srgb, var(--gray-900) 30%, transparent); --glass-ink900-32: color-mix(in srgb, var(--gray-900) 32%, transparent); --glass-ink900-35: color-mix(in srgb, var(--gray-900) 35%, transparent); --glass-ink900-38: color-mix(in srgb, var(--gray-900) 38%, transparent); --glass-ink-3: color-mix(in srgb, black 30%, transparent); --glass-ink-32: color-mix(in srgb, var(--gray-600) 32%, transparent); --glass-ink-35: color-mix(in srgb, var(--gray-600) 35%, transparent); --glass-ink-36: color-mix(in srgb, black 36%, transparent); --glass-ink-38: color-mix(in srgb, var(--gray-800) 38%, transparent); --glass-ink-4: color-mix(in srgb, black 40%, transparent); --glass-ink-40: color-mix(in srgb, var(--gray-700) 40%, transparent); --glass-ink-42: color-mix(in srgb, black 42%, transparent); --glass-ink-45: color-mix(in srgb, var(--gray-600) 45%, transparent); --glass-ink-48: color-mix(in srgb, var(--gray-900) 48%, transparent); --glass-ink-50: color-mix(in srgb, var(--gray-600) 50%, transparent); --glass-ink-52: color-mix(in srgb, var(--gray-900) 52%, transparent); --glass-ink-55: color-mix(in srgb, var(--gray-600) 55%, transparent); --glass-ink-6: color-mix(in srgb, var(--gray-600) 60%, transparent); --glass-ink-60: color-mix(in srgb, var(--gray-900) 60%, transparent); --glass-ink-65: color-mix(in srgb, black 65%, transparent); --glass-ink-68: color-mix(in srgb, black 68%, transparent); --glass-ink-7: color-mix(in srgb, var(--gray-800) 70%, transparent); --glass-ink-70: color-mix(in srgb, var(--ink-400) 70%, transparent); --glass-ink-72: color-mix(in srgb, var(--gray-900) 72%, transparent); --glass-ink-78: color-mix(in srgb, var(--gray-600) 78%, transparent); --glass-ink-80: color-mix(in srgb, var(--gray-600) 80%, transparent); --glass-ink-82: color-mix(in srgb, var(--gray-600) 82%, transparent); --glass-ink-84: color-mix(in srgb, var(--gray-600) 84%, transparent); --glass-ink-88: color-mix(in srgb, var(--ink-400) 88%, transparent); --glass-ink-90: color-mix(in srgb, var(--gray-600) 90%, transparent); --glass-ink-92: rgba(11, 16, 32, 0.92); --glass-ink-94: color-mix(in srgb, var(--gray-900) 94%, transparent); --glass-ink-94-2: rgba(7,11,22,0.94); --glass-mist-78: rgba(242, 244, 247, 0.78); --glass-navy-20: color-mix(in srgb, var(--ink-900) 20%, transparent); --glass-navy-22: rgba(11, 23, 32, 0.22); --glass-navy-25: color-mix(in srgb, var(--ink-900) 25%, transparent); --glass-navy-28: rgba(16, 32, 42, 0.28); --glass-navy-72: rgba(12, 24, 48, 0.72); --glass-night-10: color-mix(in srgb, var(--ink-950) 10%, transparent); --glass-night-68: rgba(4, 9, 20, 0.68); --glass-red-10: color-mix(in srgb, var(--sp-red) 10%, transparent); --glass-red-16: color-mix(in srgb, var(--sp-red) 16%, transparent); --glass-red-26: color-mix(in srgb, var(--sp-red) 26%, transparent); --glass-red-50: color-mix(in srgb, var(--sp-red) 50%, transparent); --glass-slate-04: color-mix(in srgb, var(--gray-400) 4%, transparent); --glass-slate-06: color-mix(in srgb, var(--gray-400) 6%, transparent); --glass-slate-08: color-mix(in srgb, var(--gray-400) 8%, transparent); --glass-slate-10: color-mix(in srgb, var(--gray-400) 10%, transparent); --glass-slate-12: color-mix(in srgb, var(--gray-400) 12%, transparent); --glass-slate-14: color-mix(in srgb, var(--gray-400) 14%, transparent); --glass-slate-15: color-mix(in srgb, var(--gray-400) 15%, transparent); --glass-slate-16: color-mix(in srgb, var(--gray-400) 16%, transparent); --glass-slate-18: color-mix(in srgb, var(--gray-400) 18%, transparent); --glass-slate-2: color-mix(in srgb, var(--gray-400) 20%, transparent); --glass-slate-22: color-mix(in srgb, var(--gray-400) 22%, transparent); --glass-slate-24: color-mix(in srgb, var(--gray-400) 24%, transparent); --glass-slate-25: color-mix(in srgb, var(--gray-400) 25%, transparent); --glass-slate-28: color-mix(in srgb, var(--gray-400) 28%, transparent); --glass-slate-30: rgba(107, 114, 128, 0.30); --glass-slate-40: color-mix(in srgb, var(--gray-400) 40%, transparent); --glass-slate-50: color-mix(in srgb, var(--gray-400) 50%, transparent); --glass-slate-70: color-mix(in srgb, var(--gray-400) 70%, transparent); --glass-slate-72: color-mix(in srgb, var(--gray-400) 72%, transparent); --glass-slate-80: color-mix(in srgb, var(--gray-400) 80%, transparent); --glass-slate-82: color-mix(in srgb, var(--gray-400) 82%, transparent); --glass-slate-85: color-mix(in srgb, var(--gray-400) 85%, transparent); --glass-slate-86: color-mix(in srgb, var(--gray-400) 86%, transparent); --glass-slate-90: color-mix(in srgb, var(--gray-400) 90%, transparent); --glass-slate-92: color-mix(in srgb, var(--gray-400) 92%, transparent); --glass-success-03: color-mix(in srgb, var(--glass-whatsapp-green) 3%, transparent); --glass-success-08: color-mix(in srgb, var(--success-500) 8%, transparent); --glass-success-10: color-mix(in srgb, var(--success-500) 10%, transparent); --glass-success-12: color-mix(in srgb, var(--success-500) 12%, transparent); --glass-success-16: color-mix(in srgb, var(--success-500) 16%, transparent); --glass-success-18: color-mix(in srgb, var(--success-500) 18%, transparent); --glass-success-2: color-mix(in srgb, var(--success-500) 20%, transparent); --glass-success-20: color-mix(in srgb, var(--glass-whatsapp-green) 20%, transparent); --glass-success-22: color-mix(in srgb, var(--success-500) 22%, transparent); --glass-success-24: color-mix(in srgb, var(--success-500) 24%, transparent); --glass-success-28: color-mix(in srgb, var(--success-500) 28%, transparent); --glass-success-30: color-mix(in srgb, var(--success-500) 30%, transparent); --glass-success-32: color-mix(in srgb, var(--success-500) 32%, transparent); --glass-success-38: color-mix(in srgb, var(--success-500) 38%, transparent); --glass-success-40: color-mix(in srgb, var(--success-500) 40%, transparent); --glass-success-50: color-mix(in srgb, var(--sp-green) 50%, transparent); --glass-success-light-82: rgba(240, 253, 244, 0.82); --glass-success-light-95: rgba(52, 211, 153, 0.95); --glass-success-surface-dark: #071a0f; --glass-teal-10: color-mix(in srgb, var(--teal-400) 10%, transparent); --glass-teal-16: color-mix(in srgb, var(--teal-400) 16%, transparent); --glass-toast-surface-dark: #10202a; --glass-violet-10: color-mix(in srgb, var(--violet-600) 10%, transparent); --glass-warning-08: color-mix(in srgb, var(--warning-500) 8%, transparent); --glass-warning-10: color-mix(in srgb, var(--sp-orange) 10%, transparent); --glass-warning-11: color-mix(in srgb, var(--warning-500) 11%, transparent); --glass-warning-12: color-mix(in srgb, var(--warning-500) 12%, transparent); --glass-warning-14: color-mix(in srgb, var(--warning-500) 14%, transparent); --glass-warning-15: color-mix(in srgb, var(--warning-500) 15%, transparent); --glass-warning-16: color-mix(in srgb, var(--warning-500) 16%, transparent); --glass-warning-18: color-mix(in srgb, var(--warning-500) 18%, transparent); --glass-warning-20: color-mix(in srgb, var(--warning-500) 20%, transparent); --glass-warning-22: color-mix(in srgb, var(--warning-500) 22%, transparent); --glass-warning-25: color-mix(in srgb, var(--warning-500) 25%, transparent); --glass-warning-30: color-mix(in srgb, var(--warning-500) 30%, transparent); --glass-warning-35: color-mix(in srgb, var(--warning-700) 35%, transparent); --glass-warning-40: color-mix(in srgb, var(--warning-500) 40%, transparent); --glass-warning-50: color-mix(in srgb, var(--sp-orange) 50%, transparent); --glass-warning-light-1: color-mix(in srgb, var(--warning-400) 10%, transparent); --glass-warning-light-18: color-mix(in srgb, var(--warning-400) 18%, transparent); --glass-warning-light-2: color-mix(in srgb, var(--warning-400) 20%, transparent); --glass-warning-light-94: color-mix(in srgb, var(--warning-200) 94%, transparent); --glass-warning-light-95: color-mix(in srgb, var(--warning-200) 95%, transparent); --glass-warning-surface-dark: #1a1507; --glass-whatsapp-green: #25d366; --glass-white-01: color-mix(in srgb, white 1%, transparent); --glass-white-02: color-mix(in srgb, white 2%, transparent); --glass-white-03: color-mix(in srgb, white 2.5%, transparent); --glass-white-04: color-mix(in srgb, white 3.5%, transparent); --glass-white-05: color-mix(in srgb, white 5%, transparent); --glass-white-06: color-mix(in srgb, white 6%, transparent); --glass-white-07: color-mix(in srgb, white 7%, transparent); --glass-white-08: color-mix(in srgb, white 8%, transparent); --glass-white-09: color-mix(in srgb, white 9%, transparent); --glass-white-1: color-mix(in srgb, white 100%, transparent); --glass-white-10: color-mix(in srgb, white 10%, transparent); --glass-white-12: color-mix(in srgb, white 12%, transparent); --glass-white-15: color-mix(in srgb, white 15%, transparent); --glass-white-18: color-mix(in srgb, white 18%, transparent); --glass-white-20: color-mix(in srgb, white 20%, transparent); --glass-white-22: color-mix(in srgb, white 22%, transparent); --glass-white-28: color-mix(in srgb, white 28%, transparent); --glass-white-32: color-mix(in srgb, white 32%, transparent); --glass-white-34: color-mix(in srgb, white 34%, transparent); --glass-white-36: color-mix(in srgb, white 36%, transparent); --glass-white-40: color-mix(in srgb, white 40%, transparent); --glass-white-42: color-mix(in srgb, white 42%, transparent); --glass-white-45: color-mix(in srgb, white 45%, transparent); --glass-white-52: color-mix(in srgb, white 52%, transparent); --glass-white-55: color-mix(in srgb, white 55%, transparent); --glass-white-58: color-mix(in srgb, white 58%, transparent); --glass-white-60: color-mix(in srgb, white 60%, transparent); --glass-white-66: color-mix(in srgb, white 66%, transparent); --glass-white-7: color-mix(in srgb, white 70%, transparent); --glass-white-72: color-mix(in srgb, white 72%, transparent); --glass-white-75: color-mix(in srgb, white 75%, transparent); --glass-white-76: color-mix(in srgb, white 76%, transparent); --glass-white-78: color-mix(in srgb, white 78%, transparent); --glass-white-80: color-mix(in srgb, white 80%, transparent); --glass-white-82: color-mix(in srgb, white 82%, transparent); --glass-white-84: color-mix(in srgb, white 84%, transparent); --glass-white-86: color-mix(in srgb, white 86%, transparent); --glass-white-88: color-mix(in srgb, white 88%, transparent); --glass-white-90: color-mix(in srgb, white 90%, transparent); --glass-white-92: color-mix(in srgb, white 92%, transparent); --glass-white-94: color-mix(in srgb, white 94%, transparent); --glass-white-95: color-mix(in srgb, white 95%, transparent); --glass-white-96: color-mix(in srgb, white 96%, transparent); }