/** * SmartBob Design Tokens * Source of truth: Figma Variables (styleguide.pdf) * * Structure: * 1. Primitives — raw values (colors, spacing, radius, typography) * 2. Semantic — tokens mapped from primitives by purpose * * Naming convention: --sb-{category}-{variant} */ :root { /* ========================================= */ /* PRIMITIVES — COLORS */ /* ========================================= */ /* Neutral */ --sb-color-neutral-0: #FFFFFF; --sb-color-neutral-100: #F1F1F1; --sb-color-neutral-150: #F5F5F4; --sb-color-neutral-200: #F0F0F0; --sb-color-neutral-300: #DFDFDF; --sb-color-neutral-600: #525252; --sb-color-neutral-900: #26272A; /* Primary (brand blue) */ --sb-color-primary-50: #E5F1FA; --sb-color-primary-100: #CCE4F6; --sb-color-primary-200: #99C8ED; --sb-color-primary-300: #66ADE3; --sb-color-primary-400: #3391DA; --sb-color-primary-500: #0076D1; --sb-color-primary-600: #005EA7; --sb-color-primary-700: #00477D; --sb-color-primary-800: #002F54; --sb-color-primary-900: #00182A; --sb-color-primary-950: #000C15; /* Feedback */ --sb-color-feedback-red-500: #E60000; --sb-color-feedback-green-500: #00C02A; --sb-color-feedback-yellow-500: #E2B857; /* ========================================= */ /* PRIMITIVES — SPACING (4px scale) */ /* ========================================= */ --sb-space-0: 0; --sb-space-1: 4px; --sb-space-2: 8px; --sb-space-3: 12px; --sb-space-4: 16px; --sb-space-6: 24px; --sb-space-7: 28px; --sb-space-8: 32px; --sb-space-9: 36px; --sb-space-10: 40px; --sb-space-11: 44px; --sb-space-12: 48px; --sb-space-14: 56px; --sb-space-16: 64px; --sb-space-20: 80px; --sb-space-24: 96px; --sb-space-28: 112px; /* ========================================= */ /* PRIMITIVES — RADIUS */ /* ========================================= */ --sb-radius-none: 0; --sb-radius-sm: 2px; --sb-radius-md: 6px; --sb-radius-lg: 8px; --sb-radius-xl: 12px; --sb-radius-2xl: 16px; --sb-radius-3xl: 24px; --sb-radius-full: 9999px; /* ========================================= */ /* TYPOGRAPHY */ /* ========================================= */ --sb-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --sb-font-weight-regular: 400; --sb-font-weight-medium: 500; --sb-font-weight-semibold: 600; --sb-font-weight-bold: 700; /* Desktop font sizes (mobile overrides scoped by @media below) */ --sb-font-xs: 12px; --sb-font-sm: 14px; --sb-font-md: 16px; --sb-font-lg: 18px; --sb-font-xl: 20px; --sb-font-2xl: 28px; --sb-font-3xl: 32px; --sb-font-4xl: 40px; --sb-font-5xl: 56px; /* Desktop line heights */ --sb-lh-xs: 16px; --sb-lh-sm: 18px; --sb-lh-md: 21px; --sb-lh-lg: 24px; --sb-lh-xl: 28px; --sb-lh-2xl: 32px; --sb-lh-3xl: 36px; --sb-lh-4xl: 48px; --sb-lh-5xl: 62px; /* Letter spacing */ --sb-ls-h1: -1.5px; --sb-ls-h2: -1.5px; --sb-ls-h3: -1px; --sb-ls-h4: -1px; --sb-ls-body: 0; --sb-ls-label: 0.2px; /* ========================================= */ /* SEMANTIC — ACTION */ /* ========================================= */ /* Align with theme's primary CTA (theme/dist/output.css .sb-btn-primary uses --color-primary-500 = #0076D1). Hover steps one shade darker. */ --sb-action-primary: var(--sb-color-primary-500); --sb-action-primary-hover: var(--sb-color-primary-600); /* ========================================= */ /* SEMANTIC — TEXT */ /* ========================================= */ --sb-text-default: var(--sb-color-neutral-900); --sb-text-inverse: var(--sb-color-neutral-0); --sb-text-muted: var(--sb-color-neutral-600); --sb-text-disabled: var(--sb-color-neutral-300); /* ========================================= */ /* SEMANTIC — BACKGROUND */ /* ========================================= */ --sb-bg-page: #FAF8F7; --sb-bg-surface: var(--sb-color-neutral-0); --sb-bg-disabled: var(--sb-color-neutral-100); /* ========================================= */ /* SEMANTIC — BORDER */ /* ========================================= */ --sb-border-default: var(--sb-color-neutral-300); --sb-border-focus: var(--sb-action-primary); --sb-border-selected: var(--sb-action-primary); /* ========================================= */ /* SEMANTIC — FEEDBACK */ /* ========================================= */ --sb-feedback-error: var(--sb-color-feedback-red-500); --sb-feedback-success: var(--sb-color-feedback-green-500); --sb-feedback-warning: var(--sb-color-feedback-yellow-500); /* ========================================= */ /* SEMANTIC — LAYOUT */ /* ========================================= */ --sb-layout-section-py: var(--sb-space-16); --sb-layout-section-px: var(--sb-space-16); --sb-layout-section-gap: var(--sb-space-12); --sb-layout-content-gap: var(--sb-space-6); /* ========================================= */ /* SEMANTIC — COMPONENT */ /* ========================================= */ --sb-component-padding-xs: var(--sb-space-2); --sb-component-padding-sm: var(--sb-space-3); --sb-component-padding-md: var(--sb-space-4); --sb-component-padding-lg: var(--sb-space-6); --sb-component-padding-xl: var(--sb-space-8); --sb-gap-sm: var(--sb-space-2); --sb-gap-md: var(--sb-space-4); --sb-gap-lg: var(--sb-space-6); /* ========================================= */ /* SHADOWS (not in Figma Variables — proposed) */ /* ========================================= */ --sb-shadow-sm: 0 1px 2px rgba(38, 39, 42, 0.04), 0 1px 3px rgba(38, 39, 42, 0.06); --sb-shadow-md: 0 2px 4px rgba(38, 39, 42, 0.05), 0 4px 12px rgba(38, 39, 42, 0.08); --sb-shadow-lg: 0 4px 8px rgba(38, 39, 42, 0.06), 0 8px 24px rgba(38, 39, 42, 0.10); --sb-shadow-xl: 0 8px 16px rgba(38, 39, 42, 0.08), 0 16px 48px rgba(38, 39, 42, 0.12); }