/* ========================================================================== DAYANA — Design Tokens Single source of truth for color. The dark theme (/op2) only needs `data-theme="dark"` on ; every component reads these variables. ========================================================================== */ :root { /* Brand */ --c-primary: #2b3a98; /* Deep navy — headings, dark bands, footer */ --c-secondary: #1b65b8; /* Mid blue — hover states, icon fills, links */ --c-accent: #0b8ed7; /* Electric blue — primary CTA, active states */ --c-neutral: #6d6e70; /* Grey — captions, meta, dividers */ /* Text */ --c-heading: #161d4f; --c-body: #454a5e; --c-muted: #6d6e70; /* Surfaces (alternate per section — never one flat background) */ --c-bg: #ffffff; --c-bg-alt: #f3f5fa; --c-bg-tint: #e9eef8; --c-bg-deep: #1f2b7e; /* Angled dark band */ --c-bg-deeper: #141b52; /* Footer */ --c-card: #ffffff; --c-card-dark: rgba(255, 255, 255, 0.06); /* Lines */ --c-border: #dfe3ee; --c-border-dark: rgba(255, 255, 255, 0.14); /* On-dark text */ --c-on-dark: #ffffff; --c-on-dark-muted: rgba(255, 255, 255, 0.74); /* Buttons */ --btn-primary-bg: var(--c-accent); --btn-primary-fg: #ffffff; --btn-primary-hover-bg: var(--c-primary); --btn-ghost-fg: var(--c-primary); --btn-ghost-border: var(--c-primary); /* Logo treatment (footer uses --logo-filter-dark) */ --logo-filter: none; --logo-filter-dark: brightness(0) invert(1); /* Decorative */ --hero-gradient: linear-gradient(135deg, #1a2670 0%, #2b3a98 55%, #1b65b8 100%); --stripe-color: rgba(255, 255, 255, 0.05); --glow-color: rgba(11, 142, 215, 0.35); color-scheme: light; } /* -------------------------------------------------------------------------- Dark theme — activated by (used by /op2 copies) -------------------------------------------------------------------------- */ [data-theme="dark"] { --c-heading: #f2f4fb; --c-body: #c3c8dc; --c-muted: #8f94a8; --c-bg: #0e1233; --c-bg-alt: #131847; --c-bg-tint: #1a2059; --c-bg-deep: #0a0d28; --c-bg-deeper: #070a1f; --c-card: #171d55; --c-card-dark: rgba(255, 255, 255, 0.05); --c-border: rgba(255, 255, 255, 0.12); --c-border-dark: rgba(255, 255, 255, 0.12); --btn-primary-hover-bg: var(--c-secondary); --btn-ghost-fg: #ffffff; --btn-ghost-border: rgba(255, 255, 255, 0.6); --logo-filter: brightness(0) invert(1); --hero-gradient: linear-gradient(135deg, #0a0d28 0%, #151c5c 60%, #1b65b8 100%); --stripe-color: rgba(255, 255, 255, 0.04); color-scheme: dark; }