/* ============================================================================= THE UMRAH STORE — DESIGN TOKENS ============================================================================= The single source of truth for colour, type, space, radius, shadow and motion. Nothing here draws a component; everything that draws a component reads from here. --------------------------------------------------------------------------- THE PALETTE, AND WHY IT IS THIS ONE --------------------------------------------------------------------------- The previous scheme was emerald green with gold, applied at every level until the interface had no hierarchy left: a save button, a revenue figure, a nav item and a success badge were all the same green, so nothing could be emphasised because everything already was. This palette is three families with three different jobs. INK a warm near-black for structure - sidebar, headings, primary text. Warm rather than blue-black so it sits with the neutrals instead of fighting them. STONE warm greys from parchment to slate. These carry almost the whole interface. A CRM is mostly surfaces, rules and text, and getting the neutrals right is what makes software look considered. HARBOUR a deep, slightly desaturated blue. This is the ACTION colour: buttons, links, focus rings, active nav. Blue because this product is as much finance and operations as travel, and blue reads as trustworthy and clickable without shouting. BRASS a muted antique gold. The BRAND colour, used sparingly: the public site's accents, the active rail in the sidebar, a highlighted figure. It is what makes this an Umrah company's software rather than a generic dashboard - at roughly five percent of any screen. The moment it is everywhere it stops meaning anything, which is exactly what went wrong before. Green survives only where it means "good" - a success badge, a positive figure. It is a semantic colour now, not the theme. ============================================================================= */ :root { /* ---- INK: structure and text -------------------------------------- */ --ink-950: #100E0C; --ink-900: #17140F; --ink-850: #1E1A15; --ink-800: #26211B; --ink-700: #332C24; --ink-600: #4A4136; /* ---- STONE: the neutral spine ------------------------------------- */ --stone-25: #FCFBF9; --stone-50: #F8F6F2; --stone-100: #F1EEE8; --stone-200: #E4DFD6; --stone-300: #D2CBBE; --stone-400: #ABA294; --stone-500: #857C6E; --stone-600: #655D51; --stone-700: #4C453B; --stone-800: #332E27; /* ---- HARBOUR: the action colour ----------------------------------- */ --harbour-50: #EEF3F8; --harbour-100: #D8E4F0; --harbour-200: #B0C6DF; --harbour-300: #7C9CC2; --harbour-400: #4E74A0; --harbour-500: #2F5680; --harbour-600: #234668; --harbour-700: #1B3750; --harbour-800: #142A3D; /* ---- BRASS: the brand accent, used sparingly ---------------------- */ --brass-50: #FBF6EC; --brass-100: #F4E9D3; --brass-200: #E7D2A9; --brass-300: #D6B173; --brass-400: #C29348; --brass-500: #A87834; --brass-600: #8A6029; --brass-700: #6B4A20; /* ---- SEMANTIC: meaning, not decoration ---------------------------- */ --positive-50: #EAF5EF; --positive-500: #1E7A55; --positive-600: #17603F; --caution-50: #FDF4E7; --caution-500: #B4720E; --caution-600: #8F5A08; --critical-50: #FCEDEC; --critical-500: #B5372C; --critical-600: #922B22; --info-50: #EDF2FB; --info-500: #2A5CB8; --info-600: #204A96; /* ===================================================================== SEMANTIC ROLES — what components actually read ===================================================================== */ --canvas: var(--stone-50); --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: var(--stone-100); --surface-inverse: var(--ink-900); --border: var(--stone-200); --border-strong: var(--stone-300); --border-subtle: var(--stone-100); --text-primary: var(--ink-850); --text-secondary: var(--stone-600); --text-muted: var(--stone-500); --text-inverse: var(--stone-50); --text-on-accent: #FFFFFF; --action: var(--harbour-600); --action-hover: var(--harbour-700); --action-soft: var(--harbour-50); --action-border: var(--harbour-200); --accent: var(--brass-500); --accent-hover: var(--brass-600); --accent-soft: var(--brass-50); --focus-ring: rgba(78, 116, 160, .55); /* Navigation chrome keeps its dark treatment in every theme. It is the product's spine; flipping it with the theme makes the whole application feel like it moved. */ --nav-bg: var(--ink-900); --nav-bg-raised: var(--ink-800); --nav-text: #C9C2B6; --nav-text-muted: #7E7669; --nav-text-active: #FFFFFF; --nav-active-bg: rgba(255, 255, 255, .07); --nav-rail: var(--brass-400); --nav-border: rgba(255, 255, 255, .07); /* ===================================================================== TYPOGRAPHY ===================================================================== System stacks, deliberately. A webfont would be render-blocking on every page of a tool people use all day, and the previous Google Fonts link was blocked by the CSP anyway - it produced console errors and no font. Modern OS UI faces are excellent and cost nothing. */ --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Roboto, system-ui, sans-serif; --font-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif; --font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* A tight scale, so a dense table and a page title belong to one system. */ --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.375rem; --fs-5xl: 3rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.55; --lh-relaxed: 1.7; /* ---- SPACE: a 4px grid ------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ---- RADIUS ------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-pill: 999px; /* ---- ELEVATION ---------------------------------------------------- Restrained. Most surfaces sit on a border, not a shadow; shadow is for things that genuinely float. Drowning a dashboard in soft shadows is what makes admin templates look cheap. */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(23, 20, 15, .05); --shadow-sm: 0 1px 3px rgba(23, 20, 15, .07), 0 1px 2px rgba(23, 20, 15, .04); --shadow-md: 0 4px 12px rgba(23, 20, 15, .08), 0 1px 3px rgba(23, 20, 15, .05); --shadow-lg: 0 12px 28px rgba(23, 20, 15, .12), 0 2px 6px rgba(23, 20, 15, .06); --shadow-xl: 0 24px 56px rgba(23, 20, 15, .16); /* ---- MOTION ------------------------------------------------------- */ --ease: cubic-bezier(.32, .72, 0, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 300ms; /* ---- LAYOUT ------------------------------------------------------- */ --sidebar-w: 268px; --sidebar-w-collapsed: 76px; --header-h: 60px; --content-max: 1560px; } /* ============================================================================= DARK — authored, not inverted ============================================================================= */ :root[data-theme="dark"] { --canvas: #14120F; --surface: #1C1916; --surface-raised: #23201B; --surface-sunken: #17140F; --surface-inverse: var(--stone-50); --border: #322C24; --border-strong: #443C31; --border-subtle: #262119; --text-primary: #EDE9E1; --text-secondary: #B3AA9B; --text-muted: #8C8375; --text-inverse: var(--ink-900); --action: var(--harbour-300); --action-hover: var(--harbour-200); --action-soft: rgba(124, 156, 194, .12); --action-border: rgba(124, 156, 194, .3); --accent: var(--brass-300); --accent-hover: var(--brass-200); --accent-soft: rgba(214, 177, 115, .1); --nav-bg: #100E0C; --nav-bg-raised: #1A1713; --positive-50: rgba(30, 122, 85, .16); --caution-50: rgba(180, 114, 14, .16); --critical-50: rgba(181, 55, 44, .16); --info-50: rgba(42, 92, 184, .16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .36); --shadow-md: 0 4px 12px rgba(0, 0, 0, .42); --shadow-lg: 0 12px 28px rgba(0, 0, 0, .5); --shadow-xl: 0 24px 56px rgba(0, 0, 0, .6); } /* Follow the operating system when the user has expressed no preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --canvas: #14120F; --surface: #1C1916; --surface-raised: #23201B; --surface-sunken: #17140F; --surface-inverse: var(--stone-50); --border: #322C24; --border-strong: #443C31; --border-subtle: #262119; --text-primary: #EDE9E1; --text-secondary: #B3AA9B; --text-muted: #8C8375; --text-inverse: var(--ink-900); --action: var(--harbour-300); --action-hover: var(--harbour-200); --action-soft: rgba(124, 156, 194, .12); --action-border: rgba(124, 156, 194, .3); --accent: var(--brass-300); --accent-hover: var(--brass-200); --accent-soft: rgba(214, 177, 115, .1); --nav-bg: #100E0C; --nav-bg-raised: #1A1713; --positive-50: rgba(30, 122, 85, .16); --caution-50: rgba(180, 114, 14, .16); --critical-50: rgba(181, 55, 44, .16); --info-50: rgba(42, 92, 184, .16); } } /* ============================================================================= FURTHER THEMES — real variants, not recolours ============================================================================= Each changes only tokens, so every component follows without knowing they exist. */ /* Cooler and more corporate. */ :root[data-theme="harbour"] { --canvas: #F4F6F8; --surface: #FFFFFF; --surface-sunken: #EAEEF3; --border: #DCE3EA; --border-strong: #C6D0DA; --border-subtle: #EDF1F5; --text-primary: #16202B; --text-secondary: #4A5B6C; --text-muted: #74838F; --nav-bg: #101E2C; --nav-bg-raised: #17293B; --nav-rail: var(--harbour-300); } /* Warmer, closer to the public site's character. */ :root[data-theme="sand"] { --canvas: #F7F2E9; --surface: #FFFDF9; --surface-sunken: #F0E9DB; --border: #E3D9C6; --border-strong: #D0C3AA; --border-subtle: #EFE8DA; --nav-bg: #23201B; --nav-bg-raised: #2E2A23; --nav-rail: var(--brass-400); } /* ============================================================================= ACCESSIBILITY ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= LEGACY ALIASES ============================================================================= The old palette's names are referenced by roughly a thousand declarations across app.css, public-site.css and several module files. Repointing them here moves the whole product to the new palette in one step, with no risk of a half-migrated screen, and they can be retired file by file afterwards. Nothing new should use them. */ :root { --brand-green: var(--action); --brand-green-dark: var(--harbour-800); --brand-dark: var(--ink-900); --brand-gold: var(--accent); --brand-gold-soft: var(--accent-soft); --brand-surface: var(--surface); --brand-surface-2: var(--surface-sunken); --brand-border: var(--border); --border-color: var(--border); --umrah-green: var(--action); --umrah-gold: var(--accent); --umrah-dark: var(--ink-900); }