/* ============================================================ * WR Intelligent — Design Tokens (Phase 1, Light Mode) * ============================================================ * * CSS custom properties only. No selectors beyond :root, no styles. * * Source: docs/07-frontend-and-design.md §35. * Note: doc §35 specifies a dark-theme default. Phase 1 ships LIGHT * MODE per current product decision; dark-mode tokens live in a * placeholder block at the bottom of this file (Phase 2 work). * * Naming convention (matches user spec): * --color-* colors (brand, semantic, neutrals) * --font-* typography (family, size, weight, line-height) * --space-* spacing scale (4px base, rem units) * --radius-* border radius * --border-* border widths * --shadow-* elevations * --z-* z-index layering * --duration-* animation/transition durations * --easing-* animation easing curves * --breakpoint-* responsive breakpoints (reference only — see note) * * Money-like values (text, spacing) use rem so users can scale via * browser settings. Pixel-like values (borders, shadows, breakpoints) * use px since they should be device-pixel-stable. * ============================================================ */ :root { /* ============================================================ * COLOR — Brand: Primary (Deep Blue) * ============================================================ * Conveys trust, stability, and professionalism — the dominant * feel for a Malaysian SME business OS. Used for primary CTAs, * active states, focus rings, and links. * * Default brand color: --color-primary-600 (#2563EB). * Contrast on white: 5.17:1 — passes WCAG AA for body text. * ============================================================ */ --color-primary-50: #EFF6FF; --color-primary-100: #DBEAFE; --color-primary-200: #BFDBFE; --color-primary-300: #93C5FD; --color-primary-400: #60A5FA; --color-primary-500: #3B82F6; --color-primary-600: #2563EB; /* default brand */ --color-primary-700: #1D4ED8; --color-primary-800: #1E40AF; --color-primary-900: #1E3A8A; /* ============================================================ * COLOR — Brand: Secondary (Warm Amber) * ============================================================ * Energy + action. Used sparingly for highlights, premium * feature badges, secondary CTAs, and warm accents. * * Accessibility note: --color-secondary-600 fails WCAG AA * for white-text-on-filled buttons (3.45:1). For accessible * buttons use --color-secondary-700 (4.65:1, passes AA). * ============================================================ */ --color-secondary-50: #FFFBEB; --color-secondary-100: #FEF3C7; --color-secondary-200: #FDE68A; --color-secondary-300: #FCD34D; --color-secondary-400: #FBBF24; --color-secondary-500: #F59E0B; --color-secondary-600: #D97706; /* default for borders/icons (not accessible button bg) */ --color-secondary-700: #B45309; /* use as button bg with white text (passes AA) */ --color-secondary-800: #92400E; --color-secondary-900: #78350F; /* ============================================================ * COLOR — Semantic * ============================================================ * Each role has 50/500/600 minimum: * --*-50 for tinted backgrounds (e.g. alert banner bg) * --*-500 for icons / borders * --*-600 for filled buttons with white text (passes AA) * ============================================================ */ --color-success-50: #ECFDF5; --color-success-100: #D1FAE5; --color-success-500: #10B981; --color-success-600: #059669; --color-success-700: #047857; --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-500: #F59E0B; --color-warning-600: #D97706; --color-warning-700: #B45309; --color-danger-50: #FEF2F2; --color-danger-100: #FEE2E2; --color-danger-500: #EF4444; --color-danger-600: #DC2626; --color-danger-700: #B91C1C; --color-info-50: #EFF6FF; --color-info-100: #DBEAFE; --color-info-500: #3B82F6; --color-info-600: #2563EB; /* same hue as primary — info uses primary palette */ --color-info-700: #1D4ED8; /* ============================================================ * COLOR — Neutral: Backgrounds * ============================================================ */ --color-bg-primary: #FFFFFF; /* main app background */ --color-bg-secondary: #F9FAFB; /* sidebar, page sections */ --color-bg-elevated: #FFFFFF; /* cards, modals — pair with shadow */ --color-bg-hover: #F3F4F6; /* hover state on light surfaces */ --color-bg-active: #E5E7EB; /* active/pressed state */ --color-bg-disabled: #F3F4F6; --color-bg-overlay: rgba(17, 24, 39, 0.5); /* modal backdrop */ /* ============================================================ * COLOR — Neutral: Borders * ============================================================ */ --color-border-subtle: #F3F4F6; --color-border-default: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-focus: var(--color-primary-500); /* ============================================================ * COLOR — Neutral: Text * ============================================================ * Contrast ratios on white background: * --color-text-primary 16.4:1 (AAA) * --color-text-secondary 7.6:1 (AAA) * --color-text-muted 2.8:1 (placeholder/meta only — fails AA) * --color-text-inverse — (use only on dark bg) * ============================================================ */ --color-text-primary: #111827; --color-text-secondary: #4B5563; --color-text-muted: #9CA3AF; --color-text-disabled: #D1D5DB; --color-text-inverse: #FFFFFF; --color-text-link: var(--color-primary-600); --color-text-link-hover:var(--color-primary-700); /* ============================================================ * TYPOGRAPHY — Font families * ============================================================ * Inter is the primary UI font (free, open-source, optimised for * screen rendering). System fallbacks if Inter not loaded. * ============================================================ */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; /* ============================================================ * TYPOGRAPHY — Font size scale (rem-based, 16px root) * ============================================================ */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ /* ============================================================ * TYPOGRAPHY — Font weights * ============================================================ */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ============================================================ * TYPOGRAPHY — Line heights * ============================================================ */ --line-height-tight: 1.2; /* headings */ --line-height-snug: 1.35; /* short labels */ --line-height-base: 1.5; /* body text */ --line-height-loose: 1.75; /* long-form content */ /* ============================================================ * TYPOGRAPHY — Letter spacing * ============================================================ */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* small caps, button labels */ /* ============================================================ * SPACING — 4px base scale (rem units) * ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ============================================================ * BORDER — Radius * ============================================================ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* pills, circular avatars */ /* ============================================================ * BORDER — Widths * ============================================================ */ --border-width-thin: 1px; --border-width-base: 2px; --border-width-thick: 3px; /* ============================================================ * SHADOW — Elevations (light mode — subtle) * ============================================================ * Light mode shadows are softer than dark mode. Use sparingly: * too many shadows on a white background make UI look noisy. * ============================================================ */ --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05); --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 4px 6px rgba(17, 24, 39, 0.07), 0 2px 4px rgba(17, 24, 39, 0.04); --shadow-lg: 0 10px 15px rgba(17, 24, 39, 0.10), 0 4px 6px rgba(17, 24, 39, 0.05); --shadow-xl: 0 20px 25px rgba(17, 24, 39, 0.10), 0 10px 10px rgba(17, 24, 39, 0.04); --shadow-2xl: 0 25px 50px rgba(17, 24, 39, 0.20); --shadow-inner: inset 0 2px 4px rgba(17, 24, 39, 0.06); --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35); /* primary focus ring */ /* ============================================================ * Z-INDEX — Layering scale * ============================================================ */ --z-base: 0; --z-dropdown: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-popover: 1500; --z-tooltip: 2000; --z-toast: 10000; /* ============================================================ * TRANSITION — Durations + easing * ============================================================ */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* default for most UI */ --easing-decelerate: cubic-bezier(0.0, 0, 0.2, 1); /* enter animations */ --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* exit animations */ --easing-linear: linear; /* ============================================================ * BREAKPOINTS — Reference values * ============================================================ * CSS custom properties CANNOT be used inside @media queries — * the values below are for JavaScript reference (e.g. matchMedia) * and human documentation. In CSS files, hard-code the literal: * * @media (min-width: 768px) { ... } // matches --breakpoint-md * ============================================================ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ============================================================ * Phase 2: Dark mode tokens (placeholder — DO NOT IMPLEMENT) * ============================================================ * * When dark mode lands in Phase 2, override only the tokens that * actually change between modes. Brand and semantic palettes * typically stay the same; backgrounds, text, borders, and shadow * opacity flip. * * Two activation strategies (pick one in Phase 2): * * A) System preference: * @media (prefers-color-scheme: dark) { * :root { ... overrides ... } * } * * B) User toggle (data-attribute on or ): * [data-theme="dark"] { ... overrides ... } * * Strategy B allows in-app toggle independent of OS setting. * Recommended for Phase 2. * * Reference values (for Phase 2 design — do not enable now): * --color-bg-primary: #0B0E14; * --color-bg-secondary: #11151E; * --color-bg-elevated: #1A1F2C; * --color-border-default:#2A2F3D; * --color-text-primary: #E5E7EB; * --color-text-secondary:#9CA3AF; * --color-text-muted: #6B7280; * --shadow-* (heavier opacity to counter dark bg) * ============================================================ */