/* ==========================================================================
sunny.css — Ops & Systems design system, "sunny" theme variant
github.com/steveneedham/design-system
A bright, bold treatment of the design system for exceptional occasions
and special edition runs. Inverts the dark theme to a light, warm
background with vibrant amber as the primary accent.
This is a TOKEN-OVERRIDE + COMPONENT-OVERRIDE file. Every component
rule in styles.css (.nav, .hero, .stop, .footer, etc.) already reads
color through the base tokens (--ink, --text, --amber, --teal, ...).
Overriding the token layer here re-skins the whole site. Component-
specific rules add visual enhancements (2px borders, gradients, shadows)
that define the sunny aesthetic.
USAGE
-----
1. Load AFTER styles.css:
2. Opt in per-page/per-element with data-theme="sunny" attribute
(recommended on so it wins the cascade everywhere):
3. Optional theme toggle (vanilla JS):
document.documentElement.setAttribute('data-theme', 'sunny');
// to revert: document.documentElement.removeAttribute('data-theme');
DESIGN NOTES
------------
- Base colors are warm and light: cream ink (#FDF8F0), warm beige panels
(#FBF5ED), dark brown text (#1F1810) for max contrast on light surfaces.
- Amber (#F4A538) is the bright, energetic primary accent.
Teal (#2BA4A8) is the secondary accent (sys/technical).
- All key components use 2px borders in the accent colors for visual
boldness and clarity.
- Shadows use warm amber tint (rgba(244, 165, 56, 0.1)) to complement
the bright theme.
- Hero sections include a gradient background (135deg amber fade) with
subtle radial glow for depth and visual impact.
========================================================================== */
:root[data-theme="sunny"] {
/* Surfaces */
--ink: #FDF8F0; /* warm cream, page background */
--panel: #FBF5ED; /* light cream, component background */
--panel-line: #EBE4DA; /* warm beige, borders/dividers */
/* Text */
--text: #1F1810; /* very dark brown, primary text */
--muted: #8B8370; /* warm gray, secondary text */
--muted-dim: #6B6250; /* darker warm gray, tertiary text */
/* Accents */
--amber: #F4A538; /* bright, energetic ops accent */
--amber-dim: #D9851F; /* dimmed state */
--teal: #2BA4A8; /* secondary sys accent */
--teal-dim: #1F7A7E; /* dimmed state */
/* Status colors */
--status-success: #4FD1C5;
--status-attention: #F4A538;
--status-risk: #E05252;
--status-neutral: #8B8370;
/* Semantic aliases resolve automatically via styles.css's :root chain
(--surface-page: var(--ink), --text-primary: var(--text), etc.) —
nothing further to override. --focus-ring inherits the new --amber. */
}
/* ==========================================================================
Component Overrides for Sunny Theme
========================================================================== */
/* Nav styling for sunny theme */
:root[data-theme="sunny"] .nav {
background: rgba(253, 248, 240, 0.88);
border-bottom-color: var(--amber);
border-bottom-width: 2px;
box-shadow: 0 2px 8px rgba(244, 165, 56, 0.08);
}
:root[data-theme="sunny"] .nav-name {
color: var(--amber);
font-weight: 600;
}
:root[data-theme="sunny"] .nav-links a:hover {
color: var(--amber);
font-weight: 600;
}
/* Signal strip */
:root[data-theme="sunny"] .signal-strip {
background: var(--panel);
border-bottom-color: var(--panel-line);
}
/* Cover/hero section with sunny gradient */
:root[data-theme="sunny"] [data-section="hero"],
:root[data-theme="sunny"] .cover {
background: linear-gradient(135deg, #FFE4A3 0%, #FFD478 50%, #FFFAED 100%);
}
:root[data-theme="sunny"] [data-section="hero"]::before,
:root[data-theme="sunny"] .cover::before {
content: '';
position: absolute;
top: -30%;
right: -5%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 212, 120, 0.2) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Ensure content sits above gradient backdrop */
:root[data-theme="sunny"] h1,
:root[data-theme="sunny"] .cover-eyebrow {
position: relative;
z-index: 1;
}
/* Emphasized text in sunny theme */
:root[data-theme="sunny"] h1 em,
:root[data-theme="sunny"] [data-section="hero"] h1 em {
color: var(--amber);
font-style: italic;
}
/* KPI cards with sunny borders */
:root[data-theme="sunny"] .kpi {
border: 2px solid var(--amber);
background: var(--panel);
box-shadow: 0 4px 12px rgba(244, 165, 56, 0.1);
}
/* Tables with sunny header */
:root[data-theme="sunny"] .data-table th {
background: var(--amber);
color: white;
border-bottom: 2px solid var(--amber);
font-weight: 700;
}
:root[data-theme="sunny"] .data-table th.teal {
background: var(--teal);
}
:root[data-theme="sunny"] .data-table tr:nth-child(even) td {
background: rgba(244, 165, 56, 0.05);
}
:root[data-theme="sunny"] .data-table .total td {
background: var(--amber);
color: white;
font-weight: 700;
}
/* Insight cards */
:root[data-theme="sunny"] .insight {
border: 2px solid var(--amber);
border-left: 4px solid var(--amber);
background: var(--panel);
box-shadow: 0 4px 12px rgba(244, 165, 56, 0.08);
}
:root[data-theme="sunny"] .insight.sys {
border-color: var(--teal);
border-left-color: var(--teal);
}
:root[data-theme="sunny"] .insight.alert {
border-color: var(--red);
border-left-color: var(--red);
}
/* Trike section styling */
:root[data-theme="sunny"] .trike-section {
border: 2px solid var(--amber);
background: var(--panel);
box-shadow: 0 8px 24px rgba(244, 165, 56, 0.12);
}
:root[data-theme="sunny"] .trike-header {
background: linear-gradient(90deg, var(--amber) 0%, #F0B04F 100%);
border-bottom: 2px solid var(--amber-dim);
color: white;
}
:root[data-theme="sunny"] .trike-header h3 {
color: white;
font-weight: 600;
}
:root[data-theme="sunny"] .trike-stats {
color: rgba(255, 255, 255, 0.9);
}
:root[data-theme="sunny"] #playBtn {
background: var(--amber);
color: white;
font-weight: 700;
box-shadow: 0 4px 12px rgba(244, 165, 56, 0.3);
}
:root[data-theme="sunny"] #playBtn:hover {
background: #f0b04f;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(244, 165, 56, 0.4);
}
:root[data-theme="sunny"] #trafficBtn {
border: 2px solid var(--panel-line);
}
:root[data-theme="sunny"] #trafficBtn:hover {
border-color: var(--amber);
color: var(--amber);
}
:root[data-theme="sunny"] .trike-map {
background: #FEFAF0;
}
/* Terms card */
:root[data-theme="sunny"] .terms-card {
border: 2px solid var(--amber);
background: var(--panel);
}
:root[data-theme="sunny"] .terms-label {
background: var(--amber);
color: white;
font-weight: 700;
}
/* Sign-off section */
:root[data-theme="sunny"] .signoff {
border-top: 2px solid var(--amber);
}
:root[data-theme="sunny"] .signoff-name {
color: var(--amber);
font-weight: 700;
}
:root[data-theme="sunny"] .signoff-note {
background: rgba(244, 165, 56, 0.08);
border: 2px solid var(--amber);
border-left: 4px solid var(--amber);
color: var(--text);
}
/* Footer */
:root[data-theme="sunny"] footer {
border-top: 2px solid var(--amber);
background: var(--panel);
font-weight: 500;
}
/* Links in sunny theme */
:root[data-theme="sunny"] a {
color: var(--amber);
text-decoration: none;
transition: color var(--motion-fast);
}
:root[data-theme="sunny"] a:hover {
color: var(--amber-dim);
}
/* Eyebrows and labels */
:root[data-theme="sunny"] .eyebrow {
color: var(--amber);
border-bottom: 2px solid var(--amber);
font-weight: 600;
}
:root[data-theme="sunny"] .eyebrow.sys {
color: var(--teal);
border-bottom-color: var(--teal);
}
:root[data-theme="sunny"] .eyebrow.alert {
color: var(--status-risk);
border-bottom-color: var(--status-risk);
}