/* ============================================================ Sellatr Design Tokens Single source of truth: import this and use the vars. ------------------------------------------------------------ @import url("colors_and_type.css"); html, body { color: var(--fg); background: var(--bg); } ============================================================ */ /* ---------- FONTS (Google Fonts) ---------- */ /* If you have licensed local files, drop them in /fonts/ and replace the @import below with @font-face declarations. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Alexandria:wght@300;400;500;600;700;800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); :root { /* ==================================================== COLOR — BASE PALETTE Use these only when a semantic token below doesn't fit. ==================================================== */ /* Brand mark */ --brand-amber: #F0A010; /* logo accent only — extracted from the logo */ --brand-amber-soft: #FFB733; --brand-amber-deep: #C77F00; /* Neutrals — warm-tinted near-black */ --black: #0B0B0E; /* not pure black, ~0% warmer */ --white: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F5F6; --neutral-200: #EAEAEC; --neutral-300: #D4D4D8; --neutral-400: #A1A1A8; --neutral-500: #71717A; --neutral-600: #52525B; --neutral-700: #3F3F46; --neutral-800: #27272A; --neutral-900: #18181B; --neutral-950: #0B0B0E; /* UI accents — from brief */ --indigo: #5B5BF7; /* primary product accent */ --indigo-soft: #8484FF; --indigo-deep: #3A3ACC; --electric-blue: #2A6FFF; /* gradient partner with indigo */ --electric-blue-soft: #5C92FF; --cyan: #06B6D4; --cyan-soft: #38D4ED; --whatsapp: #25D366; /* WhatsApp brand green — channel only */ --whatsapp-deep: #128C7E; /* Semantic colors */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: #2A6FFF; /* ==================================================== SEMANTIC TOKENS (light theme — default) Use these in components, not the palette above. ==================================================== */ /* Surfaces */ --bg: #FFFFFF; /* page background */ --bg-subtle: #FAFAFA; /* secondary panels */ --bg-muted: #F5F5F6; /* inputs, code blocks */ --surface: #FFFFFF; /* cards */ --surface-raised: #FFFFFF; /* popovers, modals */ --overlay: rgba(11,11,14,0.4); /* modal scrim */ --glass: rgba(255,255,255,0.72); /* Foreground */ --fg: #0B0B0E; /* primary text */ --fg-strong: #000000; /* headings only */ --fg-muted: #52525B; /* secondary text */ --fg-subtle: #A1A1A8; /* tertiary, placeholders */ --fg-on-accent: #FFFFFF; /* text on filled accent */ /* Borders */ --border: rgba(11,11,14,0.08); --border-strong: rgba(11,11,14,0.14); --border-focus: #5B5BF7; /* Accent (UI primary) */ --accent: var(--indigo); --accent-soft: var(--indigo-soft); --accent-deep: var(--indigo-deep); --accent-bg: rgba(91,91,247,0.08); /* subtle accent fill */ --accent-bg-hover: rgba(91,91,247,0.12); /* Status fills (subtle bg + bold fg) */ --success-bg: rgba(16,185,129,0.10); --warning-bg: rgba(245,158,11,0.10); --danger-bg: rgba(239,68,68,0.10); --info-bg: rgba(42,111,255,0.10); /* Gradients (use sparingly — primary CTA, hero, charts) */ --gradient-primary: linear-gradient(135deg, #5B5BF7 0%, #2A6FFF 100%); --gradient-cool: linear-gradient(135deg, #5B5BF7 0%, #06B6D4 100%); --gradient-aurora: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(91,91,247,0.35), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 30%, rgba(6,182,212,0.25), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 90%, rgba(37,211,102,0.18), transparent 60%); --gradient-text: linear-gradient(135deg, #0B0B0E 0%, #52525B 100%); /* Shadows — layered, soft */ --shadow-1: 0 1px 2px rgba(11,11,14,0.04), 0 4px 16px rgba(11,11,14,0.04); --shadow-2: 0 2px 4px rgba(11,11,14,0.06), 0 12px 32px rgba(11,11,14,0.08); --shadow-3: 0 8px 16px rgba(11,11,14,0.08), 0 32px 80px rgba(11,11,14,0.16); --shadow-focus: 0 0 0 4px rgba(91,91,247,0.18); --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.04); /* ==================================================== RADIUS ==================================================== */ --radius-sm: 8px; --radius-md: 12px; /* inputs */ --radius-lg: 16px; --radius-xl: 20px; /* cards & buttons — brief minimum */ --radius-2xl: 24px; --radius-3xl: 32px; /* feature cards */ --radius-pill: 9999px; /* ==================================================== SPACING — 8px grid (with 4 for fine adjustments) ==================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; --space-14: 160px; /* ==================================================== TYPE — FAMILIES ==================================================== */ --font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-sans: 'Geist', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; --font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ==================================================== TYPE — RAMP ==================================================== */ /* Display — marketing hero only */ --text-display-2xl: 96px; /* clamp in use */ --text-display-xl: 72px; --text-display-lg: 60px; --text-display-md: 48px; /* Headings */ --text-h1: 40px; --text-h2: 32px; --text-h3: 24px; --text-h4: 20px; --text-h5: 16px; /* Body */ --text-body-lg: 18px; --text-body: 15px; /* default product UI body */ --text-body-sm: 13px; --text-caption: 12px; --text-micro: 11px; /* Line heights */ --leading-tight: 1.05; /* display */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; /* body */ --leading-relaxed: 1.7; /* body Arabic */ /* Tracking */ --tracking-display: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* small caps labels */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ==================================================== MOTION ==================================================== */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-page: 600ms; /* ==================================================== LAYOUT ==================================================== */ --max-w-content: 1200px; --max-w-prose: 680px; --max-w-narrow: 560px; --nav-h: 64px; --topbar-h: 56px; --sidebar-w: 280px; --sidebar-w-collapsed:64px; } /* ==================================================== DARK THEME — flip via [data-theme="dark"] or .dark ==================================================== */ [data-theme="dark"], .dark { --bg: #0B0B0E; --bg-subtle: #111114; --bg-muted: #18181B; --surface: #111114; --surface-raised: #18181B; --overlay: rgba(0,0,0,0.6); --glass: rgba(17,17,20,0.72); --fg: #FAFAFA; --fg-strong: #FFFFFF; --fg-muted: #A1A1A8; --fg-subtle: #71717A; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --accent-bg: rgba(91,91,247,0.16); --accent-bg-hover: rgba(91,91,247,0.22); --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); --shadow-2: 0 2px 4px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.4); --shadow-3: 0 8px 16px rgba(0,0,0,0.6), 0 32px 80px rgba(0,0,0,0.5); --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #A1A1A8 100%); } /* ==================================================== ELEMENT DEFAULTS — opt-in helpers Apply via .ds-* classes; do NOT auto-cascade to *. ==================================================== */ .ds-display-2xl { font-family: var(--font-display); font-size: clamp(56px, 9vw, var(--text-display-2xl)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); } .ds-display-xl { font-family: var(--font-display); font-size: clamp(48px, 7vw, var(--text-display-xl)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); } .ds-display-lg { font-family: var(--font-display); font-size: clamp(40px, 6vw, var(--text-display-lg)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); } .ds-h1 { font-family: var(--font-sans); font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .ds-h2 { font-family: var(--font-sans); font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .ds-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .ds-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-snug); } .ds-h5 { font-family: var(--font-sans); font-size: var(--text-h5); font-weight: 600; line-height: var(--leading-snug); } .ds-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-normal); } .ds-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); } .ds-body-sm { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 400; line-height: var(--leading-normal); } .ds-caption { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); color: var(--fg-muted); } .ds-label { font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .ds-mono { font-family: var(--font-mono); font-size: var(--text-body-sm); } /* Arabic-aware overrides: when inside [lang="ar"] or dir="rtl", bump line-height and swap to IBM Plex Sans Arabic. */ [lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); } [lang="ar"] .ds-body, [lang="ar"] .ds-body-lg, [lang="ar"] p { line-height: var(--leading-relaxed); }