/* =============================================================
   SideKick — LIGHT THEME
   Loaded after styles.css. Every rule is scoped to
   html[data-theme="light"], so the dark design is untouched
   and remains the default.

   Nothing here changes structure, layout, spacing or type —
   only surfaces, text colour, borders, shadows and glows.

   Background: the pattern3.png grid, rebuilt in CSS.
   Sampled from the source image:
     paper  #f8f8f8
     line   #efefef, 1px
     pitch  60px, square grid
   ============================================================= */

html[data-theme="light"] {
  /* ---------- PAPER / SURFACES ---------- */
  --paper:        #f8f8f8;   /* the grid's off-white, straight from pattern3.png */
  --grid-line:    #efefef;   /* the grid's line colour */
  --grid-pitch:   60px;      /* the grid's square size */

  --abyss:        #f1f1f1;   /* deepest recess -> now the most sunken panel */
  --midnight:     #f8f8f8;   /* page background */
  --ink:          #ffffff;
  --night:        #f4f4f4;
  --night-2:      #ffffff;
  --dusk:         #ffffff;   /* card surface */
  --twilight:     #ffffff;   /* raised card surface */

  /* ---------- FIRE ----------
     The warm accents carry the brand across both themes. Only the
     lightest steps are pulled down, so they survive on white. */
  --carrot:       #ef3f04;
  --ember:        #e5480f;
  --amber:        #d97706;
  --amber-soft:   #f59e0b;
  --ember-warm:   #f08b1c;

  /* ---------- SPARK / CYAN ----------
     The mascot's cyan is a night colour; on paper it disappears.
     Deepened to a teal that keeps the same "cool counterpoint" role. */
  --spark:        #0e8ba3;
  --spark-deep:   #0a6f85;
  --cyan:         #0e8ba3;
  --eyeglow:      #0b7f97;

  /* ---------- STATUS ---------- */
  --success:      #04884a;
  --gold:         #c98a12;
  --gold-warm:    #b8790a;

  /* ---------- TEXT ---------- */
  --moonlight:    #14161c;   /* primary text on paper */
  --text-dim:     #55596a;
  --steel:        #5e6273;
  --text-mute:    #82869a;
  --text-day:     #14161c;
  --text-day-dim: #55596a;

  /* ---------- LINES ---------- */
  --line:         rgba(15, 17, 26, 0.10);
  --line-strong:  rgba(15, 17, 26, 0.18);

  /* ---------- GRADIENTS ---------- */
  --grad-warm:      linear-gradient(135deg, var(--carrot) 0%, var(--ember) 45%, var(--ember-warm) 100%);
  --grad-warm-soft: linear-gradient(135deg, var(--ember), var(--ember-warm));
  --grad-fire:      linear-gradient(100deg, #e07800 0%, var(--carrot) 48%, #d63c06 100%);
  /* cool counterpoint to grad-fire. The night version runs cyan -> gold;
     on paper that crosses olive, so this one stays inside the eye-cyan range */
  --grad-spark:     linear-gradient(100deg, #12a3bf 0%, #0a6d92 100%);
  /* the night version sweeps warm -> cyan; on paper that sweep passes
     through a muddy olive, so the light hero stays inside the fire range */
  --grad-hero-em:   linear-gradient(100deg, #ef3f04 0%, #f2760a 58%, #d97706 100%);

  /* ---------- SHADOW ----------
     Paper shadows are tighter and far weaker than night shadows. */
  --shadow-warm: 0 20px 44px rgba(239, 63, 4, 0.18);
  --shadow-soft: 0 14px 34px rgba(15, 17, 26, 0.10);

  color-scheme: light;
}

/* =============================================================
   BASE
   ============================================================= */
html[data-theme="light"] body {
  background: var(--paper);
  color: var(--moonlight);
}

html[data-theme="light"] :focus-visible { outline-color: var(--carrot); }

/* =============================================================
   BACKDROP — the pattern3.png grid, in CSS
   Two 1px hairlines repeated on a 60px square pitch over the
   off-white paper. Fixed, so the grid stays put as you scroll —
   exactly how the flat image read.
   ============================================================= */
html[data-theme="light"] .sky {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-pitch) var(--grid-pitch);
  background-position: 0 0;
}

/* stars belong to the night sky */
html[data-theme="light"] .sky__stars { display: none; }

/* the dawn still scrubs in on scroll (same JS, same trigger) —
   here it warms the paper towards the CTA instead of lighting a night sky */
html[data-theme="light"] .sky__dawn {
  background:
    radial-gradient(120% 85% at 50% 118%,
      rgba(255, 214, 158, 0.85) 0%,
      rgba(255, 176, 122, 0.62) 24%,
      rgba(255, 138, 92, 0.34) 46%,
      rgba(255, 138, 92, 0.10) 66%,
      transparent 80%);
}

/* grain is a night texture — barely there on paper */
html[data-theme="light"] .fx-grain { opacity: 0.018; }

/* =============================================================
   TYPE ACCENTS
   ============================================================= */
html[data-theme="light"] .glow-cyan {
  color: var(--spark);
  text-shadow: none;
}

/* =============================================================
   HEADER
   ============================================================= */
html[data-theme="light"] .nav {
  background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(248, 248, 248, 0));
}
html[data-theme="light"] .nav.is-stuck {
  background: rgba(248, 248, 248, 0.82);
  border-bottom-color: rgba(15, 17, 26, 0.10);
  box-shadow: 0 1px 24px rgba(15, 17, 26, 0.05);
}
html[data-theme="light"] .nav__logo { filter: drop-shadow(0 4px 10px rgba(239, 63, 4, 0.28)); }

/* =============================================================
   BUTTONS
   ============================================================= */
html[data-theme="light"] .btn-fire {
  background: linear-gradient(135deg, #f59300 0%, var(--carrot) 55%, #dd3f08 100%);
  box-shadow: 0 8px 24px -8px rgba(239, 63, 4, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme="light"] .btn-fire:hover {
  box-shadow: 0 16px 36px -10px rgba(239, 63, 4, 0.6);
}

/* the ghost button inverts: an outlined ink button on paper */
html[data-theme="light"] .btn-ghost {
  background: #ffffff;
  color: var(--moonlight);
  border-color: rgba(15, 17, 26, 0.16);
  box-shadow: 0 2px 10px rgba(15, 17, 26, 0.05);
}
html[data-theme="light"] .btn-ghost:hover {
  background: #ffffff;
  border-color: rgba(15, 17, 26, 0.3);
  box-shadow: 0 10px 24px -10px rgba(15, 17, 26, 0.28);
}

html[data-theme="light"] .beta-badge {
  background: rgba(239, 63, 4, 0.07);
  border-color: rgba(239, 63, 4, 0.28);
}
html[data-theme="light"] .beta-badge--nav {
  background: rgba(14, 139, 163, 0.09);
  border-color: rgba(14, 139, 163, 0.3);
}

/* =============================================================
   HERO
   ============================================================= */
html[data-theme="light"] .hero__shot {
  filter: drop-shadow(0 34px 48px rgba(15, 17, 26, 0.18))
          drop-shadow(0 10px 24px rgba(239, 63, 4, 0.14));
}
html[data-theme="light"] .hero__mascot {
  filter: drop-shadow(0 18px 26px rgba(239, 63, 4, 0.26));
}
html[data-theme="light"] .hero__mascot-ring {
  background: radial-gradient(circle, rgba(255, 140, 74, 0.3), transparent 62%);
}

html[data-theme="light"] .chip {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 17, 26, 0.1);
  box-shadow: 0 12px 28px rgba(15, 17, 26, 0.12);
}

html[data-theme="light"] .scroll-cue .line {
  background: linear-gradient(var(--carrot), transparent);
}

/* =============================================================
   SECTION A — dreams + marquee
   ============================================================= */
html[data-theme="light"] .dreams__head h2 { color: var(--moonlight); }
html[data-theme="light"] .marquee--reverse .marquee__track {
  -webkit-text-stroke-color: rgba(20, 22, 28, 0.3);
}

/* =============================================================
   SECTION C — journey steps
   ============================================================= */
html[data-theme="light"] .step {
  box-shadow: 0 18px 40px -30px rgba(15, 17, 26, 0.5);
}
html[data-theme="light"] .step:hover {
  border-color: rgba(239, 63, 4, 0.35);
  box-shadow: 0 28px 52px -32px rgba(239, 63, 4, 0.45);
}
html[data-theme="light"] .step h3 { color: var(--moonlight); }
html[data-theme="light"] .step__shot img {
  filter: drop-shadow(0 14px 26px rgba(15, 17, 26, 0.2));
}

/* =============================================================
   SECTION D — a day together
   ============================================================= */
html[data-theme="light"] .day__mascot {
  filter: drop-shadow(0 12px 26px rgba(239, 63, 4, 0.22));
}
html[data-theme="light"] .day__timeline {
  border-left-color: rgba(239, 63, 4, 0.22);
}
html[data-theme="light"] .moment::before {
  box-shadow: 0 0 0 4px rgba(239, 63, 4, 0.12);
}
html[data-theme="light"] .moment__card {
  box-shadow: 0 6px 18px -10px rgba(15, 17, 26, 0.28);
}
html[data-theme="light"] .moment__card--done {
  border-color: rgba(4, 136, 74, 0.35);
  background: linear-gradient(135deg, rgba(4, 136, 74, 0.09), #ffffff 60%);
}
html[data-theme="light"] .moment__card--cheer {
  border-color: rgba(201, 138, 18, 0.32);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), #ffffff 60%);
}

/* =============================================================
   SECTION E — feature rows
   ============================================================= */
html[data-theme="light"] .frow {
  background: #ffffff;
  box-shadow: 0 14px 34px -28px rgba(15, 17, 26, 0.5);
}
/* each row keeps its own hue (set inline via --glow) — just dialled
   back, since a tint that reads as a glow on night reads as a stain on paper */
html[data-theme="light"] .frow::before { opacity: 0.55; }
html[data-theme="light"] .frow:hover {
  border-color: rgba(239, 63, 4, 0.3);
  box-shadow: 0 26px 50px -34px rgba(239, 63, 4, 0.42);
}
html[data-theme="light"] .frow__ico {
  background: #f5f5f5;
  border-color: rgba(15, 17, 26, 0.1);
}
html[data-theme="light"] .frow__copy h3 { color: var(--moonlight); }

/* chat demo */
html[data-theme="light"] .bubble.bot {
  background: #f2f2f2;
  border-color: rgba(15, 17, 26, 0.08);
  color: var(--moonlight);
}
html[data-theme="light"] .bubble.me {
  background: linear-gradient(135deg, var(--carrot), #f06a1f);
}

/* streak panel */
html[data-theme="light"] .streak,
html[data-theme="light"] .rung {
  background: #fafafa;
}
html[data-theme="light"] .streak__dots i {
  background: #ececec;
  border-color: rgba(15, 17, 26, 0.08);
}
/* re-stated: this file loads after styles.css, so the empty-dot rule above
   would otherwise win the tie against .streak__dots i.on / .now */
html[data-theme="light"] .streak__dots i.on {
  background: var(--grad-warm-soft);
  border-color: transparent;
}
html[data-theme="light"] .streak__dots i.now {
  background: rgba(239, 63, 4, 0.1);
  border-color: var(--ember);
}
html[data-theme="light"] .rung.done { opacity: 0.55; }
html[data-theme="light"] .rung.live {
  color: var(--moonlight);
  border-color: rgba(239, 63, 4, 0.35);
  background: #ffffff;
}

@keyframes livePulse-light {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 63, 4, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(239, 63, 4, 0.03); }
}
html[data-theme="light"] .streak__dots i.now,
html[data-theme="light"] .dotpulse::after { animation-name: livePulse-light; }

/* =============================================================
   SECTION F — the feeling
   ============================================================= */
html[data-theme="light"] .feel {
  box-shadow: 0 12px 30px -26px rgba(15, 17, 26, 0.45);
}
html[data-theme="light"] .feel:hover {
  box-shadow: 0 26px 46px -34px var(--feel, var(--carrot));
}

/* =============================================================
   SECTION G — meet / say hi
   ============================================================= */
html[data-theme="light"] .avatar {
  filter: drop-shadow(0 12px 20px rgba(15, 17, 26, 0.16));
}
html[data-theme="light"] .avatar--hero {
  filter: drop-shadow(0 20px 32px rgba(239, 63, 4, 0.3));
}

/* =============================================================
   SECTION H — voices
   ============================================================= */
html[data-theme="light"] .quote {
  box-shadow: 0 12px 30px -26px rgba(15, 17, 26, 0.45);
}

/* =============================================================
   SECTION I — final CTA
   The dawn behind it is now a warm paper wash, so this copy
   stays ink rather than flipping to white.
   ============================================================= */
html[data-theme="light"] .final__mascot {
  filter: drop-shadow(0 14px 28px rgba(239, 63, 4, 0.35));
}
html[data-theme="light"] .final__title { color: var(--moonlight); }
html[data-theme="light"] .final__sub { color: var(--text-dim); }
html[data-theme="light"] .final .btn-ghost {
  background: #ffffff;
  border-color: rgba(15, 17, 26, 0.18);
}
html[data-theme="light"] .final .btn-ghost:hover { background: #ffffff; }
html[data-theme="light"] .final .hero-note { color: var(--text-dim); }
html[data-theme="light"] .final .hero-note b { color: var(--success); }

/* =============================================================
   FOOTER
   ============================================================= */
html[data-theme="light"] .footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
}