/** * COPWATCHDOG MERCURY - Design System Variables v2.0.0 * Optimized token system with intuitive, fast-to-type naming * * @package CopWatchdog_Mercury * @author Vic Stizzi * @version 2.0.0 */ /* ================================================= */ /* FONT IMPORTS */ /* ================================================= */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=PT+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap'); /* ================================================= */ /* TABLE OF CONTENTS */ /* ================================================= */ /* 1.0 FOUNDATION TOKENS (--cwd-*) /* 1.1 Colors (c-*) /* 1.2 Typography (t-*) /* 1.3 Spacing (s-*) /* 1.4 Layout (l-*) /* 1.5 Borders (b-*) /* 1.6 Shadows (sh-*) /* 1.7 Motion (m-*) /* /* 2.0 COMPONENT TOKENS (--cwd-*) /* 2.1 Surface (sf-*) /* 2.2 Text (tx-*) /* 2.3 Interactive (ix-*) /* 2.4 Feedback (fb-*) /* /* 3.0 THEMES (--adp-*, --cyb-*, --inv-*, --mlt-*) /* 3.1 ADP - Adaptable /* 3.2 CYB - Cyberpunk /* 3.3 INV - Investigation /* 3.4 MLT - Minimal Light /* ================================================= */ :root { /* ================================================= */ /* 1.0 FOUNDATION TOKENS */ /* ================================================= */ /* --------------------------------------------- */ /* 1.1 COLORS - PALETTE */ /* --------------------------------------------- */ /* Red Scale (r1-r4) */ --cwd-c-r1: #EA2D2E; --cwd-c-r2: #6B191C; --cwd-c-r3: #380300; --cwd-c-r4: #1B0606; /* Green Scale (g1-g4) */ --cwd-c-g1: #00FFC8; --cwd-c-g2: #008064; --cwd-c-g3: #004032; --cwd-c-g4: #001406; /* Blue Scale (b1-b4) */ --cwd-c-b1: #00CFFF; --cwd-c-b2: #006880; --cwd-c-b3: #003440; --cwd-c-b4: #001419; /* Pink Scale (p1-p4) */ --cwd-c-p1: #D63168; --cwd-c-p2: #6B1935; --cwd-c-p3: #38051A; --cwd-c-p4: #1B0612; /* Yellow Scale (y1-y4) */ --cwd-c-y1: #F9B700; --cwd-c-y2: #7D5C00; --cwd-c-y3: #3E2E00; --cwd-c-y4: #1F1700; /* Purple Scale (v1-v4) - 'v' for violet */ --cwd-c-v1: #9D00DB; --cwd-c-v2: #6A04A8; --cwd-c-v3: #2B0083; --cwd-c-v4: #160042; /* Neutral Scale - Light (n0-n3) */ --cwd-c-n0: #FFFFFF; /* White */ --cwd-c-n1: #F7F8FA; /* Ultra light gray */ --cwd-c-n2: #E8EAED; /* Light gray */ --cwd-c-n3: #D1D5DB; /* Medium gray */ /* Neutral Scale - Mid (n4-n6) */ --cwd-c-n4: #9CA3AF; /* Muted gray */ --cwd-c-n5: #6B7280; /* Dark gray */ --cwd-c-n6: #374151; /* Charcoal */ /* Neutral Scale - Dark (n7-n9) */ --cwd-c-n7: #1F2937; /* Deep gray */ --cwd-c-n8: #111827; /* Near black */ --cwd-c-n9: #030712; /* Black */ /* Opacity Overlays (o10-o80) */ --cwd-c-o10: #0000001A; /* 10% */ --cwd-c-o20: #00000033; /* 20% */ --cwd-c-o50: #00000080; /* 50% */ --cwd-c-o80: #000000CC; /* 80% */ /* --------------------------------------------- */ /* 1.2 TYPOGRAPHY */ /* --------------------------------------------- */ /* Font Families (t-ff-*) */ --cwd-t-ff-dis: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Display */ --cwd-t-ff-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Base */ --cwd-t-ff-mon: 'SF Mono', 'Monaco', 'Menlo', monospace; /* Mono */ --cwd-t-ff-ser: 'Georgia', 'Times New Roman', serif; --cwd-t-ff-sys: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cwd-t-ff-inh: inherit; /* Font Sizes - Body (t-fs-*) - Fluid 320px-1440px */ --cwd-t-fs-3xs: clamp(0.625rem, 0.389rem + 0.18vw, 0.75rem); /* 8-10px */ --cwd-t-fs-2xs: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem); /* 12-14px */ --cwd-t-fs-xs: clamp(0.875rem, 0.839rem + 0.18vw, 1rem); /* 14-16px */ --cwd-t-fs-sm: clamp(1rem, 0.964rem + 0.18vw, 1.125rem); /* 16-18px */ --cwd-t-fs-md: clamp(1.125rem, 1.018rem + 0.54vw, 1.5rem); /* 18-24px */ --cwd-t-fs-lg: clamp(1.25rem, 1.107rem + 0.71vw, 1.75rem); /* 20-28px */ --cwd-t-fs-xl: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem); /* 24-36px */ /* Font Sizes - Headings (t-h*) - Fluid 320px-1440px */ --cwd-t-h1: clamp(2.5rem, 1.964rem + 2.68vw, 4.5rem); /* 40-72px */ --cwd-t-h2: clamp(2rem, 1.607rem + 1.96vw, 3.5rem); /* 32-56px */ --cwd-t-h3: clamp(1.75rem, 1.464rem + 1.43vw, 2.75rem); /* 28-44px */ --cwd-t-h4: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem); /* 24-36px */ --cwd-t-h5: clamp(1.25rem, 1.107rem + 0.71vw, 1.75rem); /* 20-28px */ --cwd-t-h6: clamp(1rem, 0.964rem + 0.18vw, 1.125rem); /* 16-18px */ /* Font Weights (t-fw-*) */ --cwd-t-fw-lt: 300; /* Light */ --cwd-t-fw-rg: 400; /* Regular */ --cwd-t-fw-md: 500; /* Medium */ --cwd-t-fw-sb: 600; /* Semibold */ --cwd-t-fw-bd: 700; /* Bold */ /* Line Heights (t-lh-*) */ --cwd-t-lh-tg: 1.2; /* Tight */ --cwd-t-lh-rg: 1.5; /* Regular */ --cwd-t-lh-rx: 1.75; /* Relaxed */ /* Letter Spacing (t-ls-*) */ --cwd-t-ls-tg: -0.025em; /* Tight */ --cwd-t-ls-rg: 0; /* Regular */ --cwd-t-ls-wd: 0.05em; /* Wide */ --cwd-t-ls-wx: 0.1em; /* Wider */ /* --------------------------------------------- */ /* 1.3 SPACING (8pt Grid) */ /* --------------------------------------------- */ --cwd-s-0: 0; --cwd-s-1: 0.25rem; /* 4px */ --cwd-s-2: 0.5rem; /* 8px */ --cwd-s-3: 0.75rem; /* 12px */ --cwd-s-4: 1rem; /* 16px */ --cwd-s-6: 1.5rem; /* 24px */ --cwd-s-8: 2rem; /* 32px */ --cwd-s-12: 3rem; /* 48px */ --cwd-s-16: 4rem; /* 64px */ --cwd-s-24: 6rem; /* 96px */ /* --------------------------------------------- */ /* 1.4 LAYOUT */ /* --------------------------------------------- */ /* Content Widths (l-w-*) */ --cwd-l-w-rd: 45rem; /* 720px - Reading */ --cwd-l-w-ct: 62.5rem; /* 1000px - Content */ --cwd-l-w-wd: 75rem; /* 1200px - Wide */ --cwd-l-w-fl: 87.5rem; /* 1400px - Full */ /* Component Widths (l-c-*) */ --cwd-l-c-in: 31.25rem; /* 500px - Input */ --cwd-l-c-md: 37.5rem; /* 600px - Modal */ --cwd-l-c-sb: 18.75rem; /* 300px - Sidebar */ /* Column Widths (l-col-*) - Fluid 320px-1440px */ --cwd-l-col-xs: clamp(3.5rem, 3.143rem + 1.79vw, 5rem); /* 56-80px */ --cwd-l-col-sm: clamp(6rem, 5.357rem + 3.21vw, 8.5rem); /* 96-136px */ --cwd-l-col-md: clamp(8.5rem, 7.321rem + 5.89vw, 13rem); /* 136-208px */ --cwd-l-col-lg: clamp(12rem, 10.071rem + 9.64vw, 20rem); /* 192-320px */ --cwd-l-col-xl: clamp(14.5rem, 11.75rem + 13.75vw, 25.5rem); /* 232-408px */ --cwd-l-col-2x: clamp(17rem, 13.214rem + 18.93vw, 32rem); /* 272-512px */ /* Table Header Widths (th-sortable-*) */ --th-sortable-xs: var(--cwd-l-col-xs); --th-sortable-sm: var(--cwd-l-col-sm); --th-sortable-md: var(--cwd-l-col-md); --th-sortable-lg: var(--cwd-l-col-lg); --th-sortable-xl: var(--cwd-l-col-xl); --th-sortable-2xl: var(--cwd-l-col-2x); /* Standard Widths (l-w-*) */ --cwd-l-w-100: 100%; /* Full width */ --cwd-l-w-90: 90%; /* 90% width */ --cwd-l-w-80: 80%; /* 80% width */ --cwd-l-w-70: 70%; /* 70% width */ --cwd-l-w-60: 60%; /* 60% width */ --cwd-l-w-50: 50%; /* 50% width */ --cwd-l-w-40: 40%; /* 40% width */ --cwd-l-w-30: 30%; /* 30% width */ --cwd-l-w-20: 20%; /* 20% width */ --cwd-l-w-10: 10%; /* 10% width */ --cwd-l-w-au: auto; /* Auto width */ /* Viewport Widths (l-vw-*) */ --cwd-l-vw-5: 5vw; --cwd-l-vw-10: 10vw; --cwd-l-vw-20: 20vw; --cwd-l-vw-30: 30vw; --cwd-l-vw-40: 40vw; --cwd-l-vw-50: 50vw; --cwd-l-vw-60: 60vw; --cwd-l-vw-70: 70vw; --cwd-l-vw-80: 80vw; --cwd-l-vw-90: 90vw; --cwd-l-vw-100: 100vw; /* Viewport Heights (l-vh-*) */ --cwd-l-vh-5: 5vh; --cwd-l-vh-10: 10vh; --cwd-l-vh-20: 20vh; --cwd-l-vh-30: 30vh; --cwd-l-vh-40: 40vh; --cwd-l-vh-50: 50vh; --cwd-l-vh-60: 60vh; --cwd-l-vh-70: 70vh; --cwd-l-vh-80: 80vh; --cwd-l-vh-90: 90vh; --cwd-l-vh-100: 100vh; /* --------------------------------------------- */ /* 1.5 BORDERS */ /* --------------------------------------------- */ /* Widths (b-w-*) */ --cwd-b-w-tn: 1px; /* Thin */ --cwd-b-w-md: 2px; /* Medium */ --cwd-b-w-tk: 4px; /* Thick */ /* Radius - Outer (b-r-*) - For outer containers */ --cwd-b-r-none: 0; --cwd-b-r-sm: 0.25rem; /* 4px */ --cwd-b-r-md: 0.5rem; /* 8px */ --cwd-b-r-lg: 0.75rem; /* 12px */ --cwd-b-r-xl: 1rem; /* 16px */ --cwd-b-r-full: 9999px; /* Circle/pill */ /* Radius - Inner (b-r-in-*) - For nested containers (sharper curves) */ --cwd-b-r-in-sm: 0.125rem; /* 2px - Inner small */ --cwd-b-r-in-md: 0.25rem; /* 4px - Inner medium */ --cwd-b-r-in-lg: 0.5rem; /* 8px - Inner large */ --cwd-b-r-in-xl: 0.75rem; /* 12px - Inner extra large */ /* Style */ --cwd-b-style: solid; /* --------------------------------------------- */ /* 1.6 SHADOWS */ /* --------------------------------------------- */ --cwd-sh-none: none; --cwd-sh-sm: 0 1px 2px 0 var(--cwd-c-o10); --cwd-sh-md: 0 4px 6px -1px var(--cwd-c-o10), 0 2px 4px -1px var(--cwd-c-o10); --cwd-sh-lg: 0 10px 15px -3px var(--cwd-c-o10), 0 4px 6px -2px var(--cwd-c-o10); --cwd-sh-xl: 0 20px 25px -5px var(--cwd-c-o10), 0 10px 10px -5px var(--cwd-c-o10); /* --------------------------------------------- */ /* 1.7 MOTION */ /* --------------------------------------------- */ /* Duration (m-d-*) */ --cwd-m-d-in: 0s; /* Instant */ --cwd-m-d-fs: 0.15s; /* Fast */ --cwd-m-d-rg: 0.3s; /* Regular */ --cwd-m-d-sl: 0.5s; /* Slow */ /* Easing (m-e-*) */ --cwd-m-e-ln: linear; --cwd-m-e-in: cubic-bezier(0.4, 0, 1, 1); --cwd-m-e-out: cubic-bezier(0, 0, 0.2, 1); --cwd-m-e-io: cubic-bezier(0.4, 0, 0.2, 1); /* Transitions (m-t-*) */ --cwd-m-t-base: all var(--cwd-m-d-rg) var(--cwd-m-e-io); --cwd-m-t-fast: all var(--cwd-m-d-fs) var(--cwd-m-e-out); /* ================================================= */ /* 2.0 COMPONENT TOKENS */ /* ================================================= */ /* --------------------------------------------- */ /* 2.1 SURFACE */ /* --------------------------------------------- */ --cwd-sf-1: var(--cwd-c-n0); /* Primary surface - Pure white */ --cwd-sf-2: var(--cwd-c-n1); /* Secondary surface - Ultra light */ --cwd-sf-3: var(--cwd-c-n2); /* Tertiary surface - Light gray */ --cwd-sf-ovr: rgba(15, 23, 42, 0.4); /* Overlay - Subtle dark */ --cwd-sf-hov: var(--cwd-c-n1); /* Hover state */ --cwd-sf-dis: var(--cwd-c-n2); /* Disabled state */ --cwd-sf-act: var(--cwd-c-n2); /* Active state */ --cwd-sf-foc: #EFF6FF; /* Focus state - Subtle blue tint */ /* --------------------------------------------- */ /* 2.2 TEXT */ /* --------------------------------------------- */ --cwd-tx-1: var(--cwd-c-n8); /* Primary text - Near black */ --cwd-tx-2: var(--cwd-c-n6); /* Secondary text - Charcoal */ --cwd-tx-3: var(--cwd-c-n5); /* Tertiary text - Dark gray */ --cwd-tx-inv: var(--cwd-c-n0); /* Inverse text - White */ /* --------------------------------------------- */ /* 2.3 INTERACTIVE */ /* --------------------------------------------- */ --cwd-ix-hov: #2563EB; /* Hover state - Vibrant blue */ --cwd-ix-act: #1D4ED8; /* Active state - Deep blue */ --cwd-ix-dis: var(--cwd-c-n3); /* Disabled state */ --cwd-ix-foc: #3B82F6; /* Focus state - Primary blue */ /* --------------------------------------------- */ /* 2.4 FEEDBACK */ /* --------------------------------------------- */ /* Error (fb-err-*) */ --cwd-fb-err-bg: #FEF2F2; --cwd-fb-err-tx: #DC2626; --cwd-fb-err-bd: #FCA5A5; /* Success (fb-succ-*) */ --cwd-fb-succ-bg: #F0FDF4; --cwd-fb-succ-tx: #16A34A; --cwd-fb-succ-bd: #86EFAC; /* Warning (fb-warn-*) */ --cwd-fb-warn-bg: #FFFBEB; --cwd-fb-warn-tx: #D97706; --cwd-fb-warn-bd: #FCD34D; /* Info (fb-info-*) */ --cwd-fb-info-bg: #EFF6FF; --cwd-fb-info-tx: #2563EB; --cwd-fb-info-bd: #93C5FD; /* ================================================= */ /* 3.0 THEMES */ /* ================================================= */ /* --------------------------------------------- */ /* 3.1 THEME: ADAPTABLE (ADP) */ /* --------------------------------------------- */ /* Surfaces */ --adp-sf-1: var(--cwd-c-n0); /* Pure white base */ --adp-sf-2: var(--cwd-c-n1); /* Subtle background */ --adp-sf-3: var(--cwd-c-n2); /* Card backgrounds */ --adp-sf-hov: #FAFBFC; /* Hover - barely visible */ /* Text */ --adp-tx-1: var(--cwd-c-n8); /* Primary - near black */ --adp-tx-2: var(--cwd-c-n6); /* Secondary - charcoal */ --adp-tx-3: var(--cwd-c-n5); /* Tertiary - muted */ /* Accents */ --adp-ac-1: #3B82F6; /* Primary - modern blue */ --adp-ac-2: #2563EB; /* Secondary - deep blue */ --adp-ac-3: #1D4ED8; /* Tertiary - rich blue */ /* Borders */ --adp-bd: var(--cwd-c-n2); /* Subtle borders */ --adp-bd-w: 1px; /* Hairline */ --adp-bd-r: var(--cwd-b-r-md); /* Gentle radius */ /* Shadows */ --adp-sh: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --adp-sh-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --adp-sh-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -2px rgba(15, 23, 42, 0.04); --adp-sh-foc: 0 0 0 3px rgba(59, 130, 246, 0.15); /* TYPOGRAPHY */ --adp-ff: var(--cwd-t-ff-base); --adp-fs: var(--cwd-t-fs-sm); --adp-fs-sm: var(--cwd-t-fs-xs); --adp-fw: 400; --adp-fw-md: 500; --adp-fw-sb: 600; --adp-fw-bd: 700; --adp-ls: -0.01em; /* Slightly tight for modern feel */ --adp-tt: none; --adp-lh: 1.6; /* COLORS - Semantic mappings */ --adp-bg-01: var(--cwd-c-n0); --adp-bg-02: var(--cwd-c-n1); --adp-bg-03: var(--cwd-c-n2); --adp-bg-hov: #FAFBFC; --adp-t-01: var(--cwd-c-n8); --adp-t-02: var(--cwd-c-n5); --adp-t-03: var(--cwd-c-n6); --adp-ac-01: #3B82F6; --adp-ac-02: #2563EB; --adp-ac-03: #1D4ED8; --adp-bd-01: var(--cwd-c-n2); --adp-bd-02: var(--cwd-c-n1); --adp-bd-03: var(--cwd-c-n3); --adp-sh-c: rgba(15, 23, 42, 0.08); /* --------------------------------------------- */ /* 3.2 THEME: CYBERPUNK (CYB) */ /* --------------------------------------------- */ /* Surfaces */ --cyb-sf-1: var(--cwd-c-b4); --cyb-sf-2: var(--cwd-c-b3); --cyb-sf-3: var(--cwd-c-b3); --cyb-sf-hov: var(--cwd-c-b2); /* Text */ --cyb-tx-1: var(--cwd-c-n0); --cyb-tx-2: var(--cwd-c-n2); /* Accents */ --cyb-ac-1: var(--cwd-c-b1); /* Primary - Cyan */ --cyb-ac-2: var(--cwd-c-y1); /* Secondary - Yellow */ --cyb-ac-3: var(--cwd-c-p1); /* Tertiary - Pink */ --cyb-ac-act: var(--cwd-c-g3); /* Active - Dark green */ /* Borders */ --cyb-bd: var(--cwd-c-g1); /* Bright green */ --cyb-bd-w: var(--cwd-b-w-tn); --cyb-bd-r: var(--cwd-b-r-none); /* Feedback */ --cyb-fb-err-bg: var(--cwd-c-r2); --cyb-fb-err-tx: var(--cwd-c-r1); --cyb-fb-err-bd: var(--cwd-c-r3); --cyb-fb-succ-bg: var(--cwd-c-g2); --cyb-fb-succ-tx: var(--cwd-c-g1); --cyb-fb-succ-bd: var(--cwd-c-g4); --cyb-fb-warn-bg: var(--cwd-c-y2); --cyb-fb-warn-tx: var(--cwd-c-y1); --cyb-fb-warn-bd: var(--cwd-c-y3); --cyb-fb-info-bg: var(--cwd-c-b2); --cyb-fb-info-tx: var(--cwd-c-b1); --cyb-fb-info-bd: var(--cwd-c-b3); /* Shadows */ --cyb-sh: var(--cwd-sh-none); --cyb-sh-foc: var(--cwd-sh-none); /* TYPOGRAPHY */ --cyb-fs: inherit; --cyb-fs-sm: inherit; --cyb-fw: 400; --cyb-fw-sb: 600; --cyb-fw-bd: 700; --cyb-ls: normal; --cyb-tt: none; /* BACKGROUNDS */ --cyb-bg-01: var(--cwd-c-b4); --cyb-bg-02: var(--cwd-c-b3); --cyb-bg-03: var(--cwd-c-b3); --cyb-bg-hov: var(--cwd-c-b2); /* CONTENT COLORS */ --cyb-t-01: var(--cwd-c-n0); --cyb-t-02: var(--cwd-c-n2); --cyb-ac-01: var(--cwd-c-b1); --cyb-ac-02: var(--cwd-c-y1); --cyb-ac-03: var(--cwd-c-p1); --cyb-ac-04: var(--cwd-c-g3); --cyb-bd-01: var(--cwd-c-g1); /* COLORS - FUNCTIONAL (legacy compatibility) */ --cyb-err-bg: var(--cwd-c-r2); --cyb-err-tx: var(--cwd-c-r1); --cyb-err-bd: var(--cwd-c-r3); --cyb-info-bg: var(--cwd-c-b2); --cyb-info-tx: var(--cwd-c-b1); --cyb-info-bd: var(--cwd-c-b3); --cyb-succ-bg: var(--cwd-c-g2); --cyb-succ-tx: var(--cwd-c-g1); --cyb-succ-bd: var(--cwd-c-g4); --cyb-warn-bg: var(--cwd-c-y2); --cyb-warn-tx: var(--cwd-c-y1); --cyb-warn-bd: var(--cwd-c-y3); /* --------------------------------------------- */ /* 3.3 THEME: INVESTIGATION (INV) */ /* --------------------------------------------- */ /* Surfaces */ --inv-sf-1: #1e1e1e; --inv-sf-2: #2d2d2d; --inv-sf-3: #3a3a3a; --inv-sf-hov: #2d2d2d; /* Text */ --inv-tx-1: #e0e0e0; --inv-tx-2: #c0c0c0; --inv-tx-3: #a0a0a0; --inv-tx-ph: #707070; /* Placeholder */ /* Accents */ --inv-ac-1: #d4af37; /* Gold */ --inv-ac-2: #b8941f; /* Dark gold */ /* Borders */ --inv-bd: #4a4a4a; --inv-bd-w: var(--cwd-b-w-tn); --inv-bd-r: var(--cwd-b-r-sm); /* Feedback */ --inv-fb-err-bg: #3a1416; --inv-fb-err-tx: #ff6b6b; --inv-fb-err-bd: #ff6b6b; /* Shadows */ --inv-sh: var(--cwd-sh-none); --inv-sh-foc: var(--cwd-sh-none); /* Typography */ --inv-t-ls: 0.5px; --inv-t-ls-wd: 1px; --inv-t-tx: uppercase; /* TYPOGRAPHY */ --inv-fs: var(--cwd-t-fs-xs); --inv-fs-sm: var(--cwd-t-fs-2xs); --inv-fw: 400; --inv-fw-sb: 600; --inv-fw-bd: 700; --inv-ls: 0.5px; --inv-ls-wd: 1px; --inv-tt: uppercase; /* COLORS */ --inv-bg-01: #1e1e1e; --inv-bg-02: #2d2d2d; --inv-bg-03: #3a3a3a; --inv-bg-hov: #2d2d2d; --inv-t-01: #e0e0e0; --inv-t-02: #c0c0c0; --inv-t-03: #a0a0a0; --inv-ac-01: #d4af37; --inv-ac-02: #b8941f; --inv-bd-01: #4a4a4a; --inv-sh-c: #000000; --inv-err-bg: #3a1416; --inv-err-tx: #ff6b6b; --inv-err-bd: #ff6b6b; /* --------------------------------------------- */ /* 3.4 THEME: MINIMAL LIGHT (MLT) */ /* --------------------------------------------- */ /* Surfaces */ --mlt-sf-1: #ffffff; --mlt-sf-2: #f8f9fa; --mlt-sf-3: #e9ecef; --mlt-sf-hov: #f8f9fa; /* Text */ --mlt-tx-1: #212529; --mlt-tx-2: #495057; --mlt-tx-3: #6c757d; --mlt-tx-ph: #6c757d; /* Accents */ --mlt-ac-1: #0073aa; --mlt-ac-2: #005a87; /* Borders */ --mlt-bd-1: #dee2e6; --mlt-bd-2: #ced4da; --mlt-bd-3: #f1f3f5; --mlt-bd-w: var(--cwd-b-w-tn); --mlt-bd-r: var(--cwd-b-r-none); /* Feedback */ --mlt-fb-err-bg: #fff5f5; --mlt-fb-err-tx: #c53030; --mlt-fb-err-bd: #feb2b2; /* Shadows */ --mlt-sh: var(--cwd-sh-none); --mlt-sh-foc: var(--cwd-sh-none); /* TYPOGRAPHY */ --mlt-fs: var(--cwd-t-fs-sm); --mlt-fs-sm: var(--cwd-t-fs-xs); --mlt-fw: 400; --mlt-fw-sb: 600; --mlt-fw-bd: 600; --mlt-ls: normal; --mlt-tt: none; /* COLORS */ --mlt-bg-01: #ffffff; --mlt-bg-02: #f8f9fa; --mlt-bg-03: #e9ecef; --mlt-bg-hov: #f8f9fa; --mlt-t-01: #212529; --mlt-t-02: #495057; --mlt-t-03: #6c757d; --mlt-ac-01: #0073aa; --mlt-ac-02: #005a87; --mlt-bd-01: #dee2e6; --mlt-bd-02: #ced4da; --mlt-bd-03: #f1f3f5; --mlt-sh-c: #000000; --mlt-err-bg: #fff5f5; --mlt-err-tx: #c53030; --mlt-err-bd: #feb2b2; } /* ================================================= */ /* END DESIGN SYSTEM */ /* ================================================= */