/* Skillfull design tokens. * * One source of truth for color, radius, shadow, space, and type. Every other * stylesheet in the product reads from these custom properties — don't bake * raw hex codes or pixel values into component styles, because then the tokens * are no longer the truth and the next palette tweak becomes a 12-file PR. * * Naming pattern: --sf--. Categories: * color — solid hex or rgba * radius — border-radius scale * shadow — box-shadow scale * space — margin/padding scale, 4px base * font — type scale + weights * ease — animation easing * z — z-index scale * * The scale steps are intentionally small (4-7 values per axis). If a fresh * value seems necessary, prefer adjusting the existing scale globally over * inventing a one-off — the consistency is the point. */ :root { /* Primary brand — confident blue. One color, used everywhere. */ --sf-color-primary: #2563eb; --sf-color-primary-dark: #1d4ed8; --sf-color-primary-soft: rgba(37, 99, 235, 0.10); --sf-color-primary-border: rgba(37, 99, 235, 0.30); --sf-color-primary-ring: rgba(37, 99, 235, 0.18); /* Tenant accent. --sf-brand is emitted per tenant by _declarations_head; * components read --sf-accent (never --sf-brand directly) so everything * degrades to Skillfull blue when no tenant colour is set. */ --sf-accent: var(--sf-brand, var(--sf-color-primary)); --sf-accent-soft: color-mix(in srgb, var(--sf-accent) 10%, transparent); --sf-accent-ring: color-mix(in srgb, var(--sf-accent) 18%, transparent); --sf-accent-ink: color-mix(in srgb, var(--sf-accent) 72%, var(--sf-color-text)); /* Surfaces. Canvas = page background; soft = pale wash; surface = cards. */ --sf-color-canvas: #f8fafc; --sf-color-canvas-soft: #f1f5f9; --sf-color-surface: #ffffff; --sf-color-surface-hover: #fafbfd; --sf-color-surface-strong: #fefefe; /* Text. ON-surface values, used over light backgrounds. * text-secondary is the floor for text under 14px — the faint/muted * shades fail WCAG AA at small sizes. */ --sf-color-text: #0f172a; --sf-color-text-secondary: #475569; --sf-color-text-muted: rgba(15, 23, 42, 0.65); --sf-color-text-faint: rgba(15, 23, 42, 0.45); --sf-color-text-disabled: rgba(15, 23, 42, 0.30); --sf-color-text-inverse: #ffffff; /* Borders and hairlines. */ --sf-color-border: rgba(15, 23, 42, 0.08); --sf-color-border-strong: rgba(15, 23, 42, 0.14); --sf-color-border-focus: rgba(37, 99, 235, 0.55); /* Status. The -ink shades are for text on the matching -soft tint. */ --sf-color-danger: #dc2626; --sf-color-danger-soft: rgba(220, 38, 38, 0.10); --sf-color-danger-ink: #991b1b; --sf-color-warning: #f59e0b; --sf-color-warning-soft: rgba(245, 158, 11, 0.12); --sf-color-warning-ink: #92400e; --sf-color-success: #16a34a; --sf-color-success-soft: rgba(22, 163, 74, 0.10); --sf-color-success-ink: #166534; --sf-color-info: #0891b2; --sf-color-info-soft: rgba(8, 145, 178, 0.10); --sf-color-info-ink: #155e75; /* Purple. Reserved for credit / compliance-cycle signals only. */ --sf-color-purple: #6d28d9; --sf-color-purple-soft: #efe7fd; --sf-color-interactive-brand: #74d94e; --sf-color-interactive-accent: #ffc20e; --sf-color-interactive-ink: #58595b; --sf-color-interactive-grey: #a6a8ab; --sf-color-interactive-grey-mid: #bbbdbf; --sf-color-interactive-grey-light: #d0d2d3; --sf-color-interactive-grey-dark: #6d6e70; --sf-color-interactive-border-soft: rgba(65, 64, 64, 0.2901960784); /* Radius. Match the size of the surface — small inputs get sm, cards lg. */ --sf-radius-xs: 6px; --sf-radius-sm: 10px; --sf-radius-md: 14px; --sf-radius-lg: 20px; --sf-radius-xl: 28px; --sf-radius-pill: 9999px; /* Elevation. Use sparingly — too many large shadows on one screen makes * the page feel chaotic. Cards default to md, hovering elements lg, * sticky bars sm. */ --sf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --sf-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06); --sf-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08); --sf-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12); --sf-shadow-xl: 0 30px 60px rgba(15, 23, 42, 0.18); --sf-shadow-focus: 0 0 0 4px var(--sf-color-primary-ring); /* Spacing. 4px base. Use these instead of arbitrary px values. */ --sf-space-1: 4px; --sf-space-2: 8px; --sf-space-3: 12px; --sf-space-4: 16px; --sf-space-5: 20px; --sf-space-6: 24px; --sf-space-7: 32px; --sf-space-8: 40px; --sf-space-9: 56px; --sf-space-10: 80px; /* Type. Sized for desktop primarily; mobile clamps live on individual * components when needed. */ --sf-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --sf-font-xs: 11.5px; --sf-font-sm: 13px; --sf-font-base: 14.5px; --sf-font-md: 15.5px; --sf-font-lg: 18px; --sf-font-xl: 22px; --sf-font-2xl: 28px; --sf-font-3xl: 36px; --sf-font-display: 48px; --sf-weight-normal: 400; --sf-weight-medium: 500; --sf-weight-semibold: 600; --sf-weight-bold: 700; --sf-weight-black: 900; --sf-leading-tight: 1.15; --sf-leading-snug: 1.30; --sf-leading-normal: 1.45; --sf-leading-relaxed: 1.60; /* Easing. Use these in transitions, not hand-rolled cubic-beziers. */ --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sf-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --sf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --sf-dur-fast: 120ms; --sf-dur-base: 180ms; --sf-dur-slow: 260ms; /* Z-layers. Keep this list short — if you need a new layer, audit * whether an existing one fits first. */ --sf-z-base: 1; --sf-z-sticky: 100; --sf-z-dropdown: 200; --sf-z-overlay: 900; --sf-z-modal: 1000; --sf-z-toast: 1100; } /* Dark theme. sf-theme.js sets data-bs-theme from localStorage or the OS * preference; every token consumer inherits these values automatically. */ [data-bs-theme="dark"] { --sf-color-primary: #60a5fa; --sf-color-primary-dark: #3b82f6; --sf-color-primary-soft: rgba(96, 165, 250, 0.15); --sf-color-primary-border: rgba(96, 165, 250, 0.35); --sf-color-primary-ring: rgba(96, 165, 250, 0.20); --sf-accent: var(--sf-brand-dark, var(--sf-color-primary)); --sf-accent-ink: color-mix(in srgb, var(--sf-accent) 72%, #f1f5f9); --sf-color-canvas: #020617; --sf-color-canvas-soft: rgba(255, 255, 255, 0.04); --sf-color-surface: #0f172a; --sf-color-surface-hover: #16203a; --sf-color-surface-strong: #111a2e; --sf-color-text: #f1f5f9; --sf-color-text-secondary: #a8b5c9; --sf-color-text-muted: #94a3b8; --sf-color-text-faint: #64748b; --sf-color-text-disabled: rgba(241, 245, 249, 0.30); --sf-color-text-inverse: #0f172a; --sf-color-border: rgba(255, 255, 255, 0.08); --sf-color-border-strong: rgba(255, 255, 255, 0.14); --sf-color-border-focus: rgba(96, 165, 250, 0.55); --sf-color-danger: #f87171; --sf-color-danger-soft: rgba(248, 113, 113, 0.16); --sf-color-danger-ink: #fecaca; --sf-color-warning: #fbbf24; --sf-color-warning-soft: rgba(245, 158, 11, 0.18); --sf-color-warning-ink: #fed7aa; --sf-color-success: #4ade80; --sf-color-success-soft: rgba(34, 197, 94, 0.16); --sf-color-success-ink: #bbf7d0; --sf-color-info: #22d3ee; --sf-color-info-soft: rgba(8, 145, 178, 0.16); --sf-color-info-ink: #a5f3fc; --sf-color-purple: #a78bfa; --sf-color-purple-soft: rgba(109, 40, 217, 0.22); }