/* ============================================================================ Hakonix Design System v1 — CIEP Design tokens. Two layers: 1) Primitives — raw palette/scales (rarely used directly) 2) Semantic — role-based tokens the components consume Theme by setting data-theme="light" | "dark" on . Self-hosted system fonts only (no web-font download → works fully offline). ============================================================================ */ :root { /* ---- Primitive: CIEP navy (brand primary — the wordmark/lightbulb) --- */ --navy-50: #e9edf6; --navy-100: #c6d0e6; --navy-200: #9aabd0; --navy-300: #6076a8; --navy-400: #344b82; --navy-500: #16265c; /* CIEP primary (logo navy) */ --navy-600: #101d48; --navy-700: #0b1535; --navy-800: #070e23; --navy-900: #040814; /* ---- Primitive: Nigerian green (INNOVATE) --------------------------- */ --green-50: #e7f6ec; --green-100: #c2e9cf; --green-200: #94d8ac; --green-300: #5cc182; --green-400: #2aa85c; --green-500: #1a9c4a; /* logo green */ --green-600: #14803c; --green-700: #0f6330; --green-800: #0a4a24; --green-900: #063017; /* ---- Primitive: CIEP red (IMPACT / the arrow) ---------------------- */ --amber-300: #f6c65b; /* retained for warning state */ --amber-400: #eeb02f; --amber-500: #e8a317; --amber-600: #c1850d; /* ---- Primitive: neutrals (slate) ------------------------------------ */ --neutral-0: #ffffff; --neutral-50: #f6f8f7; --neutral-100: #eef2f0; --neutral-200: #dce5e0; --neutral-300: #c2d0c9; --neutral-400: #93a79d; --neutral-500: #6a7d74; --neutral-600: #4d5d55; --neutral-700: #364139; /* corrected below via dark tokens */ --neutral-800: #1f2a24; --neutral-900: #101713; /* ---- Primitive: semantic hues --------------------------------------- */ --blue-500: #2f6fed; --blue-50: #e8f0fe; --red-500: #e01f26; /* CIEP red (logo arrow / IMPACT) */ --red-600: #b8171d; --red-50: #fceaea; --amber-50: #fdf3e0; /* ---- Typography ------------------------------------------------------ */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- Spacing (4px base) --------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; /* ---- Radius / shadow / motion / z ----------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(16, 23, 19, 0.08); --shadow-md: 0 4px 12px rgba(16, 23, 19, 0.10); --shadow-lg: 0 12px 32px rgba(16, 23, 19, 0.16); --transition-fast: 120ms ease; --transition: 200ms ease; --z-header: 100; --z-modal: 1000; --z-toast: 1100; /* ---- Focus ring ------------------------------------------------------ */ --focus-ring: 0 0 0 3px rgba(22, 38, 92, 0.35); } /* =========================================================================== Semantic tokens — LIGHT (default brand theme) =========================================================================== */ :root, [data-theme="light"] { --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-2: var(--neutral-100); --color-surface-hover: var(--neutral-100); --color-text: #12211a; --color-text-muted: var(--neutral-500); --color-text-subtle: var(--neutral-400); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-primary: var(--navy-500); --color-primary-hover: var(--navy-600); --color-primary-contrast: #ffffff; --color-primary-soft: var(--navy-50); --color-accent: var(--green-500); /* INNOVATE green for highlight CTAs */ --color-accent-contrast: #ffffff; --color-success: var(--green-600); --color-success-soft: var(--green-50); --color-warning: var(--amber-600); --color-warning-soft: var(--amber-50); --color-danger: var(--red-500); /* IMPACT red */ --color-danger-soft: var(--red-50); --color-info: var(--navy-500); --color-info-soft: var(--navy-50); } /* =========================================================================== Semantic tokens — DARK =========================================================================== */ [data-theme="dark"] { --color-bg: #0a0f1e; --color-surface: #111830; --color-surface-2: #1a2342; --color-surface-hover: #222c50; --color-text: #e7ecf7; --color-text-muted: #9fabce; --color-text-subtle: #6b779c; --color-border: #273255; --color-border-strong: #35437099; --color-primary: #4a66a8; --color-primary-hover: #5f7cc0; --color-primary-contrast: #ffffff; --color-primary-soft: #16224a; --color-accent: var(--green-400); --color-accent-contrast: #04210e; --color-success: var(--green-400); --color-success-soft: #0e2c1a; --color-warning: var(--amber-400); --color-warning-soft: #2c2410; --color-danger: #f07a7a; --color-danger-soft: #331a1c; --color-info: #7d93c8; --color-info-soft: #16224a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --focus-ring: 0 0 0 3px rgba(93, 124, 192, 0.45); } /* Respect OS preference when no explicit theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0a0f1e; --color-surface: #111830; --color-surface-2: #1a2342; --color-surface-hover: #222c50; --color-text: #e7ecf7; --color-text-muted: #9fabce; --color-text-subtle: #6b779c; --color-border: #273255; --color-border-strong: #354370; --color-primary: #4a66a8; --color-primary-hover: #5f7cc0; --color-primary-contrast: #ffffff; --color-primary-soft: #16224a; --color-success: var(--green-400); --color-success-soft: #0e2c1a; --color-warning: var(--amber-400); --color-warning-soft: #2c2410; --color-danger: #f07a7a; --color-danger-soft: #331a1c; --color-info: #7d93c8; --color-info-soft: #16224a; } }