/* ============================================================ ARKHENZ — COLOR TOKENS Forest-green primary · luminous signal accent · ink + paper. Base palette (raw) -> Semantic aliases (use these in product). ============================================================ */ :root { /* ---- FOREST · the brand green --------------------------- */ --forest-50: #ECF7F0; --forest-100: #CFEADB; --forest-200: #A6D8BE; --forest-300: #72BE98; --forest-400: #3F9E72; --forest-500: #1B7A52; --forest-600: #176E42; /* core brand — the logo green */ --forest-700: #115637; --forest-800: #0E4E2E; /* deep forest */ --forest-900: #0A3322; --forest-950: #061E14; /* ---- SIGNAL · the futuristic accent (luminous mint) ----- */ --signal-200: #B7FFDD; --signal-300: #8BFFC4; --signal-400: #6CF7AE; --signal-500: #4CF09E; /* core accent — the logo dots */ --signal-600: #2BD37E; --signal-700: #17A862; /* ---- INK · near-black with a green undertone ------------ */ --ink-950: #06120D; /* deepest canvas */ --ink-900: #08160B; --ink-850: #0B1C13; --ink-800: #0E2218; --ink-700: #16291E; --ink-600: #1F3328; --ink-500: #2B4133; /* ---- STONE · cool green-grey neutrals ------------------- */ --stone-50: #F5F8F4; /* paper */ --stone-100: #EAEFEA; --stone-200: #D9E0DA; --stone-300: #BDC7C0; --stone-400: #909C94; --stone-500: #677067; --stone-600: #49524C; --stone-700: #333B36; --stone-800: #222824; --stone-900: #161A17; --white: #FFFFFF; --black: #000000; /* ---- STATUS (muted, restrained) ------------------------ */ --positive: #2BD37E; --caution: #E8B341; --critical: #E5604D; --info: #4CC2F0; /* ======================================================== SEMANTIC ALIASES — light theme (default) ======================================================== */ --brand: var(--forest-600); --brand-strong: var(--forest-800); --brand-soft: var(--forest-50); --accent: var(--signal-500); --accent-ink: var(--forest-900); /* text/icon on signal fills */ --bg-canvas: var(--stone-50); --bg-surface: var(--white); --bg-surface-2: var(--stone-100); --bg-sunken: var(--stone-100); --bg-inverse: var(--ink-950); --text-strong: var(--ink-900); --text-body: var(--stone-700); --text-muted: var(--stone-500); --text-faint: var(--stone-400); --text-on-brand: var(--white); --text-on-accent: var(--forest-900); --text-inverse: var(--stone-50); --text-link: var(--forest-600); --border-subtle: var(--stone-200); --border-default: var(--stone-300); --border-strong: var(--stone-400); --border-brand: var(--forest-600); --border-accent: var(--signal-500); --field-bg: var(--white); --field-border: var(--stone-300); --field-text: var(--ink-900); --field-placeholder:var(--stone-400); --ring: color-mix(in srgb, var(--signal-500) 55%, transparent); --selection: color-mix(in srgb, var(--signal-500) 35%, transparent); } /* ========================================================== DARK THEME — the brand's native, futuristic register. Apply on or .theme-dark. ========================================================== */ [data-theme="dark"], .theme-dark { --brand: var(--signal-500); --brand-strong: var(--signal-400); --brand-soft: color-mix(in srgb, var(--signal-500) 14%, transparent); --accent: var(--signal-500); --accent-ink: var(--ink-950); --bg-canvas: var(--ink-950); --bg-surface: var(--ink-850); --bg-surface-2: var(--ink-800); --bg-sunken: var(--ink-900); --bg-inverse: var(--stone-50); --text-strong: var(--stone-50); --text-body: var(--stone-300); --text-muted: var(--stone-400); --text-faint: var(--stone-500); --text-on-brand: var(--ink-950); --text-on-accent: var(--ink-950); --text-inverse: var(--ink-900); --text-link: var(--signal-500); --border-subtle: color-mix(in srgb, var(--stone-50) 8%, transparent); --border-default: color-mix(in srgb, var(--stone-50) 14%, transparent); --border-strong: color-mix(in srgb, var(--stone-50) 24%, transparent); --border-brand: var(--signal-500); --border-accent: var(--signal-500); --field-bg: var(--ink-800); --field-border: color-mix(in srgb, var(--stone-50) 16%, transparent); --field-text: var(--stone-50); --field-placeholder:var(--stone-500); --ring: color-mix(in srgb, var(--signal-500) 60%, transparent); --selection: color-mix(in srgb, var(--signal-500) 28%, transparent); }