/* The site's theme: the shader gradient as warm light on cream paper, frosted white glass, and
   ink in near-black. index.html sets <html data-theme="light">; this file overrides the base
   colours in styles.css. */

html[data-theme="light"] {
  --sc-canvas: #F7F2EC;
  --sc-surface: #FFFFFF;
  --sc-ink: #17120E;
  --sc-ink-soft: #54483F;
  --ink-3: #7D6F64;
  --sc-accent: #DD5A1F;
  --sc-accent-ink: #FFFFFF;
  --accent-text: #A53A0D;
  --line: rgb(60 35 20 / 0.1);
  --line-strong: rgb(60 35 20 / 0.17);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --glass-bg: rgb(255 252 248 / 0.72);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(60 35 20 / 0.08);
  --glass-drop: 0 18px 40px -18px rgb(90 50 25 / 0.22), 0 2px 8px -2px rgb(90 50 25 / 0.08);
  color-scheme: light;
}
[data-theme="light"] body { color: var(--sc-ink); }

/* Fades into the page colour between sections. */
[data-theme="light"] .intro__fade { background: linear-gradient(to top, var(--sc-canvas), rgb(247 242 236 / 0)); }
[data-theme="light"] .say__veil,
[data-theme="light"] .private__veil { background: linear-gradient(to bottom, var(--sc-canvas) 0%, rgb(247 242 236 / 0) 24%, rgb(247 242 236 / 0) 76%, var(--sc-canvas) 100%); }
[data-theme="light"] .get::before { background: linear-gradient(var(--sc-canvas), rgb(247 242 236 / 0)); }

/* Accent words: a deeper ember so the italic holds its contrast on cream. */
[data-theme="light"] :is(.hero__title, .rail__title, .rail__note, .private__title, .get__title) em {
  background-image: linear-gradient(100deg, #E46A2A 0%, #D24E19 50%, #B83512 100%);
}

/* Buttons and small controls. */
[data-theme="light"] .btn--primary,
[data-theme="light"] .hear[aria-pressed="true"],
[data-theme="light"] .platforms button[aria-checked="true"],
[data-theme="light"] .steps li::before,
[data-theme="light"] .skip-link { color: #fff; }
[data-theme="light"] .btn--primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 22px -10px rgb(200 80 20 / 0.55); }
@media (hover: hover) and (pointer: fine) { [data-theme="light"] .btn--ghost:hover { background: rgb(60 35 20 / 0.06); } }
[data-theme="light"] .bar.is-scrolled { --glass-bg: rgb(255 252 248 / 0.9); }
[data-theme="light"] .hear:hover { --glass-bg: rgb(255 252 248 / 0.92); }
[data-theme="light"] kbd { background: rgb(60 35 20 / 0.06); }

/* No-WebGL fallbacks. */
[data-theme="light"] .mac:not(.gl-on) .mac__bar { background: rgb(255 252 248 / 0.8); }
[data-theme="light"] .mac:not(.gl-on) .win,
[data-theme="light"] .mac:not(.gl-on) .mac__tip,
[data-theme="light"] .say:not(.gl-on) .moment,
[data-theme="light"] .private:not(.gl-on) .fact,
[data-theme="light"] .get:not(.gl-on) .get__card,
[data-theme="light"] .get:not(.gl-on) .foot { background: rgb(255 252 248 / 0.85); }

/* The demo screen: the laptop stays dark hardware, its windows turn to daylight glass. */
[data-theme="light"] .mac { box-shadow: inset 0 0 0 1.5px #3A3734, 0 60px 120px -40px rgb(160 80 30 / 0.35), 0 24px 50px -20px rgb(90 45 20 / 0.25); }
[data-theme="light"] .voice-track { background: rgb(221 90 31 / 0.07); border-color: rgb(221 90 31 / 0.25); }

/* Command cards. */
[data-theme="light"] .demo { background: radial-gradient(ellipse at 0 100%, rgb(221 90 31 / 0.1), transparent 70%), #FFFBF7; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="light"] .demo__chip,
[data-theme="light"] .demo__chip--ember { background: #FFE7D6; color: #A63A0C; border-color: rgb(221 90 31 / 0.3); }
[data-theme="light"] .demo__keys kbd { background: #F1E9E1; color: var(--sc-ink); }
[data-theme="light"] .fact__number { color: #D24E19; }

/* Download card: panels on cream, the code stays a dark terminal. */
[data-theme="light"] .platform__box { background: rgb(255 255 255 / 0.62); }
[data-theme="light"] .demo--hold kbd { animation-name: press-light; }
[data-theme="light"] .demo--paste kbd { animation-name: press-quick-light; }
@keyframes press-light { 0%, 12% { transform: none; } 16%, 70% { transform: translateY(3px); box-shadow: inset 0 -1px 0 rgb(60 35 20 / 0.12), inset 0 0 0 1px var(--line-strong); background: #FFD9BF; } 74%, 100% { transform: none; } }
@keyframes press-quick-light { 0%, 14% { transform: none; } 18%, 30% { transform: translateY(3px); background: #FFD9BF; } 34%, 100% { transform: none; } }
[data-theme="light"] .caption { background: rgb(255 252 248 / 0.9); }

/* The Mac's wallpaper before (or without) WebGL: the same warm light, still. */
[data-theme="light"] .mac { background: radial-gradient(ellipse at 30% 40%, #FFD2B3, transparent 70%), radial-gradient(ellipse at 80% 70%, #F4A06E, transparent 60%), #F7EDE4; }