/* ============================================================ PYRATZ CORP - COLOR TOKENS Dual light/dark system. LIGHT is primary: cool-white, airy, high-contrast institutional surfaces. DARK (glass-blue) is the secondary, cinematic world - opt in with class="pz-dark" (hero interludes, product UI, gravitas moments). A single primary accent (aqua) + a warm secondary (coral). ============================================================ */ :root { /* ============================================================ RAW PALETTE (values only - never change meaning, just here) ============================================================ */ /* ---- Light world: cool white ---- */ --pz-page: #F1F5F9; /* primary light surface (page) */ --pz-card: #FFFFFF; /* raised card on light */ --pz-mute: #E6ECF2; /* inset / recessed on light */ --pz-paper: #F4F3EE; /* warm paper (reports/decks only) */ --pz-ink: #0E1E30; /* primary text / logo on light */ --pz-ink-2: #56616B; /* body text on light */ --pz-ink-3: #76828F; /* muted text on light */ --pz-ink-faint: #9AA6B2; /* captions / disabled on light */ /* ---- Dark world: glass blue ---- */ --pz-base: #11233A; /* primary dark surface (base) */ --pz-raised: #16293F; /* raised solid surface */ --pz-inset: #0E1E30; /* inset / recessed */ --pz-deep: #0B1828; /* deepest recess (nav/footer) */ --pz-midnight: #0E1E30; /* gradient endpoint (deep) */ --pz-twilight: #14283F; /* gradient endpoint (raised) */ --pz-mist: #E8ECF1; /* text / logo on dark */ --pz-bright: #F4F8FC; /* headlines on dark */ --pz-fog: #ABB8C8; /* body text on dark (brighter) */ --pz-haze: #BBC8D6; /* kicker / nav text on dark */ --pz-muted: #A6B4C5; /* secondary text on dark (brighter)*/ --pz-faint: #8695A8; /* mono captions / disabled (dark) */ /* Legacy aliases - keep older references resolving. */ --pz-steel: var(--pz-base); --pz-slate: var(--pz-raised); --pz-gunmetal: var(--pz-inset); --pz-void: var(--pz-base); --pz-panel: var(--pz-raised); --pz-panel-2: var(--pz-inset); /* ---- Accents ---- Two forms: a FILL value (bright aqua / coral, sits behind dark ink) and a light-safe TEXT value (deeper, for rules/links/labels that must hold contrast on white). The dark scope re-points the TEXT value back to the bright accent. */ --pz-accent: #3CDFC4; /* electric aqua - PRIMARY fill */ --pz-accent-deep: #0FB295; /* aqua, light-safe for text/rule */ --pz-accent-ink: #07140F; /* text that sits ON aqua fill */ --pz-coral: #FF7D5E; /* warm coral - SECONDARY fill */ --pz-coral-deep: #E55A38; /* coral, light-safe for text */ --pz-coral-ink: #2A0E06; /* text that sits ON coral fill */ --pz-signal: #5B8CFF; /* signal blue (status/links) */ --pz-gold: #C9A24A; /* alt accent */ --pz-red: #E5533D; /* DANGER / destructive only */ --pz-green: #0FB295; /* positive */ /* Secondary accent token - swap this one line to re-point. */ --pz-accent-2: var(--pz-coral); --pz-accent-2-deep: var(--pz-coral-deep); --pz-accent-2-ink: var(--pz-coral-ink); /* ---- Gradient text ---- Headline fill that follows the background gradient. Two tunings: DARK rides the SharpLink mesh (white -> aqua -> signal blue); LIGHT stays high-contrast and readable (ink -> deep blue -> deep aqua). */ --grad-text-dark: linear-gradient(118deg, #FFFFFF 0%, #CFEFE7 34%, #7FB2FF 72%, #5B8CFF 100%); /* @kind other */ --grad-text-light: linear-gradient(116deg, #0E1E30 0%, #16406B 62%, #0FB295 100%); /* @kind other */ /* ---- Glass surfaces (used in the dark scope / over mesh) ---- */ --pz-glass-fill: rgba(216, 232, 252, 0.06); --pz-glass-strong: rgba(216, 232, 252, 0.10); --pz-glass-border: rgba(216, 232, 252, 0.14); --pz-glass-blur: blur(14px); /* @kind other */ --pz-sheen: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 26%); /* @kind other */ /* ---- Hairlines on dark ---- */ --pz-line: rgba(216, 232, 252, 0.10); --pz-line-strong: rgba(216, 232, 252, 0.14); --pz-line-soft: rgba(216, 232, 252, 0.20); --pz-fill-soft: rgba(216, 232, 252, 0.03); --pz-fill-hover: rgba(216, 232, 252, 0.07); /* ---- Hairlines on light (ink-tinted, never pure grey) ---- */ --pz-line-ink: rgba(14, 30, 48, 0.10); --pz-line-ink-strong: rgba(14, 30, 48, 0.16); --pz-line-ink-soft: rgba(14, 30, 48, 0.20); --pz-ink-muted: #56616B; /* legacy alias of --pz-ink-2 */ /* ============================================================ SEMANTIC ALIASES - DEFAULT = LIGHT (primary world). Components reference these; opt into dark with .pz-dark. ============================================================ */ --surface-base: var(--pz-page); --surface-raised: var(--pz-card); --surface-inset: var(--pz-mute); --surface-tint: rgba(14, 30, 48, 0.02); --surface-glass: #FFFFFF; --text-strong: var(--pz-ink); --text-body: var(--pz-ink-2); --text-muted: var(--pz-ink-3); --text-kicker: var(--pz-ink-2); --text-faint: var(--pz-ink-faint); --accent: var(--pz-accent); /* fill (bright) */ --accent-ink: var(--pz-accent-ink); --accent-text: var(--pz-accent-deep); /* text/rule (deep) */ --accent-2: var(--pz-accent-2); --accent-2-ink: var(--pz-accent-2-ink); --accent-2-text: var(--pz-accent-2-deep); --grad-text: var(--grad-text-light); /* default = light tuning */ --border-divider: var(--pz-line-ink); --border-card: var(--pz-line-ink); --border-control: var(--pz-line-ink-soft); --fill-control: rgba(14, 30, 48, 0.02); --fill-hover: rgba(14, 30, 48, 0.04); } /* ============================================================ DARK scope - the glass-blue secondary world. Apply class="pz-dark" to any container (hero interlude, product UI, footer) to flip the semantic aliases to dark. ============================================================ */ .pz-dark { --surface-base: var(--pz-base); --surface-raised: var(--pz-raised); --surface-inset: var(--pz-inset); --surface-tint: var(--pz-fill-soft); --surface-glass: var(--pz-glass-fill); --text-strong: var(--pz-bright); --text-body: var(--pz-fog); --text-muted: var(--pz-muted); --text-kicker: var(--pz-haze); --text-faint: var(--pz-faint); --accent-text: var(--pz-accent); /* bright aqua reads on dark */ --accent-2-text: var(--pz-accent-2); --grad-text: var(--grad-text-dark); /* dark rides the mesh */ --border-divider: var(--pz-line); --border-card: var(--pz-line-strong); --border-control: var(--pz-line-soft); --fill-control: var(--pz-fill-soft); --fill-hover: var(--pz-fill-hover); } /* ---- Warm Paper scope (reports, decks, regulatory docs) ---- Light, but warm paper instead of cool white. */ .pz-paper { --surface-base: var(--pz-paper); --surface-raised: #FFFFFF; --surface-inset: #EDEBE3; }