/* The landing site in light (theme.js sets html[data-theme="light"]).
   Each page keeps its own dark colour list in :root; this file is the light
   value of every colour role those pages use, in one place. A page colour
   that is not in its :root list is written var(--role, <dark value>), so dark
   is exactly as before and only these roles change.
   Lime on white is unreadable (1.2:1): it stays a FILL with dark ink (the
   buttons), and as text or a line it becomes olive (#4a6600, 6.6:1). Video,
   phone frames and app screenshots stay dark. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7f8;
  --panel: #ffffff;
  --panel-2: #f0f3f4;
  --line: #e2e7ea;
  --line-2: #d3dade;
  --line-3: #bfc8cd;
  --text: #0b1418;
  --body: #34434a;
  --muted: #5b6970;
  --faint: #64717a;
  --accent-text: #4a6600;
  --accent-line: #7a9a10;
  --sel-bg: #f3f9dc;
  --sel-line: #7a9a10;
  --note-bg: #f8fbec;
  --note-line: #d6e8a0;
  --hover-bg: #e9eef0;
  --danger-text: #b4232a;
  --media-frame: #e9eef0;
  --card-line: #b9d64a;      /* card outlines and secondary buttons: KICKO lime */
  /* rgb of the wash laid over photos and behind the glass header. */
  --wash: 245, 247, 248;
  --wash-min: .88;           /* photos stay a soft texture, never a grey band */
  /* rgb and strength of shadows. */
  --shade: 11, 20, 24;
  --shade-k: .3;
}

/* The light/dark button (theme.js), the same size as the LANG button. */
.theme-toggle { min-height: 40px; width: 40px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r, 8px); color: var(--muted); background: transparent; cursor: pointer; }
.theme-toggle:hover { color: var(--text); border-color: var(--line-3, #3a4a52); }
.theme-toggle svg { display: block; }
/* The button takes ~48px of the header: the header buttons keep their text
   on one line, as they had before it was there. */
:is(.nav-actions, .nav-end, .bar-end) :is(.button, .back) { white-space: nowrap; }

/* KICKO lime in light: the second line of a headline in a deep lime green
   (see below), small eyebrow labels in olive (6.6:1), secondary
   buttons outlined like the cards. Dark is as it was. */
html[data-theme="light"] :is(.eyebrow, .section-kicker, .kicker) { color: var(--accent-text); }
html[data-theme="light"] .button.ghost { border-color: var(--card-line); }
html[data-theme="light"] .price-card.featured { border-color: var(--accent-line); }

/* The second line of a headline is KICKO-lime grass, in both themes (owner,
   2026-10-20): the text is a window onto a seamless grass tile. Large type
   only; on light a 1px dark edge keeps the bright blades off the white. */
h1 span { background: url("/landing/assets/grass-lime.jpg") 0 0 / 260px auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html[data-theme="light"] h1 span { filter: drop-shadow(0 1px 0 rgba(11, 20, 24, .3)); }

/* The logo lettering is white: on a light ground it uses its dark version. */
html[data-theme="light"] img[src*="kickoff-logo"] { filter: invert(1) hue-rotate(180deg) saturate(1.4); }