/* GoSunlite "sun" look: the light watercolor base from site.css (same layout and components as
   egsolar.app), themed after the GoSunlite wordmark: near-black geometric caps (Outfit) and a mint
   #00F0B0 to cyan #00D0F8 gradient mark. Black stays the UI ink; the gradient is the accent. */

html[data-look="sun"] {
  --paper: #f6faf9;
  --text: #111;
  --link: #007a8c;            /* cyan darkened to pass contrast on paper. Links only. */
  --mint: #00f0b0;
  --cyan: #00d0f8;
  --grad: linear-gradient(135deg, #00f0b0 0%, #00d8e8 50%, #00d0f8 100%);
  --accent: #00b9cf;
  --accent-ink: #00707f;
  --display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
[data-look="sun"] body { background: var(--paper); color: var(--t80); }
[data-look="sun"] ::selection { background: rgba(0,240,176,.35); }
[data-look="sun"] :focus-visible { outline-color: var(--accent); }

/* paper with mint and cyan washes at the edges */
[data-look="sun"] .backdrop {
  background-color: #f2f7f6;
  background-image: linear-gradient(90deg, #d4f9ee 0%, #f3f7f7 40%, #d3f2fa 72%, #e3fbf3 100%);
}
[data-look="sun"] .backdrop::before {
  background: radial-gradient(120% 90% at 50% 45%, rgba(246,250,249,.94) 35%, rgba(246,250,249,.6) 80%, rgba(246,250,249,.32));
}
[data-look="sun"] .top.scrolled { background: rgba(246,250,249,.78); }

/* the wordmark replaces the text brand */
[data-look="sun"] .brand img.wordmark { width: auto; height: 36px; display: block; }
[data-look="sun"] .foot .brand img.wordmark { height: 28px; }

/* type: Plus Jakarta Sans, a sleek geometric sans that sits with the wordmark */
[data-look="sun"] .title { color: #111; font-weight: 700; letter-spacing: -.022em; word-spacing: .04em; line-height: 1.1; text-wrap: balance; }
[data-look="sun"] .date-line { font-weight: 600; letter-spacing: -.015em; }
[data-look="sun"] .card h3, [data-look="sun"] .step h3, [data-look="sun"] .item h3, [data-look="sun"] .svc-cat-head h2 { letter-spacing: -.015em; }
[data-look="sun"] .kicker { letter-spacing: .01em; }
[data-look="sun"] .h2 { color: #111; font-weight: 700; letter-spacing: -.02em; word-spacing: .03em; line-height: 1.12; text-wrap: balance; }
[data-look="sun"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[data-look="sun"] .kicker::before { background: var(--grad); opacity: 1; width: 8px; height: 8px; }
[data-look="sun"] .status-pill .dot { background: var(--mint); box-shadow: 0 0 0 3px rgba(0,240,176,.25); }
[data-look="sun"] .stat b {
  background: linear-gradient(135deg, #00855f, #00718a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-look="sun"] .step::before { color: var(--accent-ink); }

/* the one solid object stays black like the wordmark, with a mint glyph and a soft cyan glow */
[data-look="sun"] .capsule { box-shadow: 0 10px 30px rgba(0,190,215,.28), 0 0 0 1px rgba(0,0,0,.06); }
[data-look="sun"] .capsule .glyph { color: var(--mint); }
[data-look="sun"] .capsule .div { background: rgba(255,255,255,.45); }

[data-look="sun"] .face { color: #111; }
[data-look="sun"] .tier .face, [data-look="sun"] .svc-cat-head .face { background: linear-gradient(135deg, rgba(0,240,176,.18), rgba(0,208,248,.18)); border-color: rgba(0,190,215,.3); }
[data-look="sun"] a.card:hover { border-color: rgba(0,185,207,.45); }
[data-look="sun"] .card .go { border-color: rgba(0,185,207,.5); color: var(--accent-ink); }

/* forms */
[data-look="sun"] .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,208,248,.18); }
[data-look="sun"] .check input { accent-color: var(--accent-ink); }

/* the flyer art: watercolor washes in brand colors */
[data-look="sun"] .flyer svg stop[stop-color="#F2B64A"], [data-look="sun"] .flyer svg stop[stop-color="#F5C089"] { stop-color: #00F0B0; }
[data-look="sun"] .flyer svg stop[stop-color="#C9A8EE"] { stop-color: #00D0F8; }
[data-look="sun"] .flyer svg stop[stop-color="#FFBBFC"] { stop-color: #7FF5D6; }

/* contrast on paper (review 2026-10-16) */
[data-look="sun"] { --t60: rgba(17,17,17,.68); --t50: rgba(17,17,17,.62); --t40: rgba(17,17,17,.55); }
[data-look="sun"] .time-line { color: #3c4a47; }
[data-look="sun"] .specs li span:first-child { color: #55635f; }
[data-look="sun"] .foot, [data-look="sun"] .fine { color: #55635f; }

/* pills: solid white with a mint-tinted hairline, like the logo on paper */
[data-look="sun"] .pill { background: #fff; border-color: rgba(0,170,150,.35); color: #111; }
[data-look="sun"] .pill:hover { background: #f0fdf9; border-color: rgba(0,185,207,.6); }
[data-look="sun"] .pill.on, [data-look="sun"] .pill[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #111; }
[data-look="sun"] .top-cta .pill:not(.hide-m):not(.menu-btn) { background: #111; color: #fff; border-color: #111; }
[data-look="sun"] .card .go { background: var(--grad); border-color: transparent; color: #111; }
[data-look="sun"] .event-rail .card, [data-look="sun"] .card.done-panel { border-top: 2px solid #00e0c8; }

/* phone header: the wordmark is wider than egsolar's text brand, so keep the menu icon from collapsing */
[data-look="sun"] .pill svg { flex: none; }
[data-look="sun"] .top .menu-btn { min-width: 44px; justify-content: center; padding: 0 12px; }
@media (max-width: 720px) {
  [data-look="sun"] .brand img.wordmark { height: 26px; }
  [data-look="sun"] .top { gap: 12px; }
}
@media (max-width: 380px) {
  [data-look="sun"] .top-cta .pill { padding: 0 11px; font-size: 15px; }
  [data-look="sun"] .brand img.wordmark { height: 24px; }
}
[data-look="sun"] .date-line, [data-look="sun"] .lede, [data-look="sun"] .desc { text-wrap: pretty; }