/* ============================================================ Linax / Simac — Color tokens Palette: "The Blue Hour" Light mode: navy + crimson | Dark mode: deep teal + cream + gold ============================================================ */ :root { /* ---- Brand ramps (base values) ---- */ /* Navy — primary brand color (Simac wordmark) */ --navy-950: #012030; /* deepest — dark-mode canvas */ --navy-900: #0a2235; --navy-800: #143049; --navy-700: #1c3a52; --navy-600: #254159; /* CORE brand navy */ --navy-500: #35597a; --navy-400: #527892; --navy-300: #7e9bb0; --navy-200: #aec3d2; --navy-100: #d7e1ea; --navy-50: #eef3f7; /* Crimson — primary accent (the dot) */ --crimson-800: #6e021f; --crimson-700: #8c0327; /* deep */ --crimson-600: #bf0436; /* CORE accent */ --crimson-500: #d61f4e; --crimson-400: #e6577c; --crimson-200: #f4b6c6; --crimson-100: #fbe1e8; /* Teal — secondary / informational */ --teal-700: #1f6480; --teal-600: #2d83a6; /* CORE teal */ --teal-500: #459bbd; --teal-400: #6fb1cc; --teal-300: #a9cbd9; /* light blue */ --teal-200: #afd2e0; --teal-100: #d8eaf1; --teal-50: #eef6f9; /* Cream — warm neutral / dark-mode text */ --cream: #fff5e0; --cream-dim: #ede2cc; /* Gold + Orange — dark-mode accents / warnings */ --gold-500: #ffd019; --gold-600: #e6b800; --orange-500: #d96b0b; --orange-600: #b8590a; /* Greens (derived, harmonious — for success states) */ --green-600: #1f8a5b; --green-500: #27a06a; --green-100: #d8f0e4; /* Pure */ --white: #ffffff; --black: #04141d; /* ============================================================ SEMANTIC ALIASES — Light mode (default) ============================================================ */ /* Text */ --text-primary: var(--navy-600); --text-secondary: var(--navy-500); --text-tertiary: var(--navy-400); --text-muted: var(--navy-300); --text-inverse: var(--cream); --text-accent: var(--crimson-600); --text-link: var(--teal-600); --text-on-accent: var(--white); /* Surfaces */ --surface-canvas: #f6f9fb; /* page background */ --surface-card: var(--white); --surface-raised: var(--white); --surface-sunken: var(--navy-50); --surface-inverse: var(--navy-600); --surface-accent-subtle: var(--crimson-100); --surface-info-subtle: var(--teal-50); /* Borders / lines */ --border-subtle: var(--navy-100); --border-default: var(--navy-200); --border-strong: var(--navy-300); --border-accent: var(--crimson-600); --border-focus: var(--teal-600); /* Interactive */ --accent: var(--crimson-600); --accent-hover: var(--crimson-700); --accent-active: var(--crimson-800); --primary: var(--navy-600); --primary-hover: var(--navy-700); --primary-active: var(--navy-800); --secondary: var(--teal-600); --secondary-hover: var(--teal-700); /* Status */ --status-success: var(--green-600); --status-success-bg: var(--green-100); --status-warning: var(--orange-500); --status-warning-bg: #fbe9d6; --status-danger: var(--crimson-600); --status-danger-bg: var(--crimson-100); --status-info: var(--teal-600); --status-info-bg: var(--teal-50); /* Data viz (beam / dose visualisation) */ --viz-1: var(--crimson-600); --viz-2: var(--teal-600); --viz-3: var(--navy-600); --viz-4: var(--gold-500); --viz-5: var(--orange-500); --viz-6: var(--teal-300); /* Focus ring */ --ring: color-mix(in srgb, var(--teal-600) 45%, transparent); } /* ============================================================ SEMANTIC ALIASES — Dark mode Apply by setting data-theme="dark" on or any scope. ============================================================ */ [data-theme="dark"] { --text-primary: var(--cream); --text-secondary: var(--teal-200); --text-tertiary: var(--navy-200); --text-muted: var(--navy-300); --text-inverse: var(--navy-600); --text-accent: var(--gold-500); --text-link: var(--teal-300); --text-on-accent: var(--navy-950); --surface-canvas: var(--navy-950); --surface-card: #0a2738; --surface-raised: #103048; --surface-sunken: #06192a; --surface-inverse: var(--cream); --surface-accent-subtle: rgba(255, 208, 25, 0.12); --surface-info-subtle: rgba(45, 131, 166, 0.16); --border-subtle: rgba(175, 210, 224, 0.12); --border-default: rgba(175, 210, 224, 0.20); --border-strong: rgba(175, 210, 224, 0.34); --border-accent: var(--gold-500); --border-focus: var(--teal-300); --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-active: var(--orange-500); --primary: var(--teal-600); --primary-hover: var(--teal-500); --primary-active: var(--teal-400); --secondary: var(--teal-300); --secondary-hover: var(--teal-200); --status-success-bg: rgba(39,160,106,0.16); --status-warning-bg: rgba(217,107,11,0.16); --status-danger: var(--crimson-500); --status-danger-bg: rgba(214,31,78,0.16); --status-info-bg: rgba(45,131,166,0.16); --ring: color-mix(in srgb, var(--teal-300) 50%, transparent); }