/* ======================================================================== DNSai Core Palette — CSS Custom Properties ======================================================================== Version: 2.0 Updated: 2026-03-02 Default: Dark Mode ======================================================================== Usage: Link this file in before any component styles. All colors reference these variables so changing a value here propagates everywhere automatically. ======================================================================== */ /* ======================================================================== 1. BRAND IDENTITY ======================================================================== */ :root { /* Primary brand colors */ --brand-cyan: #26c4ff; --brand-blue: #0054ff; /* Brand gradients */ --brand-gradient: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); --brand-gradient-hover: linear-gradient(90deg, #0048d4 0%, #007aff 100%); --btn-secondary-gradient: linear-gradient(to bottom, #0054FF, #0447D3); /* Glow colors (used in drop-shadows and box-shadows) */ --glow-primary: #26B6FE; --glow-secondary: #0054FF; } /* ======================================================================== 2. STATUS & SEMANTIC COLORS (mode-independent) ======================================================================== */ :root { --color-success: #00c853; --color-warning: #ffab00; --color-error: #ff1744; --color-info: #40a8ff; --color-disabled-bg: #5a5a5a; --color-disabled-text: #999999; } /* ======================================================================== 3. DATA VISUALIZATION (mode-independent) ======================================================================== */ :root { --data-pink: #FC6FCF; --data-steel: #97B8D5; --data-gold: #D3D212; --data-header: #40a8ff; } /* ======================================================================== 4. DNS RECORD-TYPE COLORS (mode-independent) ======================================================================== Each DNS record type gets its own accent color so records are visually distinct when listed together. Applied to the type label, left-border accent stripe, and bottom-border on the section header. ======================================================================== */ :root { /* ── Core Types ── */ --dns-a: #26c4ff; /* A — IPv4 Address */ --dns-aaaa: #7c3aed; /* AAAA — IPv6 Address */ --dns-cname: #06b6d4; /* CNAME — Canonical Name */ --dns-mx: #10b981; /* MX — Mail Exchange */ --dns-txt: #f59e0b; /* TXT — Text */ --dns-ns: #3b82f6; /* NS — Name Server */ --dns-soa: #6366f1; /* SOA — Start of Authority */ --dns-srv: #14b8a6; /* SRV — Service Locator */ --dns-ptr: #f97316; /* PTR — Pointer / Reverse */ --dns-caa: #ef4444; /* CAA — Cert Authority Auth */ /* ── Email / Authentication ── */ --dns-spf: #f59e0b; /* SPF */ --dns-dmarc: #ec4899; /* DMARC */ --dns-dkim: #22c55e; /* DKIM */ --dns-bimi: #8b5cf6; /* BIMI */ --dns-email-gw: #10b981; /* Email Gateway */ /* ── Modern / Service ── */ --dns-https: #a855f7; /* HTTPS */ --dns-svcb: #9333ea; /* SVCB */ --dns-uri: #06b6d4; /* URI */ --dns-naptr: #0891b2; /* NAPTR */ --dns-dname: #22d3ee; /* DNAME */ /* ── DNSSEC ── */ --dns-dnskey: #4f46e5; /* DNSKEY */ --dns-ds: #6366f1; /* DS */ --dns-rrsig: #818cf8; /* RRSIG */ --dns-nsec: #a5b4fc; /* NSEC */ --dns-nsec3: #c7d2fe; /* NSEC3 */ --dns-cds: #4f46e5; /* CDS */ --dns-cdnskey: #6366f1; /* CDNSKEY */ --dns-zonemd: #818cf8; /* ZONEMD */ /* ── Security / Key ── */ --dns-tlsa: #fb923c; /* TLSA */ --dns-sshfp: #fdba74; /* SSHFP */ --dns-ipseckey: #f97316; /* IPSECKEY */ --dns-openpgpkey: #fb923c; /* OPENPGPKEY */ --dns-smimea: #fdba74; /* SMIMEA */ /* ── Geo / Location ── */ --dns-loc: #059669; /* LOC */ --dns-apl: #10b981; /* APL */ --dns-hip: #34d399; /* HIP */ --dns-csync: #6ee7b7; /* CSYNC */ /* ── Geo Metadata ── */ --dns-geo-country: #0ea5e9; --dns-geo-city: #38bdf8; --dns-geo-region: #7dd3fc; --dns-geo-lat: #06b6d4; --dns-geo-lon: #22d3ee; /* ── Data / Meta ── */ --dns-mx-host-ip: #10b981; --dns-mx-host-asn: #34d399; --dns-mx-host-loc: #059669; --dns-a-asn: #3b82f6; --dns-a-ip-loc: #60a5fa; --dns-tech: #6366f1; --dns-timestamp: #6b7280; --dns-domain: #ffffff; --dns-default: #9ca3af; } /* ======================================================================== 5. DARK MODE (default) ======================================================================== Applied to :root and [data-theme="dark"]. Because dark is the default, these values are present even when no data-theme attribute exists. ======================================================================== */ :root, [data-theme="dark"] { /* Backgrounds */ --bg-body: #000000; --bg-section: #111111; --bg-surface: #1a1a1a; --bg-card: #222222; --bg-input: #1a1a1a; --bg-footer: #191919; --bg-overlay: rgba(0, 0, 0, 0.6); --bg-modal-overlay: rgba(8, 34, 67, 0.5); --bg-feature-card: linear-gradient(135deg, #0a2a54 0%, #104a8a 100%); --bg-dark-card: linear-gradient(to bottom, #1f1f1f, #191919); --bg-hero-overlay: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); --bg-dropdown: linear-gradient(135deg, #191919 0%, #333333 100%); /* Text */ --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --text-dimmed: #888888; --text-placeholder: #666666; /* Borders */ --border-default: #333333; --border-emphasis: #555555; --border-input: #333333; --border-focus: #26c4ff; /* Links & Accent */ --accent: var(--brand-cyan); --link: var(--brand-cyan); --link-content: #40a8ff; /* Focus rings & glows */ --focus-ring: rgba(38, 196, 255, 0.3); --card-hover-glow: 0 4px 15px rgba(0, 84, 255, 0.4); --card-shadow: none; --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --input-focus-glow: 0 0 0 3px rgba(38, 196, 255, 0.3); /* Nav */ --nav-bg-top: rgba(0, 0, 0, 0); --nav-bg-scrolled: rgba(0, 0, 0, 0.95); --nav-blur-scrolled: 10px; --nav-shadow-scrolled: 0 2px 12px rgba(0, 0, 0, 0.3); --nav-link: #ffffff; --nav-link-hover: #26c4ff; --nav-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Flyout */ --flyout-bg: #1a1a1a; --flyout-border: 1px solid rgba(255, 255, 255, 0.1); --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.8); --flyout-link: #ffffff; --flyout-link-hover-bg: rgba(38, 196, 255, 0.12); --flyout-link-hover: #26c4ff; --flyout-section-header: #26c4ff; --flyout-close: #999999; --flyout-close-hover: #ffffff; /* Buttons — Outline / Ghost */ --btn-outline-text: #26c4ff; --btn-outline-border: #26c4ff; --btn-outline-hover-bg: rgba(38, 196, 255, 0.1); /* DNS Button (pill) */ --dns-btn-text: #ffffff; --dns-btn-border: #ffffff; --dns-btn-hover-bg: #ffffff; --dns-btn-hover-text: #000000; /* Code blocks */ --code-text: #26c4ff; --code-bg: #1a1a1a; /* Mode toggle track */ --toggle-track: #666666; --toggle-track-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Error box */ --error-bg: #2a0f0f; --error-border: #602b2b; --error-text: #ffd6d6; /* Notification */ --notification-bg: #0F1926; --notification-border: #97B8D5; } /* ======================================================================== 6. LIGHT MODE ======================================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-body: #ffffff; --bg-section: #f1f1f1; --bg-surface: #f9f9f9; --bg-card: #f9f9f9; --bg-input: #ffffff; --bg-footer: #E6E6E6; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-modal-overlay: rgba(8, 34, 67, 0.3); --bg-dropdown: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); /* Text */ --text-primary: #000000; --text-secondary: #282828; --text-muted: #555555; --text-dimmed: #666666; --text-placeholder: #999999; /* Borders */ --border-default: #cccccc; --border-emphasis: #e5e5e5; --border-input: #cccccc; --border-focus: #0054ff; /* Links & Accent */ --accent: var(--brand-blue); --link: var(--brand-blue); --link-content: #0054ff; /* Focus rings & shadows */ --focus-ring: rgba(0, 84, 255, 0.2); --card-hover-glow: none; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --input-focus-glow: 0 0 0 3px rgba(0, 84, 255, 0.2); /* Nav */ --nav-bg-top: rgba(255, 255, 255, 1); --nav-bg-scrolled: rgba(255, 255, 255, 1); --nav-blur-scrolled: 10px; --nav-shadow-scrolled: 0 2px 8px rgba(0, 0, 0, 0.1); --nav-link: #000000; --nav-link-hover: #0054ff; --nav-text-shadow: none; /* Flyout */ --flyout-bg: #ffffff; --flyout-border: 1px solid rgba(0, 0, 0, 0.12); --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); --flyout-link: #1a1a1a; --flyout-link-hover-bg: rgba(0, 84, 255, 0.08); --flyout-link-hover: #0054ff; --flyout-section-header: #0054ff; --flyout-close: #666666; --flyout-close-hover: #1a1a1a; /* Buttons — Outline / Ghost */ --btn-outline-text: #0054ff; --btn-outline-border: #0054ff; --btn-outline-hover-bg: rgba(0, 84, 255, 0.1); /* DNS Button (pill) */ --dns-btn-text: #000000; --dns-btn-border: #000000; --dns-btn-hover-bg: #000000; --dns-btn-hover-text: #ffffff; /* Code blocks */ --code-text: #0054ff; --code-bg: #f1f1f1; /* Mode toggle track */ --toggle-track: #999999; --toggle-track-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Error box */ --error-bg: #ffe6e6; --error-border: #d4a0a0; --error-text: #8b0000; /* Notification */ --notification-bg: #f0f4f8; --notification-border: #97B8D5; } /* ======================================================================== 7. UTILITY CLASSES ======================================================================== */ /* Apply brand gradient text */ .text-brand-gradient { background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Status badge helpers */ .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .text-info { color: var(--color-info); } .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-error { background-color: var(--color-error); } .bg-info { background-color: var(--color-info); } /* DNS record type label colors — apply to record-type header element */ .dns-type-a { color: var(--dns-a); } .dns-type-aaaa { color: var(--dns-aaaa); } .dns-type-cname { color: var(--dns-cname); } .dns-type-mx { color: var(--dns-mx); } .dns-type-txt { color: var(--dns-txt); } .dns-type-ns { color: var(--dns-ns); } .dns-type-soa { color: var(--dns-soa); } .dns-type-srv { color: var(--dns-srv); } .dns-type-ptr { color: var(--dns-ptr); } .dns-type-caa { color: var(--dns-caa); } .dns-type-spf { color: var(--dns-spf); } .dns-type-dmarc { color: var(--dns-dmarc); } .dns-type-dkim { color: var(--dns-dkim); } .dns-type-bimi { color: var(--dns-bimi); } .dns-type-https { color: var(--dns-https); } .dns-type-svcb { color: var(--dns-svcb); } .dns-type-uri { color: var(--dns-uri); } .dns-type-naptr { color: var(--dns-naptr); } .dns-type-dname { color: var(--dns-dname); } .dns-type-dnskey { color: var(--dns-dnskey); } .dns-type-ds { color: var(--dns-ds); } .dns-type-rrsig { color: var(--dns-rrsig); } .dns-type-nsec { color: var(--dns-nsec); } .dns-type-nsec3 { color: var(--dns-nsec3); } .dns-type-tlsa { color: var(--dns-tlsa); } .dns-type-sshfp { color: var(--dns-sshfp); } .dns-type-loc { color: var(--dns-loc); } /* DNS record type left-border accent stripe (3px left border) */ .dns-border-a { border-left: 3px solid var(--dns-a); } .dns-border-aaaa { border-left: 3px solid var(--dns-aaaa); } .dns-border-cname { border-left: 3px solid var(--dns-cname); } .dns-border-mx { border-left: 3px solid var(--dns-mx); } .dns-border-txt { border-left: 3px solid var(--dns-txt); } .dns-border-ns { border-left: 3px solid var(--dns-ns); } .dns-border-soa { border-left: 3px solid var(--dns-soa); } .dns-border-srv { border-left: 3px solid var(--dns-srv); } .dns-border-ptr { border-left: 3px solid var(--dns-ptr); } .dns-border-caa { border-left: 3px solid var(--dns-caa); } .dns-border-spf { border-left: 3px solid var(--dns-spf); } .dns-border-dmarc { border-left: 3px solid var(--dns-dmarc); } .dns-border-dkim { border-left: 3px solid var(--dns-dkim); } .dns-border-bimi { border-left: 3px solid var(--dns-bimi); } .dns-border-https { border-left: 3px solid var(--dns-https); } .dns-border-svcb { border-left: 3px solid var(--dns-svcb); } .dns-border-dnskey { border-left: 3px solid var(--dns-dnskey); } .dns-border-ds { border-left: 3px solid var(--dns-ds); } .dns-border-tlsa { border-left: 3px solid var(--dns-tlsa); } .dns-border-loc { border-left: 3px solid var(--dns-loc); }