/* ============================================================ MagpieToolbox - Color tokens Concept: "ink + iridescent magpie blue/teal." Ink = cool blue-tinged near-blacks (the magpie's body). Teal = the iridescent jewel sheen of a magpie wing (PRIMARY). Blue + violet = the rest of that iridescence (secondary / sparing). Kept deliberately COOL so the brand reads distinct from GameNightOwl's warm flame/spark palette. THEMING (Instrument language): - Light is the default (values live in :root). - data-theme="dark" on swaps surfaces / text / borders. - data-accent="teal|cobalt|violet|emerald|amber|mono" on repoints the brand. Only --accent-1/2/3 + --on-accent change; every --brand* alias tracks them, and soft tints are mixed against --surface so they re-tint per theme automatically. ============================================================ */ :root { /* ---- Ink / slate neutrals (cool, faint blue undertone) ---- */ --ink-950: #090e18; --ink-900: #101826; --ink-800: #1c2738; --ink-700: #2e3c52; --ink-600: #45566f; --ink-500: #5f7088; --ink-400: #8392a6; --ink-300: #aab6c6; --ink-200: #cfd8e3; --ink-100: #e8edf3; --ink-50: #f4f7fa; /* ---- Teal (PRIMARY - magpie iridescence) ---- */ --teal-50: #eafbfc; --teal-100: #cbf4f6; --teal-200: #9de9ed; --teal-300: #62d8df; --teal-400: #2bc1cb; --teal-500: #0aa5b1; --teal-600: #08858f; --teal-700: #0a6a73; --teal-800: #0e555c; --teal-900: #11464c; --teal-950: #062c30; /* ---- Blue (SECONDARY - the blue flash of the wing) ---- */ --blue-50: #ecf2fe; --blue-100: #d6e2fd; --blue-200: #b0c7fb; --blue-300: #82a4f7; --blue-400: #5582f1; --blue-500: #2e63e8; --blue-600: #2050d0; --blue-700: #1c40a4; --blue-800: #1b377f; --blue-900: #1a2f63; /* ---- Violet (iridescent ACCENT - use sparingly) ---- */ --violet-50: #f1edfe; --violet-100: #e3dcfd; --violet-200: #cabffb; --violet-300: #ac9bf8; --violet-400: #9d8bfd; --violet-500: #7b5bfb; --violet-600: #6438f0; --violet-700: #5326d1; /* ---- Functional status hues ---- */ --green-500: #15a06b; --green-50: #e4f7ef; --amber-500: #d9882b; --amber-50: #fbf0dd; --red-500: #db4b5a; --red-50: #fce8ea; /* ============================================================ SEMANTIC ALIASES (use these in components, not raw scales) ============================================================ */ color-scheme: light; /* ---- Accent engine (swappable; default = teal) ---- Only these four change per data-accent; everything brand-related derives from them. See the [data-accent] blocks at the foot. */ --accent-1: var(--teal-500); /* base */ --accent-2: var(--teal-600); /* hover / deep */ --accent-3: var(--teal-700); /* active / brand text on light */ --on-accent: #ffffff; /* readable foreground on --accent-1 */ /* Brand = the chosen accent. Soft tints mix against --surface, so they recompute for dark automatically (var() resolves at use-site). */ --brand: var(--accent-1); --brand-hover: var(--accent-2); --brand-active: var(--accent-3); --brand-soft: color-mix(in srgb, var(--accent-1) 12%, var(--surface)); --brand-soft-hover: color-mix(in srgb, var(--accent-1) 20%, var(--surface)); --brand-border: color-mix(in srgb, var(--accent-1) 30%, var(--surface)); --brand-strong: var(--accent-3); --on-brand: var(--on-accent); /* Secondary blue accent (info / decorative) - not part of the swap */ --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-soft: color-mix(in srgb, var(--blue-500) 11%, var(--surface)); --accent-border: var(--blue-200); /* Surfaces / backgrounds */ --canvas: #f6f9fb; --canvas-sunken: #eef3f7; --surface: #ffffff; --surface-soft: #fbfcfe; --surface-sunken: #eef3f7; --surface-inverse: var(--ink-900); --surface-inverse-2:var(--ink-800); --overlay-scrim: rgba(9, 14, 24, 0.55); /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-link: var(--blue-600); --text-link-hover: var(--blue-700); --text-brand: var(--accent-3); --text-on-dark: #eaf1f6; --text-on-dark-muted: #9fb0c2; --text-on-brand: var(--on-accent); /* Borders / dividers */ --border-subtle: #eef2f7; --border-default: #e1e8f0; --border-strong: #cfd8e3; --border-inverse: rgba(255, 255, 255, 0.12); --border-focus: var(--accent-1); /* Status */ --success: var(--green-500); --success-soft: color-mix(in srgb, var(--green-500) 14%, var(--surface)); --success-text: #0c7a4f; --warning: var(--amber-500); --warning-soft: color-mix(in srgb, var(--amber-500) 16%, var(--surface)); --warning-text: #9a5d12; --danger: var(--red-500); --danger-soft: color-mix(in srgb, var(--red-500) 14%, var(--surface)); --danger-text: #b22f3d; --info: var(--blue-500); --info-soft: color-mix(in srgb, var(--blue-500) 13%, var(--surface)); --info-text: var(--blue-700); --violet-soft: color-mix(in srgb, var(--violet-500) 13%, var(--surface)); --violet-text: var(--violet-700); /* ---- Tool category accents (the color-coded tool grid) ---- */ --cat-money: var(--teal-500); /* Invoicing and Money */ --cat-money-soft: color-mix(in srgb, var(--teal-500) 13%, var(--surface)); --cat-time: var(--blue-500); /* Time and Hours */ --cat-time-soft: color-mix(in srgb, var(--blue-500) 13%, var(--surface)); --cat-estimates: var(--violet-500); /* Estimates */ --cat-estimates-soft: color-mix(in srgb, var(--violet-500) 13%, var(--surface)); --cat-email: var(--amber-500); /* Email and Admin */ --cat-email-soft: color-mix(in srgb, var(--amber-500) 15%, var(--surface)); /* ---- Iridescent gradients (logo + ONE hero accent only) ---- */ --gradient-iridescent: linear-gradient(115deg, var(--teal-400) 0%, var(--blue-500) 52%, var(--violet-500) 100%); /* @kind color */ --gradient-teal: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-600) 100%); /* @kind color */ --gradient-ink: linear-gradient(165deg, var(--ink-800) 0%, var(--ink-950) 100%); /* @kind color */ --gradient-sheen: linear-gradient(115deg, rgba(43,193,203,0.16) 0%, rgba(46,99,232,0.14) 55%, rgba(123,91,251,0.16) 100%); /* @kind color */ } /* ============================================================ ACCENT SWAP - set data-accent on . Default (no attribute) stays teal via :root above. Only the four accent vars change; --brand* and --border-focus / --ring-focus track them. ============================================================ */ [data-accent="teal"] { --accent-1: var(--teal-500); --accent-2: var(--teal-600); --accent-3: var(--teal-700); --on-accent: #ffffff; } [data-accent="cobalt"] { --accent-1: #2c5be0; --accent-2: #1f49c4; --accent-3: #1a3ca0; --on-accent: #ffffff; } [data-accent="violet"] { --accent-1: var(--violet-500); --accent-2: var(--violet-600); --accent-3: var(--violet-700); --on-accent: #ffffff; } [data-accent="emerald"] { --accent-1: #12a36a; --accent-2: #0e8a59; --accent-3: #0b6e47; --on-accent: #ffffff; } [data-accent="amber"] { --accent-1: #d9882b; --accent-2: #bd7320; --accent-3: #965a18; --on-accent: #1c1305; } [data-accent="mono"] { --accent-1: var(--text-strong); --accent-2: var(--text-body); --accent-3: var(--text-strong); --on-accent: var(--surface); } /* ============================================================ DARK THEME - set data-theme="dark" on . Overrides ONLY the main surfaces, text, borders and theme-bound tints. Brand / accent / category hues stay as defined in :root; their *-soft tints mix against --surface, so they re-tint for free. NOTE: the "on-dark" / "inverse" tokens are intentionally NOT flipped - they describe permanently-dark sections (footers, CTA cards) that exist in both themes. ============================================================ */ [data-theme="dark"] { color-scheme: dark; --canvas: #080c14; --canvas-sunken: #0c1220; --surface: #10182a; --surface-soft: #152038; --surface-sunken: #0c1220; --text-strong: #e9f0f8; --text-body: #cdd9e8; --text-muted: #a6b6cb; --text-subtle: #8597b0; --text-link: #7ea6ff; --text-link-hover: #a8c4ff; --text-brand: color-mix(in srgb, var(--accent-1), white 26%); --border-subtle: #161f33; --border-default: #1d2840; --border-strong: #2a3a58; /* status text lightened so it reads on the dark soft tints */ --success-text: #5fd3a0; --warning-text: #f0b35f; --danger-text: #ff8a93; --info-text: #9ab8ff; --violet-text: #c3b0ff; /* deeper, blacker elevation in the dark */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4); --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45); --inner-line: inset 0 0 0 1px rgba(255, 255, 255, 0.06); /* @kind shadow */ }