/* KFCRIS brand tokens * * Single source of truth for colours, font stacks, and surface tokens. * Derived from `kfcris-contacts/src/app/globals.css` + AGENTS.md §6. * Anchored on Pantone 3165C (#00505C) — the Centre's official brand book. * * Usage: load this file before any other KFCRIS brand CSS. * * * Then reference variables via `var(--kfcris-primary)` etc. * * To change the brand colour or its strength, edit `--kfcris-primary` * and `--kfcris-primary-dark` here. Every surface picks it up. */ :root { /* === Brand primary === * 85% tint of Pantone 3165C. After two iteration rounds with the * Centre the 85% landed as the screen-app workhorse: 100% read too * dark, 70% washed out. 85% sits between the brand book's 80 and 100 * stops and reads correctly next to the Centre's official website. */ --kfcris-primary: #266A74; --kfcris-primary-dark: #0D5A65; /* ~95% tint — hover/pressed */ --kfcris-primary-tint-10: rgba(38, 106, 116, 0.1); /* === Teal scale (each step is a strength of Pantone 3165C) === */ --kfcris-teal-50: #E6EEEF; /* 10% */ --kfcris-teal-100: #CCDCDE; /* 20% */ --kfcris-teal-200: #B3CBCE; /* 30% */ --kfcris-teal-300: #80A8AE; /* 50% */ --kfcris-teal-400: #4D858D; /* 70% */ --kfcris-teal-500: #266A74; /* 85% — BRAND, matches --kfcris-primary */ --kfcris-teal-600: #0D5A65; /* 95% */ --kfcris-teal-700: #00505C; /* 100% — full Pantone */ --kfcris-teal-800: #003F49; /* deeper than 100% */ --kfcris-teal-900: #002F36; /* === Links === */ --kfcris-link: #0094FF; /* === Backgrounds (light mode) === */ --kfcris-bg: #FFFFFF; --kfcris-bg-secondary: #F4F4F4; --kfcris-bg-card: #FFFFFF; /* === Backgrounds (dark mode) === */ --kfcris-bg-dark: #1A1C24; --kfcris-bg-dark-deep: #0A0B12; --kfcris-bg-dark-card: #2A2D35; --kfcris-bg-dark-hover: #353840; /* === Text === */ --kfcris-text: #000000; --kfcris-text-muted: #4A5568; --kfcris-text-on-dark: #FFFFFF; /* === Borders === */ --kfcris-border: #E0E0E0; --kfcris-border-dark: #3A3D45; /* === State colours === */ --kfcris-danger: #DC2626; --kfcris-success: #16A34A; --kfcris-warning: #F59E0B; /* === Font stacks === * "Twemoji Country Flags" is listed first so flag glyphs render * correctly on Windows (which lacks native flag emoji). Its * unicode-range is scoped to Regional Indicator pairs; everything * else falls through to the next font. */ --kfcris-font-en: "Twemoji Country Flags", "Inter", "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --kfcris-font-ar: "Twemoji Country Flags", "Sakkal Majalla", "Almarai", "Segoe UI", system-ui, sans-serif; --kfcris-font-display-en: "Saudi", "Inter", "Segoe UI", sans-serif; --kfcris-font-display-ar: "Greta Arabic", "Sakkal Majalla", "Segoe UI", sans-serif; /* === Radii === */ --kfcris-radius-sm: 6px; --kfcris-radius: 8px; /* rounded-lg */ --kfcris-radius-pill: 9999px; /* === Shadows === */ --kfcris-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --kfcris-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --kfcris-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); } /* Dark-mode token overrides — opt in by adding class="dark" on . */ html.dark { --kfcris-bg: var(--kfcris-bg-dark); --kfcris-bg-secondary: var(--kfcris-bg-dark-deep); --kfcris-bg-card: var(--kfcris-bg-dark-card); --kfcris-text: var(--kfcris-text-on-dark); --kfcris-border: var(--kfcris-border-dark); }