/* Hero secondary text: theme-specific color only */ html[data-theme="light"] .hero-secondary { color: var(--text); } @media (prefers-color-scheme: light) { html:not([data-theme]) .hero-secondary, html[data-theme="system"] .hero-secondary { color: var(--text); } } html[data-theme="dark"] .hero-secondary { color: var(--text); } /* Light theme highlight block for hero sections */ html[data-theme="light"] .hero-highlight { background: color-mix(in oklab, var(--surface-alt) 85%, var(--surface) 15%); border: 1px solid var(--border); color: var(--text); padding: 0.75rem 1rem; border-radius: 10px; box-shadow: 0 6px 16px color-mix(in oklab, var(--bg) 10%, transparent 90%); position: relative; } html[data-theme="light"] .hero-highlight::before { content: ""; position: absolute; top: 4px; left: 12px; right: 12px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 200, 100, 0.8), rgba(255, 180, 70, 0.45), rgba(255, 220, 130, 0.8)); opacity: 0.18; pointer-events: none; } @media (prefers-color-scheme: light) { html:not([data-theme]) .hero-highlight, html[data-theme="system"] .hero-highlight { background: color-mix(in oklab, var(--surface-alt) 85%, var(--surface) 15%); border: 1px solid var(--border); color: var(--text); padding: 0.75rem 1rem; border-radius: 10px; box-shadow: 0 6px 16px color-mix(in oklab, var(--bg) 10%, transparent 90%); position: relative; } html:not([data-theme]) .hero-highlight::before, html[data-theme="system"] .hero-highlight::before { content: ""; position: absolute; top: 4px; left: 12px; right: 12px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 200, 100, 0.8), rgba(255, 180, 70, 0.45), rgba(255, 220, 130, 0.8)); opacity: 0.18; pointer-events: none; } } /* APS Light Theme (clean, accessible) - Warm-light palette - Works for system light and explicit light - Scoped with html[data-theme] and prefers-color-scheme */ /* Using centralized variables from themes/variables.css */ /* 1) System light (no explicit theme OR data-theme="system") */ @media (prefers-color-scheme: light) { html:not([data-theme]), html[data-theme="system"] { background-color: var(--bg); color: var(--text); } html:not([data-theme]) body, html[data-theme="system"] body { background-color: var(--bg); color: var(--text); } /* Content container */ html:not([data-theme]) .content, html[data-theme="system"] .content { background-color: var(--surface); } /* Info cards */ html:not([data-theme]) .info-card, html[data-theme="system"] .info-card { background: linear-gradient(180deg, var(--card-gradient-top), var(--card-gradient-bottom)); border: 1px solid var(--card-border); box-shadow: var(--surface-alt); color: var(--text); } /* Tables */ html:not([data-theme]) table, html[data-theme="system"] table { color: var(--text); } html:not([data-theme]) .todo-table th, html[data-theme="system"] .todo-table th, html:not([data-theme]) .birthday-table th, html[data-theme="system"] .birthday-table th { color: var(--light-text); } } @media (prefers-color-scheme: light) { html:not([data-theme]) table, html[data-theme="system"] table { color: var(--light-text); } } /* 2) Explicit light override */ html[data-theme="light"], html[data-theme="light"] body { background-color: var(--bg); color: var(--text); } html[data-theme="light"] .content { background-color: var(--surface); } html[data-theme="light"] .info-card { background: linear-gradient(180deg, var(--card-gradient-top), var(--card-gradient-bottom)); border: 1px solid var(--card-border); color: var(--text); box-shadow: 0 8px 8px rgba(0, 0, 0, 0.05); } html[data-theme="light"] .muted-text { color: var(--text-muted); } /* Tables */ html[data-theme="light"] .todo-table, html[data-theme="light"] .birthday-table { background: var(--surface); border-color: var(--border); color: var(--light-text); background: var(--light-surface); } /* Inputs */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: var(--surface-alt2); color: var(--text); border-color: var(--border); } /* Light theme registry CTA */ html[data-theme="light"] .hero-register { background: linear-gradient(135deg, rgba(96, 250, 186, 0.25) 0%, rgba(112, 219, 165, 0.15) 100%); border-color: rgba(96, 250, 186, 0.4); color: #1eaf66; box-shadow: 0 0 20px rgba(96, 250, 186, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.5); } html[data-theme="light"] .hero-register:hover { background: linear-gradient(135deg, rgba(96, 250, 186, 0.18) 0%, rgba(112, 219, 165, 0.12) 100%); border-color: rgba(96, 250, 186, 0.6); box-shadow: 0 0 30px rgba(96, 250, 186, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.6); color: #1e8a5d; } @media (prefers-color-scheme: light) { html:not([data-theme]) .hero-register, html[data-theme="system"] .hero-register { background: linear-gradient(135deg, rgba(96, 250, 186, 0.18) 0%, rgba(112, 219, 165, 0.12) 100%); border-color: rgba(96, 250, 186, 0.6); box-shadow: 0 0 30px rgba(96, 250, 186, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.6); color: #1e8a5d; } html:not([data-theme]) .hero-register:hover, html[data-theme="system"] .hero-register:hover { background: linear-gradient(135deg, rgba(96, 250, 186, 0.18) 0%, rgba(112, 219, 165, 0.12) 100%); border-color: rgba(96, 250, 186, 0.6); box-shadow: 0 0 30px rgba(96, 250, 186, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.6); color: #1e8a5d; } } /* 3) Explicit dark safety (leave existing dark styles mostly to main.css) */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: rgb(16, 16, 16); color: ivory; }