/* ========================================================================== Mahr Software — Color tokens -------------------------------------------------------------------------- Brand color taken directly from the official MAHR logo/icon SVGs: pure RED rgb(255,0,0) = #FF0000, set against black wordmark on white. The identity is RED + BLACK + WHITE. Neutrals are a cool slate ramp. ========================================================================== */ :root { /* --- Neutral: cool slate ramp (the backbone) --- */ --slate-0: #ffffff; --slate-50: #f7f8fa; --slate-100: #eef0f3; --slate-200: #dde1e7; --slate-300: #c3c9d2; --slate-400: #969da8; --slate-500: #6b7280; --slate-600: #4b515c; --slate-700: #343941; --slate-800: #21252b; --slate-900: #131619; --ink: #0d0f12; /* --- Primary: MAHR Red (from the logo, #FF0000 = red-500) --- */ --red-50: #fff1f0; --red-100: #ffdcda; --red-200: #ffbbb6; --red-300: #ff8e87; --red-400: #ff5348; --red-500: #ff0000; /* the brand / logo red */ --red-600: #dd0006; /* hover — deeper */ --red-700: #b30409; /* active / pressed */ --red-800: #870a0d; --red-900: #5a0b0d; /* --- Accent: ink black (red+black identity — no third hue) --- */ --accent: var(--ink); /* --- Semantic ramps (utility colors, kept distinct from brand red) --- */ --green-100: #d6f2e0; --green-500: #12a150; --green-700: #0c7c3d; --amber-100: #fbecc7; --amber-500: #e8a317; --amber-700: #a9770d; /* Danger uses a deeper, slightly desaturated crimson so error states stay legible next to the vivid vermilion brand red. */ --crimson-100: #fbdada; --crimson-500: #d21f24; --crimson-700: #9e161a; /* Info uses a calm utility blue (not a brand hue — semantic only). */ --infoblue-50: #eef4ff; --infoblue-500: #2f6feb; --infoblue-700: #1b4fbf; /* ====================================================================== SEMANTIC ALIASES — reference these in components, not the raw ramps. Default theme = LIGHT. ====================================================================== */ /* Surfaces */ --surface-page: var(--slate-50); --surface-card: var(--slate-0); --surface-raised: var(--slate-0); --surface-sunken: var(--slate-100); --surface-inverse: var(--ink); --surface-hover: var(--slate-100); --surface-active: var(--slate-200); /* Text */ --text-strong: var(--ink); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-subtle: var(--slate-400); --text-on-brand: #ffffff; --text-on-inverse: var(--slate-50); --text-link: var(--red-600); /* Brand */ --brand: var(--red-500); --brand-hover: var(--red-600); --brand-active: var(--red-700); --brand-subtle: var(--red-50); --brand-border: var(--red-200); /* Borders */ --border-subtle: var(--slate-200); --border-default: var(--slate-300); --border-strong: var(--slate-400); --border-focus: var(--red-500); /* Semantic feedback */ --success: var(--green-500); --success-subtle: var(--green-100); --warning: var(--amber-500); --warning-subtle: var(--amber-100); --danger: var(--crimson-500); --danger-subtle: var(--crimson-100); --info: var(--infoblue-500); --info-subtle: var(--infoblue-50); /* Focus ring */ --ring: 0 0 0 3px color-mix(in srgb, var(--red-500) 32%, transparent); } /* ========================================================================== DARK THEME — apply via or .theme-dark ========================================================================== */ [data-theme="dark"], .theme-dark { --surface-page: #0b0d10; --surface-card: #14171b; --surface-raised: #1a1e24; --surface-sunken: #0e1114; --surface-inverse: var(--slate-50); --surface-hover: #1e232a; --surface-active: #262d35; --text-strong: #f4f6f8; --text-body: #c3c9d2; --text-muted: #8b929c; --text-subtle: #626973; --text-on-brand: #ffffff; --text-on-inverse: var(--ink); --text-link: var(--red-400); /* On dark, lift the brand red slightly for contrast/vibrancy. */ --brand: #ff3b30; --brand-hover: #ff5a50; --brand-active: #ff7167; --brand-subtle: #3a0f0d; --brand-border: #6e211c; --border-subtle: #232a31; --border-default: #2f3841; --border-strong: #414b56; --border-focus: #ff3b30; --success-subtle: #102c1d; --warning-subtle: #2e2410; --danger-subtle: #2e1416; --info-subtle: #101d3a; --ring: 0 0 0 3px color-mix(in srgb, #ff3b30 45%, transparent); }