/* ========================================================================= Geneina Design System — CSS Variable Tokens Mirrors libs/shared-ui/src/styles/themeTokens.ts from the geneina monorepo. Import this stylesheet and apply .theme-light / .theme-dark on or any scoped container. ========================================================================= */ /* --- Brand fonts ---------------------------------------------------------- */ @font-face { font-family: 'Nexa'; src: url('fonts/NexaLight.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('fonts/NexaRegular.otf') format('opentype'), url('fonts/Nexa_Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('fonts/Nexa_Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('fonts/Nexa_Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'); font-weight: 100 1000; font-style: italic; font-display: swap; } @font-face { font-family: 'Noto Sans Arabic'; src: url('fonts/NotoSansArabic-VariableFont_wdth_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Prelude'; src: url('fonts/Prelude-Regular.otf') format('opentype'), url('fonts/Prelude-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Prelude'; src: url('fonts/Prelude-Italic.otf') format('opentype'), url('fonts/Prelude-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } /* --- Light theme (default) ------------------------------------------------ */ :root, .theme-light { /* Surfaces */ --bg-canvas: #F3F6F6; --bg-page: #F3F6F6; --bg-surface: #FFFFFF; --bg-surface-raised: #F9FAF7; --bg-surface-variant: #F9FAF7; --bg-surface-hover: #E6F9E6; --bg-surface-active: #DDEFD8; --overlay-bg: rgba(255, 255, 255, 0.95); --tooltip-bg: #FFFFFF; /* Text */ --text-primary: #262626; --text-secondary: #808080; --text-tertiary: #4D4D4D; --text-disabled: #9AA09E; --text-heading: #1F220C; --text-on-primary: #FFFFFF; /* Borders */ --border-subtle: #E0E0E0; --border-default: #ECECEC; --border-light: #E0E0E0; --border-strong: #BDBDBD; /* Brand (Geneina Green) */ --brand-primary: #00C400; --brand-hover: #00AD00; --brand-active: #009200; --brand-on-primary: #031A05; /* Supporting brand (Deep Teal / "Dark Cyan") — from identity artwork */ --brand-deep-teal: #0B3A44; --brand-muted-sage: #E6EACB; --brand-sky: #B9DCE2; /* State */ --state-success: #1EB05D; --state-success-bg: #E9F9E7; --state-warning: #E38A00; --state-warning-bg: #FFF3CD; --state-error: #CD3131; --state-error-bg: #FFEBEE; --state-info: #1976D2; --state-info-bg: #E3F2FD; --icon-color: #003D48; --shadow-card: 0px 1px 4px rgba(0, 0, 0, 0.05); --shadow-header: 0px 1px 3px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.04); --shadow-elevated: 0 12px 32px -8px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.06); /* Radii (from MUI shape.borderRadius: 12 + component overrides) */ --radius-xs: 4px; --radius-sm: 8px; /* buttons */ --radius-md: 12px; /* cards, menus */ --radius-lg: 16px; /* dialogs */ --radius-pill: 999px; /* Spacing (MUI-style 8px grid) */ --space-0: 0; --space-0-5: 4px; --space-1: 8px; --space-1-5: 12px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; /* Type — brand fonts */ --font-display: 'Nexa', 'DM Sans', system-ui, sans-serif; /* Headings, brand voice */ --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Body, UI */ --font-serif-accent: 'Prelude', Georgia, serif; /* Editorial / marketing accents */ --font-ar: 'Noto Sans Arabic', 'DM Sans', sans-serif; } /* --- Dark theme ----------------------------------------------------------- */ .theme-dark { --bg-canvas: #0E1311; --bg-page: #0E1311; --bg-surface: #151C18; --bg-surface-raised: #1C2520; --bg-surface-variant: #1C2520; --bg-surface-hover: #243029; --bg-surface-active: #2D3B33; --overlay-bg: rgba(21, 28, 24, 0.94); --tooltip-bg: #1C2520; --text-primary: #E6ECE8; --text-secondary: #B8C3BD; --text-tertiary: #8D9892; --text-disabled: #66716B; --text-heading: #F1F5F2; --text-on-primary: #031A05; --border-subtle: #2B3631; --border-default: #39463F; --border-light: #2B3631; --border-strong: #536159; --brand-primary: #00C400; --brand-hover: #00AD00; --brand-active: #009200; --brand-on-primary: #031A05; --state-success: #39D98A; --state-success-bg: #102A1E; --state-warning: #F5B955; --state-warning-bg: #342812; --state-error: #F47C7C; --state-error-bg: #331A1A; --state-info: #72B3FF; --state-info-bg: #132A3D; --icon-color: #A7B9AF; --shadow-card: 0px 1px 4px rgba(0, 0, 0, 0.35); --shadow-header: 0px 1px 3px rgba(0, 0, 0, 0.40), 0px 1px 2px rgba(0, 0, 0, 0.30); --shadow-elevated: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4); } /* --- Base body/typography ------------------------------------------------- */ html, body { background-color: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 12px; } ::selection { background-color: rgba(0, 196, 0, 0.22); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); margin: 0; font-family: var(--font-display); letter-spacing: -0.01em; } p { margin: 0; color: var(--text-primary); }