/* ===================================== Sakinah – colors.css Tokens extracted from Brand Guidelines. Scales: 50 (lightest) → 900 (darkest) ===================================== */ /* Brand (Green/Olive) */ :root { --brand-50: #fefcf3; /* Cream Background */ --brand-100: #f1f2e8; --brand-200: #e2e5d6; --brand-300: #c6cbb0; --brand-400: #a5a97b; /* Light Green */ --brand-500: #a5a97b; /* (Duplicate for safety) */ /* primary */ --brand-600: #7e8c5a; /* Primary Action */ --brand-700: #66744a; /* Medium Green */ --brand-800: #4f5a3e; /* Dark Green */ --brand-900: #2f3324; /* Darkest Green */ /* Neutral Gray */ --gray-50: #f9f9f9; /* Off White */ --gray-100: #efede7; --gray-200: #e3dfd7; --gray-300: #d4cec3; --gray-400: #bfb7ab; --gray-500: #a2998e; --gray-600: #827a70; --gray-700: #686058; --gray-800: #4c453f; --gray-900: #302c27; /* Success (Green) - Adjusted to match brand feel */ --success-50: #edf9f0; --success-100: #d9f1e0; --success-200: #afdcbc; --success-300: #7ecb95; --success-400: #4fb975; --success-500: #2f9e58; --success-600: #258047; --success-700: #1f6539; --success-800: #184d2c; /* Warning (Golden) */ --warning-50: #fff6dc; --warning-100: #ffeab3; --warning-200: #ffd780; --warning-300: #f8bd45; --warning-400: #e8a729; --warning-500: #c8891d; --warning-600: #a06b16; --warning-700: #7a5113; --warning-800: #54380e; /* Info (Teal/Cyan) */ --info-50: #e6f6fa; --info-100: #cceaf3; --info-200: #9ad4e3; --info-300: #66b8cf; --info-400: #3c9db9; --info-500: #23839f; --info-600: #1b6a82; --info-700: #165468; --info-800: #123f4f; /* Danger (Red) */ --danger-50: #fcecee; --danger-100: #f8d6db; --danger-200: #f1adb5; --danger-300: #e47988; --danger-400: #d25464; --danger-500: #b73c4e; --danger-600: #952f3e; --danger-700: #752430; --danger-800: #561b23; /* Surfaces (from the palette background) */ --canvas: var(--brand-50); /* #fefcf3 */ --paper: #ffffff; --ink: var(--brand-900); --ink-soft: var(--brand-700); /* Map to existing tokens */ --bg: var(--canvas); --surface: var(--paper); --surface-alt: color-mix(in srgb, var(--paper) 80%, transparent); --muted: var(--gray-600); --accent: var(--brand-600); /* #7e8c5a */ --accent-strong: var(--brand-700);/* #66744a */ --accent-soft: var(--brand-200); --border: var(--gray-200); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* ===================== Dark theme (opt‑in) Enable by adding: Also auto-enable when user prefers dark (see utilities.css hook). (Adjusted Brand Colors for Dark Mode - Inverted lightness roughly) ===================== */ :root[data-theme="dark"] { /* Surfaces */ --canvas: #1a1c14; /* deeply dark olive/gray */ --paper: #23261e; --ink: #f1f2e8; --ink-soft: #c6cbb0; /* Brand in dark */ --brand-50: #2f3324; --brand-100: #4f5a3e; --brand-200: #66744a; --brand-300: #7e8c5a; --brand-400: #a5a97b; --brand-500: #c6cbb0; /* lighter for dark mode text/accents */ --brand-600: #daddc5; --brand-700: #e2e5d6; --brand-800: #f1f2e8; --brand-900: #fefcf3; --accent: var(--brand-300); /* #7e8c5a - keep the brand identity visible */ --accent-strong: var(--brand-400); --accent-soft: color-mix(in srgb, var(--brand-300) 25%, transparent); /* Neutral */ --gray-50: #1c1820; --gray-100: #25212b; --gray-200: #302c38; --gray-300: #3b3744; --gray-400: #4c4756; --gray-500: #645f6f; --gray-600: #857f91; --gray-700: #aba5b9; --gray-800: #d2cde0; --gray-900: #f7f3ff; --border: var(--gray-200); --muted: var(--gray-600); --surface-alt: rgba(255, 255, 255, .06); }