/* duroob tokens, compiled from tokens.json. Light is the default; set data-theme="dark" on (or any subtree) for dark. */ @font-face { font-family: 'Geist'; src: url('../assets/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Alexandria'; src: url('../assets/Alexandria-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../assets/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root, [data-theme="light"] { color-scheme: light; --neutral-0: #FFFFFF; --neutral-50: #F4F4F4; --neutral-60: #EBEBEB; --neutral-75: #E8E8E9; --neutral-100: #DEDEDE; --neutral-150: #D2D2D4; --neutral-200: #C4C4C4; --neutral-300: #A8A8A8; --neutral-400: #8C8C8C; --neutral-500: #717171; --neutral-600: #585858; --neutral-700: #424242; --neutral-800: #303030; --neutral-900: #222222; --neutral-950: #171717; --neutral-1000: #060606; --periwinkle-50: #F3F2FA; --periwinkle-100: #E8E6F3; --periwinkle-200: #D4D1EA; --periwinkle-300: #BEB7E2; --periwinkle-400: #A59BD6; --periwinkle-500: #8A7FBB; --periwinkle-600: #726A9A; --periwinkle-700: #5B5675; --periwinkle-800: #4D4A5C; --periwinkle-900: #353340; --periwinkle-950: #26252E; --periwinkle-1000: #0D0C12; --purple-50: #F5F2FA; --purple-100: #EBE5F3; --purple-200: #D1C4E3; --purple-300: #B39CCE; --purple-400: #9575B9; --purple-500: #7D56A5; --purple-600: #643B8B; --purple-700: #502874; --purple-800: #3C165D; --purple-900: #2B0C44; --purple-950: #1D062F; --purple-1000: #0C0217; --error-50: #FBF1F0; --error-100: #F5E3E1; --error-200: #E7C0BC; --error-300: #D39690; --error-400: #BD6B65; --error-500: #A84A45; --error-600: #8D2C2B; --error-700: #74181A; --error-800: #5C0109; --error-900: #430005; --error-950: #2F0002; --error-1000: #170001; --success-50: #EFF6F0; --success-100: #E0ECE1; --success-200: #B9D3BC; --success-300: #8AB48F; --success-400: #5B9664; --success-500: #347D43; --success-600: #0E6428; --success-700: #004E1B; --success-800: #003911; --success-900: #00280A; --success-950: #001A05; --success-1000: #000B02; --bg: var(--neutral-50); --surface: var(--periwinkle-100); --border: var(--neutral-200); --border-control: var(--neutral-500); --divider: var(--neutral-100); --ink: var(--neutral-950); --ink-secondary: var(--periwinkle-800); --ink-disabled: var(--neutral-400); --accent-primary: var(--purple-600); --accent-primary-hover: var(--purple-700); --accent-primary-pressed: var(--purple-800); --on-accent-primary: var(--neutral-50); --accent-secondary: var(--periwinkle-600); --accent-secondary-hover: var(--periwinkle-700); --accent-secondary-pressed: var(--periwinkle-800); --accent-tint: var(--periwinkle-100); --accent-tint-pressed: var(--periwinkle-200); --focus-ring: var(--accent-primary); --error-tint: var(--error-100); --error-icon: var(--error-600); --error-text: var(--error-700); --success-tint: var(--success-100); --success-icon: var(--success-600); --success-text: var(--success-700); --overlay-scrim: rgba(6,6,6,0.6); --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08); } [data-theme="dark"] { color-scheme: dark; --bg: var(--neutral-950); --surface: var(--periwinkle-900); --border: var(--neutral-700); --border-control: var(--neutral-400); --divider: var(--neutral-800); --ink: var(--neutral-50); --ink-secondary: var(--periwinkle-400); --ink-disabled: var(--neutral-500); --accent-primary: var(--periwinkle-400); --accent-primary-hover: var(--periwinkle-300); --accent-primary-pressed: var(--periwinkle-200); --on-accent-primary: var(--neutral-950); --accent-secondary: var(--periwinkle-400); --accent-secondary-hover: var(--periwinkle-500); --accent-secondary-pressed: var(--periwinkle-600); --accent-tint: var(--periwinkle-900); --accent-tint-pressed: var(--periwinkle-800); --focus-ring: var(--accent-primary); --error-tint: var(--error-900); --error-icon: var(--error-300); --error-text: var(--error-300); --success-tint: var(--success-900); --success-icon: var(--success-300); --success-text: var(--success-300); --overlay-scrim: rgba(6,6,6,0.6); } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-16: 64px; --radius-sm: 10px; --radius-lg: 16px; --radius-full: 9999px; --opacity-disabled: 0.35; --opacity-grain: 0.045; --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-arabic: 'Alexandria', 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-display: 700 56px/64px var(--font-sans); --text-h1: 700 40px/48px var(--font-sans); --text-h2: 600 28px/32px var(--font-sans); --text-h3: 600 20px/24px var(--font-sans); --text-body-large: 500 16px/24px var(--font-sans); --text-body: 400 14px/20px var(--font-sans); --text-caption: 500 12px/16px var(--font-sans); --text-display-ar: 700 56px/64px var(--font-arabic); --text-h1-ar: 700 40px/48px var(--font-arabic); --text-h2-ar: 600 28px/32px var(--font-arabic); --text-h3-ar: 600 20px/24px var(--font-arabic); --text-body-large-ar: 500 16px/24px var(--font-arabic); --text-body-ar: 400 14px/20px var(--font-arabic); --text-caption-ar: 500 12px/16px var(--font-arabic); } .display { font: var(--text-display); } .h1 { font: var(--text-h1); } .h2 { font: var(--text-h2); } .h3 { font: var(--text-h3); } .body-large { font: var(--text-body-large); } .body { font: var(--text-body); } .caption { font: var(--text-caption); } .display-ar { font: var(--text-display-ar); } .h1-ar { font: var(--text-h1-ar); } .h2-ar { font: var(--text-h2-ar); } .h3-ar { font: var(--text-h3-ar); } .body-large-ar { font: var(--text-body-large-ar); } .body-ar { font: var(--text-body-ar); } .caption-ar { font: var(--text-caption-ar); }