/* ===================================================================== RasoiRaj Design System — LAYER 1: TOKENS --------------------------------------------------------------------- The single source of truth for every colour, size, radius, shadow and timing in the application. Nothing else in the codebase may hard-code a hex value, a px radius or a shadow — it references a token here. Palette: "Lightspeed-inspired" — teal-green primary, cool slate neutrals, indigo accent. Light theme is the default and only shipped theme; the dark block at the bottom is wired but intentionally dormant. Contrast (WCAG 2.1) — measured, not estimated. These figures were wrong for the teal ramp (they were carried over from the previous orange brand and claimed 4.94:1 for primary-600), which mattered: the sidebar comment below already relied on the real 3.74:1 number while this block denied it. primary-600 on white .......... 3.74:1 AA for LARGE text + 3:1 UI only white on primary-600 .......... 3.74:1 NOT AA for normal button labels primary-700 on white .......... 5.47:1 AA normal text <- use for links white on primary-700 .......... 5.47:1 AA button labels <- use for fills primary-800 on primary-50 ..... 7.27:1 AAA text on tinted surface ink-600 on surface ............ 4.76:1 AA muted/secondary text ink-800 on sidebar rail ....... 8.76:1 AA+ nav labels (worst grad stop) So: teal-600 is a FILL and an ICON colour; teal-700 is the text colour. ===================================================================== */ :root { /* ---------------------------------------------------------- BRAND ramp */ --rr-primary-50: #F0FDFA; --rr-primary-100: #CCFBF1; --rr-primary-200: #99F6E4; --rr-primary-300: #5EEAD4; --rr-primary-400: #2DD4BF; --rr-primary-500: #14B8A6; --rr-primary-600: #0D9488; /* brand — buttons, active nav, links */ --rr-primary-700: #0F766E; /* hover */ --rr-primary-800: #115E59; /* pressed / text on tinted surfaces */ --rr-primary-900: #134E4A; /* ------------------------------------------------- NEUTRAL (cool slate) */ --rr-ink-950: #0F172A; --rr-ink-900: #1E293B; --rr-ink-800: #334155; --rr-ink-700: #475569; --rr-ink-600: #64748B; --rr-ink-500: #94A3B8; --rr-ink-400: #CBD5E1; --rr-ink-300: #E2E8F0; --rr-ink-200: #EBEEF2; --rr-ink-100: #F1F5F9; --rr-ink-50: #F8FAFC; --rr-white: #FFFFFF; /* ------------------------------------------------------------ ACCENT */ --rr-accent-600: #2563EB; /* indigo/blue — secondary emphasis */ --rr-accent-700: #1D4ED8; --rr-accent-50: #EFF6FF; --rr-accent-200: #BFDBFE; /* ---------------------------------------------------------- SEMANTIC */ --rr-success-600: #15803D; --rr-success-700: #166534; --rr-success-50: #F0FDF4; --rr-success-200: #BBF7D0; --rr-warning-600: #B45309; --rr-warning-700: #92400E; --rr-warning-50: #FFFBEB; --rr-warning-200: #FDE68A; --rr-error-600: #B91C1C; --rr-error-700: #991B1B; --rr-error-50: #FEF2F2; --rr-error-200: #FECACA; --rr-info-600: #0369A1; --rr-info-700: #075985; --rr-info-50: #F0F9FF; --rr-info-200: #BAE6FD; /* --------------------------------------- ROLE ALIASES (use these!) --- Component CSS references the aliases below, never the ramps above. That is what makes a future dark theme a token swap, not a rewrite. */ --rr-bg: var(--rr-ink-50); --rr-bg-sunken: var(--rr-ink-100); --rr-surface: var(--rr-white); --rr-surface-2: var(--rr-ink-50); --rr-surface-3: var(--rr-ink-100); --rr-surface-hover: var(--rr-ink-50); --rr-border: var(--rr-ink-200); --rr-border-strong: var(--rr-ink-300); --rr-border-focus: var(--rr-primary-600); --rr-text: var(--rr-ink-950); /* headings, primary values */ --rr-text-body: var(--rr-ink-800); /* paragraphs, table cells */ --rr-text-muted: var(--rr-ink-600); /* labels, captions, meta */ --rr-text-subtle: var(--rr-ink-500); /* placeholders, disabled */ --rr-text-inverse: var(--rr-white); --rr-text-brand: var(--rr-primary-600); --rr-text-on-tint: var(--rr-primary-800); /* --------------------------------------------------------- SIDEBAR --- A soft teal-tinted rail — the one surface in the app that carries the brand hue as its ground, so the nav reads as its own region instead of dissolving into the white content cards beside it, without going back to a heavy near-black slab. The current page is a SOLID teal pill (white ink), which is unmistakable at a glance across 30 nav rows. */ /* A cool-slate rail, one step DEEPER than the page canvas (ink-50) so it separates from both the canvas and the white cards without a dark slab. Deliberately NEUTRAL, not teal-tinted: this is a dense screen where the teal active pill, status badges and alerts have to pop, and a brand-hued rail competes with them for the same attention. Keeping the rail neutral leaves the solid teal pill as the single most saturated thing in the nav. Flat, not a gradient — separation here comes from the step in lightness plus a crisp border, which stays honest at every scroll position. */ --rr-sidebar-bg: #EAEFF6; /* cool slate rail */ --rr-sidebar-bg-2: #FFFFFF; /* cards sit ON the rail */ --rr-sidebar-border: var(--rr-ink-300); --rr-sidebar-text: var(--rr-ink-800); /* nav labels */ --rr-sidebar-text-strong: var(--rr-ink-950); /* brand + signed-in */ /* ink-700, not -600: on the teal-tinted rail the 600 stop lands at 4.48:1 for 11px uppercase group labels — just under AA. */ --rr-sidebar-text-muted: var(--rr-ink-700); /* group labels, meta */ /* Hover is a NEUTRAL step deeper than the rail, not a teal tint. A mint hover sat one shade away from the teal active pill, so pointing at a row looked almost like having selected it — and it spent the brand hue on a transient state. Teal now means exactly one thing in the nav: you are on this page. */ --rr-sidebar-item-hover: #DCE4F0; /* primary-700, not -600: white on 600 is only 3.74:1, and 14px semibold nav labels are not "large text", so AA needs 4.5:1. 700 gives 5.24:1. */ --rr-sidebar-item-active: var(--rr-primary-700); --rr-sidebar-active-ink: #FFFFFF; /* ink-400, not primary-200: the rest of the app already scrolls on a quiet neutral thumb (base.css), and a bright mint bar was the loudest thing on the rail. ink-300 would match base.css exactly but nearly vanishes against the rail's own tone, so this goes one stop darker. */ --rr-sidebar-scrollbar: var(--rr-ink-400); /* ------------------------------------------------------ CHART palette Ordered for categorical series; every colour clears 3:1 on --rr-surface so a legend swatch is distinguishable without relying on hue alone. */ --rr-chart-1: #0D9488; --rr-chart-2: #2563EB; --rr-chart-3: #B45309; --rr-chart-4: #7E22CE; --rr-chart-5: #BE123C; --rr-chart-6: #15803D; --rr-chart-7: #C2410C; --rr-chart-8: #475569; --rr-chart-grid: var(--rr-ink-200); --rr-chart-axis: var(--rr-ink-500); /* ----------------------------------------------------- TYPOGRAPHY --- */ --rr-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --rr-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --rr-text-2xs: 0.6875rem; /* 11px — micro labels, table eyebrows */ --rr-text-xs: 0.75rem; /* 12px — captions, meta, badges */ --rr-text-sm: 0.8125rem; /* 13px — table cells, secondary body */ --rr-text-base: 0.875rem; /* 14px — default UI text, inputs, buttons */ --rr-text-md: 1rem; /* 16px — lead paragraph, card titles */ --rr-text-lg: 1.125rem; /* 18px — section headings */ --rr-text-xl: 1.25rem; /* 20px — page titles */ --rr-text-2xl: 1.5rem; /* 24px — stat values */ --rr-text-3xl: 1.875rem; /* 30px — hero stat, login headline */ --rr-text-4xl: 2.25rem; /* 36px — marketing/login display */ --rr-weight-normal: 400; --rr-weight-medium: 500; --rr-weight-semibold: 600; --rr-weight-bold: 700; --rr-weight-extra: 800; --rr-leading-none: 1; --rr-leading-tight: 1.2; /* display + stat numbers */ --rr-leading-snug: 1.35; /* headings */ --rr-leading-normal: 1.5; /* UI text */ --rr-leading-relaxed: 1.65; /* paragraphs, help text */ --rr-tracking-tight: -0.02em; /* headings + big numbers */ --rr-tracking-normal: 0; --rr-tracking-wide: 0.04em; --rr-tracking-caps: 0.06em; /* uppercase eyebrows/labels */ /* -------------------------------------------------------- SPACING --- 4px base grid. Every margin, padding and gap uses one of these. */ --rr-space-0: 0; --rr-space-px: 1px; --rr-space-0-5: 0.125rem; /* 2px */ --rr-space-1: 0.25rem; /* 4px */ --rr-space-1-5: 0.375rem; /* 6px */ --rr-space-2: 0.5rem; /* 8px */ --rr-space-2-5: 0.625rem; /* 10px */ --rr-space-3: 0.75rem; /* 12px */ --rr-space-3-5: 0.875rem; /* 14px */ --rr-space-4: 1rem; /* 16px */ --rr-space-5: 1.25rem; /* 20px */ --rr-space-6: 1.5rem; /* 24px */ --rr-space-7: 1.75rem; /* 28px */ --rr-space-8: 2rem; /* 32px */ --rr-space-10: 2.5rem; /* 40px */ --rr-space-12: 3rem; /* 48px */ --rr-space-16: 4rem; /* 64px */ --rr-space-20: 5rem; /* 80px */ /* --------------------------------------------------------- RADIUS --- */ --rr-radius-xs: 4px; --rr-radius-sm: 6px; /* chips, small inputs */ --rr-radius-md: 8px; /* buttons, inputs, badges-square */ --rr-radius-lg: 10px; /* cards, dropdowns */ --rr-radius-xl: 14px; /* modals, panels */ --rr-radius-2xl: 18px; /* hero/login card */ --rr-radius-pill: 999px; /* -------------------------------------------------------- SHADOWS --- Tinted rather than pure black so shadows read as depth, not grey haze. */ --rr-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05); --rr-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04); --rr-shadow-md: 0 4px 12px -2px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.05); --rr-shadow-lg: 0 12px 24px -6px rgba(28, 25, 23, 0.12), 0 4px 8px -4px rgba(28, 25, 23, 0.06); --rr-shadow-xl: 0 24px 48px -12px rgba(28, 25, 23, 0.18), 0 8px 16px -8px rgba(28, 25, 23, 0.08); --rr-shadow-inner: inset 0 1px 2px rgba(28, 25, 23, 0.06); --rr-ring: 0 0 0 3px rgba(13, 148, 136, 0.18); /* focus, brand */ --rr-ring-error: 0 0 0 3px rgba(185, 28, 28, 0.16); --rr-ring-accent: 0 0 0 3px rgba(37, 99, 235, 0.16); /* --------------------------------------------------------- LAYOUT --- */ --rr-sidebar-w: 264px; --rr-sidebar-w-collapsed: 72px; --rr-header-h: 60px; --rr-content-max: 1440px; --rr-content-pad: var(--rr-space-6); /* -------------------------------------------------------- Z-INDEX --- */ --rr-z-base: 1; --rr-z-sticky: 100; --rr-z-dropdown: 200; --rr-z-sidebar: 300; --rr-z-overlay: 400; --rr-z-modal: 500; --rr-z-toast: 600; --rr-z-tooltip: 700; /* --------------------------------------------------------- MOTION --- */ --rr-ease: cubic-bezier(0.4, 0, 0.2, 1); --rr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rr-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --rr-dur-fast: 120ms; --rr-dur-base: 180ms; --rr-dur-slow: 260ms; /* ---------------------------------------------------------- ICONS --- One icon system, one stroke width, three sizes. See partials/icons.php */ --rr-icon-sm: 14px; --rr-icon-md: 16px; --rr-icon-lg: 20px; --rr-icon-xl: 24px; --rr-icon-stroke: 1.75; } /* --------------------------------------------------------------------- Dark theme — wired, dormant. Adding dark mode later means filling this block in and flipping an attribute on ; no component CSS changes. --------------------------------------------------------------------- */ :root[data-rr-theme="dark"] { --rr-bg: #17140F; --rr-bg-sunken: #100E0B; --rr-surface: #201C18; --rr-surface-2: #262119; --rr-surface-3: #2E2822; --rr-surface-hover: #2A241E; --rr-border: #362F27; --rr-border-strong: #47403A; --rr-text: #F5F3F0; --rr-text-body: #DDD8D1; --rr-text-muted: #A8A29E; --rr-text-subtle: #78716C; --rr-text-brand: #5EEAD4; --rr-text-on-tint: #99F6E4; --rr-chart-grid: #362F27; --rr-chart-axis: #78716C; } @media (prefers-reduced-motion: reduce) { :root { --rr-dur-fast: 0ms; --rr-dur-base: 0ms; --rr-dur-slow: 0ms; } }