/* ============================================================================
   THEME TOKENS — dark (black/red) is the default, light is the alternate.
   Every colour the site uses is declared here and nowhere else, so the
   canvas mosquitoes recolour with the page.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:           #08080a;
  --bg-2:         #0e0e11;
  --surface:      #141417;
  --surface-2:    #1c1c21;
  --surface-3:    #26262d;
  --line:         #2a2a32;
  --line-soft:    #1e1e24;

  /* Text */
  --text:         #f4f4f6;
  --text-2:       #b4b4c0;
  --text-3:       #9090a0;      /* clears AA on every dark surface, incl. surface-3 */

  /* Brand red.
     --red is the fill colour: it is dark enough that white text on top of it
     clears AA (4.76:1). --red-text is the brighter one used when red itself
     is the text on a dark background (5.69:1) — the fill red only manages
     4.20:1 there, which would fail. */
  --red:          #e11d2a;
  --red-text:     #ff3b47;
  --red-bright:   #ff3b47;
  --red-deep:     #a4111c;
  --red-glow:     rgba(225, 29, 42, .38);
  --red-wash:     rgba(225, 29, 42, .10);
  --on-red:       #fff;

  /* Accents for individual product sections */
  --accent-window:   #e11d2a;
  --accent-door:     #ff6b35;
  --accent-bed:      #4f8cff;
  --accent-cradle:   #ff7ab8;
  --accent-well:     #2e9e63;
  --accent-foldable: #b06bff;
  --accent-birthday: #ffbf3d;

  /* Mosquito canvas */
  --skeeter:      #d8d8e2;
  --skeeter-wing: rgba(230, 230, 245, .30);
  --spark:        #ff3b47;

  /* Effects */
  --shadow:       0 18px 50px rgba(0, 0, 0, .55);
  --shadow-sm:    0 6px 20px rgba(0, 0, 0, .40);
  --mesh-line:    rgba(255, 255, 255, .10);
  --img-filter:   saturate(.82) contrast(1.06) brightness(.92);
  --scrim:        rgba(8, 8, 10, .82);

  /* Motion + metrics */
  --ease:         cubic-bezier(.22, 1, .36, 1);
  --nav-h:        62px;
  --radius:       16px;
  --radius-sm:    10px;
  --maxw:         1200px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:           #faf7f2;
  --bg-2:         #f2ede4;
  --surface:      #fffdfa;
  --surface-2:    #f5f0e8;
  --surface-3:    #e9e2d6;
  --line:         #ded5c6;
  --line-soft:    #ebe4d8;

  --text:         #16151a;
  --text-2:       #4d4a55;
  --text-3:       #655f6e;      /* dark enough to clear AA on every light surface */

  --red:          #c50f1f;      /* darkened for AA on light backgrounds */
  --red-text:     #c50f1f;      /* 5.68:1 on the light background */
  --red-bright:   #e11d2a;
  --red-deep:     #8f0a16;
  --red-glow:     rgba(197, 15, 31, .22);
  --red-wash:     rgba(197, 15, 31, .07);

  --accent-door:     #d4501a;
  --accent-bed:      #2f6fe0;
  --accent-cradle:   #d4488e;
  --accent-well:     #1f7d4c;
  --accent-foldable: #8a44d6;
  --accent-birthday: #b8791a;

  --skeeter:      #3a3742;
  --skeeter-wing: rgba(60, 56, 70, .26);
  --spark:        #c50f1f;

  --shadow:       0 18px 46px rgba(60, 45, 25, .14);
  --shadow-sm:    0 6px 18px rgba(60, 45, 25, .10);
  --mesh-line:    rgba(0, 0, 0, .13);
  --img-filter:   saturate(1) contrast(1) brightness(1);
  --scrim:        rgba(250, 247, 242, .86);

  color-scheme: light;
}

/* Note: we deliberately do NOT follow prefers-color-scheme on first visit.
   Black and red is the brand — everyone lands on dark, and the nav toggle
   is what switches to light. */