/* ===================================================================== SwadSathi 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. ===================================================================== */ /* --------------------------------------------------------------------- SELF-HOSTED WEBFONTS — Poppins (body/UI) + Rubik (headings) --------------------------------------------------------------------- The owner supplied the actual TTF files (assets/fonts/) instead of a Google Fonts CDN link, specifically so the app keeps working on a restaurant's restricted/offline network — fonts.googleapis.com has failed to load there before. partials/shell.php's rr_font_links() used to fetch these two families from Google Fonts; it now just returns empty markup because these @font-face rules (shipped in this file, which every screen already loads) are the only source of truth. One weight per file, `font-display: swap` so text paints in the fallback face (see --rr-font-sans/--rr-font-display below) while the real file loads instead of staying invisible. */ @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :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); /* border-strong softened one step (ink-300 -> ink-200) alongside the text tokens above — a crisp slate-300 line around every card read as another part of the "heavy" complaint once the text itself got softer and the borders were the next-darkest thing on the page. --rr-border stays put: ink-100 would start disappearing against --rr-surface-2 (also ink-100), the tint several card bodies already sit on. */ --rr-border: var(--rr-ink-200); --rr-border-strong: var(--rr-ink-200); --rr-border-focus: var(--rr-primary-600); /* Softened one step each at the owner's request ("halka pastel/soft colors" — pure near-black text read as "heavy" across the admin pages). ink-900/700/500/400 in place of 950/800/600/500: still comfortably AA (ink-900 on white clears the same bar ink-950 did, with less contrast punch; ink-700 for body text is the SAME stop the sidebar's muted label token already uses, so nothing here is a new, untested ramp value). */ --rr-text: var(--rr-ink-900); /* headings, primary values */ --rr-text-body: var(--rr-ink-700); /* paragraphs, table cells */ --rr-text-muted: var(--rr-ink-500); /* labels, captions, meta */ --rr-text-subtle: var(--rr-ink-400); /* 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-700); /* nav labels */ --rr-sidebar-text-strong: var(--rr-ink-900); /* 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 --- */ /* Poppins (body/UI) + Rubik (headings) — the owner's request, replacing Inter/Plus Jakarta Sans. Both keep the SAME system-font fallback chain as before (so a blocked/failed font load still degrades to a readable native face instead of tofu) — only the named webfont changed, not the fallback strategy. The @font-face rules above (this file) are the only source for these two families now — self-hosted from assets/fonts/, not Google Fonts — so there is nothing external left to keep in sync; just make sure a new weight used here also has a matching @font-face block and TTF file. */ --rr-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --rr-font-display: "Rubik", "Poppins", -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; } /* --------------------------------------------------------------------- CUSTOM THEMES — convention (foundation for owner-configurable themes) --------------------------------------------------------------------- The dark-theme block above is the pattern every custom theme follows: a CSS block scoped under `:root[data-rr-theme=""]` that redefines a SUBSET of the role-alias custom properties from the ROLE ALIASES section near the top of this file (--rr-bg, --rr-surface*, --rr-border*, --rr-text*, --rr-primary-*, --rr-radius-*, --rr-sidebar-*, etc.) — never the raw ramp variables directly, and never anything component CSS doesn't already reference by alias. Because every component in components.css is written against the aliases (see the ROLE ALIASES comment above: "component CSS must reference aliases, never raw ramps"), a theme block does not require touching a single component file — the whole app re-skins itself the moment the attribute changes. To add a new theme: 1. Copy the example block below (`data-rr-theme="ocean"`), rename the attribute value, and pick new values for whichever aliases you want to change (you don't have to override every alias — anything left out just falls through to the default `:root` values). 2. Wire it up as an `app_setting('ui_theme', 'default')` value (see api/admin_settings.php's `zomato_enabled`/`swiggy_enabled` keys for the read/write pattern this follows) and set `data-rr-theme=""` on the `` tag in partials/shell.php's `rr_shell_start()` — the same place the dark theme's attribute would be flipped. 3. Expose it as a `