/* ========================================================================== Kukis Global — Color tokens Heritage sage-teal (#64a19d) evolved into a brighter signal teal, set on deep teal-tinted near-black surfaces. Dark-first infrastructure brand. ========================================================================== */ :root { /* --- Brand teal scale --------------------------------------------------- */ --teal-50: #ECFBF8; --teal-100: #CFF5EE; --teal-200: #A0EADD; --teal-300: #66D8C8; --teal-400: #36C3B1; --teal-500: #18B59E; /* primary brand teal */ --teal-600: #129685; --teal-700: #14746A; --teal-800: #155C55; --teal-900: #123F3B; --teal-950: #0A2624; /* Heritage tone — the original 2018 brand teal, kept for reference/legacy */ --teal-heritage: #64A19D; /* --- Ink / neutral scale (cool, faintly teal-tinted) -------------------- */ --ink-950: #060B0B; /* page background */ --ink-900: #0B1413; /* alternate band background */ --ink-850: #0F1A19; /* card surface */ --ink-800: #16201F; /* raised surface */ --ink-700: #1E2A29; /* hairline-strong / inputs */ --ink-600: #2A3837; --ink-500: #3C4A49; --ink-400: #586665; --ink-300: #7E8C8A; --ink-200: #9DACAA; --ink-100: #C6D2D0; --ink-050: #EAF2F0; --white: #FFFFFF; --black: #000000; /* --- Semantic status ---------------------------------------------------- */ --green-500: #1EC98B; /* up / healthy */ --green-400: #4BD9A4; --amber-500: #F5B843; /* degraded / warning */ --red-500: #F2674A; /* down / error */ --blue-500: #3FA9F5; /* info */ --slate-500: #7E8C8A; /* sunset / retired */ /* ====================================================================== Semantic aliases — prefer these in components ====================================================================== */ /* Backgrounds & surfaces */ --bg-page: var(--ink-950); --bg-alt: var(--ink-900); --surface-card: var(--ink-850); --surface-raised: var(--ink-800); --surface-input: var(--ink-700); /* Borders / hairlines */ --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.12); --border-strong: #2A3837; --border-accent: rgba(24, 181, 158, 0.45); /* Text */ --text-primary: #EAF2F0; --text-secondary: #B8C6C4; --text-muted: #7E8C8A; --text-faint: #586665; --text-on-accent: #04211D; /* dark ink for use on teal fills */ --text-link: var(--teal-400); /* Accent */ --accent: var(--teal-500); --accent-hover: var(--teal-400); --accent-press: var(--teal-600); --accent-bright: var(--teal-300); --accent-strong: var(--teal-400); /* teal used as TEXT/icon — readable on the current surface */ --accent-soft: rgba(24, 181, 158, 0.12); --accent-glow: rgba(24, 181, 158, 0.35); /* Status semantic */ --status-up: var(--green-500); --status-degraded: var(--amber-500); --status-down: var(--red-500); --status-sunset: var(--slate-500); /* network retired / sunset */ --status-info: var(--blue-500); } /* ========================================================================== LIGHT THEME — set data-theme="light" on (or any wrapper). The teal & ink scales stay fixed; only semantic aliases + shadows flip. Teal FILLS (buttons) keep dark ink in both modes for brand consistency; teal TEXT uses --accent-strong, which darkens here to stay legible. ========================================================================== */ :root[data-theme="light"], [data-theme="light"] { --bg-page: #EEF3F2; --bg-alt: #E4ECEA; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-input: #FFFFFF; --border-subtle: rgba(11, 20, 19, 0.08); --border-default: rgba(11, 20, 19, 0.14); --border-strong: #CBD6D4; --border-accent: rgba(19, 107, 97, 0.45); --text-primary: #0B1413; --text-secondary: #324140; --text-muted: #5C6B69; --text-faint: #8A9997; --text-on-accent: #04211D; --text-link: #136B61; --accent-strong: #136B61; /* AA teal text on light surfaces */ --accent-soft: rgba(24, 181, 158, 0.14); --accent-glow: rgba(24, 181, 158, 0.30); --shadow-xs: 0 1px 2px rgba(11, 20, 19, 0.06); --shadow-sm: 0 2px 8px rgba(11, 20, 19, 0.08); --shadow-md: 0 10px 28px rgba(11, 20, 19, 0.10); --shadow-lg: 0 24px 56px rgba(11, 20, 19, 0.14); --shadow-glow: 0 0 0 1px var(--border-accent), 0 0 26px -8px var(--accent-glow); } /* ========================================================================== DARK THEME (explicit scope) — mirrors the :root defaults so that elements marked data-theme="dark" stay dark even when an ANCESTOR is data-theme="light" (e.g. the website's permanently-dark nav / hero / contact / footer). ========================================================================== */ :root[data-theme="dark"], [data-theme="dark"] { --bg-page: #060B0B; --bg-alt: #0B1413; --surface-card: #0F1A19; --surface-raised: #16201F; --surface-input: #1E2A29; --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.12); --border-strong: #2A3837; --border-accent: rgba(24, 181, 158, 0.45); --text-primary: #EAF2F0; --text-secondary: #B8C6C4; --text-muted: #7E8C8A; --text-faint: #586665; --text-on-accent: #04211D; --text-link: var(--teal-400); --accent-strong: var(--teal-400); --accent-soft: rgba(24, 181, 158, 0.12); --accent-glow: rgba(24, 181, 158, 0.35); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 0 1px var(--border-accent), 0 0 28px -6px var(--accent-glow); }