/* ========================================================================== Linax / Simac — Color tokens · "The Blue Hour" -------------------------------------------------------------------------- The brand ships two moods. Light mode is clinical white with a deep navy voice and a single crimson "dot" accent (the dot on the A in SIMAC). Dark mode is the deep-teal "blue hour" with a warm cream voice and a gold dot. The accent color intentionally shifts crimson → gold between modes. ========================================================================== */ :root { /* ---- Base palette --------------------------------------------------- */ /* Crimson — light-mode accent (the SIMAC dot) */ --crimson-500: #BF0436; /* The-Blue-Hour-1 */ --crimson-700: #8C0327; /* The-Blue-Hour-2 (pressed / deep) */ /* Navy / teal spine — shared across both modes */ --navy-900: #012030; /* deepest — dark-mode canvas */ --navy-700: #254159; /* primary ink in light mode */ --teal-500: #2D83A6; /* mid brand blue — links, info, charts */ --sky-200: #A9CBD9; /* light-mode soft blue */ --sky-100: #AFD2E0; /* dark-mode soft blue */ /* Warm — dark-mode accents */ --gold-400: #FFD019; /* dark-mode accent (the SIMAC dot) */ --amber-600: #D96B0B; /* dark-mode secondary / warning-warm */ --cream-100: #FFF5E0; /* dark-mode ink */ /* Neutral ramp — cool-tinted grays derived from the navy */ --white: #FFFFFF; --gray-50: #F4F7F9; --gray-100: #E9EFF3; --gray-200: #D8E2E9; --gray-300: #BCCCD6; --gray-400: #93A8B5; --gray-500: #6C8494; --gray-600: #4E6675; --gray-700: #33505F; --gray-800: #223D4A; /* Status — tuned to sit beside the brand blues */ --success-500: #1E8E6A; --success-050: #E4F4EE; --warning-500: #D96B0B; --warning-050: #FBEDDD; --danger-500: #BF0436; --danger-050: #FBE4EA; --info-500: #2D83A6; --info-050: #E4F0F5; /* ================================================================== * * SEMANTIC ALIASES — Light mode (default) * * ================================================================== */ /* Surfaces */ --surface-canvas: var(--white); /* page background */ --surface-card: var(--white); /* raised cards */ --surface-sunken: var(--gray-50); /* wells, insets, code */ --surface-raised: var(--gray-50); /* hover fills, chips */ --surface-inverse: var(--navy-900); /* dark panels on light pages */ /* Text */ --text-strong: var(--navy-700); /* headings, primary ink */ --text-body: #34505F; /* body copy */ --text-muted: var(--gray-500); /* secondary, captions */ --text-faint: var(--gray-400); /* placeholder, disabled */ --text-on-accent: var(--white); /* text on crimson */ --text-inverse: var(--cream-100); /* text on dark surfaces */ --text-link: var(--teal-500); /* Accent (mode-shifting "dot") */ --accent: var(--crimson-500); --accent-strong: var(--crimson-700); --accent-soft: var(--danger-050); --on-accent: var(--white); /* Brand blues (stable across modes) */ --brand-navy: var(--navy-700); --brand-teal: var(--teal-500); --brand-sky: var(--sky-200); /* Lines */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-focus: var(--teal-500); /* Focus ring */ --ring: color-mix(in srgb, var(--teal-500) 45%, transparent); } /* ==================================================================== * * DARK MODE — "The Blue Hour" * * Apply via or [data-theme="dark"] wrapper. * * ==================================================================== */ [data-theme="dark"] { --surface-canvas: var(--navy-900); --surface-card: #082B3B; /* lifted off the canvas */ --surface-sunken: #01212F; --surface-raised: #0C3346; --surface-inverse: var(--cream-100); --text-strong: var(--cream-100); --text-body: #DCE8EC; --text-muted: #93B0BE; --text-faint: #5E7E8C; --text-on-accent: var(--navy-900); --text-inverse: var(--navy-900); --text-link: var(--sky-100); --accent: var(--gold-400); --accent-strong: var(--amber-600); --accent-soft: color-mix(in srgb, var(--gold-400) 16%, transparent); --on-accent: var(--navy-900); --brand-navy: var(--sky-100); --brand-teal: var(--teal-500); --brand-sky: var(--sky-100); --border-subtle: color-mix(in srgb, var(--sky-100) 12%, transparent); --border-default: color-mix(in srgb, var(--sky-100) 20%, transparent); --border-strong: color-mix(in srgb, var(--sky-100) 32%, transparent); --border-focus: var(--gold-400); --success-050: color-mix(in srgb, var(--success-500) 18%, transparent); --warning-050: color-mix(in srgb, var(--amber-600) 18%, transparent); --danger-050: color-mix(in srgb, var(--crimson-500) 20%, transparent); --info-050: color-mix(in srgb, var(--teal-500) 18%, transparent); --ring: color-mix(in srgb, var(--gold-400) 50%, transparent); }