/* ============================================================
   THEME: DAY
   Mood: the light one. Pure white ground, slate text, one clean
   blue. No grain, no vignette, only a faint tint of colour drifting
   behind the cards — so it stays white, always.
   Fonts: Outfit (display) + Inter (body)

   Note for anyone writing a NEW light theme: --accent-2 is used as
   TEXT (active nav, links), so it must be the DARKER shade here —
   the reverse of the dark packs, where it is the lighter one.
   ============================================================ */
[data-theme="day"] {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eceef2;
  --surface-3: #e1e5eb;
  --rim: rgba(15, 23, 42, 0.09);
  --rim-strong: rgba(15, 23, 42, 0.17);

  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-dim: #dbeafe;
  --support: #7c3aed;
  --support-2: #059669;

  --text: #0f172a;
  --text-dim: #475569;
  --text-dimmer: #64748b;
  --on-accent: #ffffff;

  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --display-weight: 700;
  --display-tracking: 0.07em;
  --display-transform: uppercase;
  --display-line: 1.1;
  --display-scale: 0.85;
  --body-weight: 400;
  --body-weight-strong: 600;
  --body-tracking: -0.005em;
  --body-line: 1.55;
  --body-scale: 0.95;

  --r-xs: 5px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 17px;
  --r-xl: 22px;
  --border-w: 1px;

  /* a wash of colour, never a haze — the page must still read as white */
  --glow-alpha: 0.09;
  --glow-blur: 110px;
  --noise-opacity: 0.02;
  --panel-blur: 20px;
  --scanline-alpha: 0;
  --vignette-alpha: 0;
  --bloom-alpha: 0;

  --dur-fast: 130ms;
  --dur: 250ms;
  --dur-slow: 450ms;
  --float-amp: 5px;

  --particle-kind: mote;
  --particle-count: 8;
  --particle-min: 6;
  --particle-max: 14;
  --particle-speed: 16;
  --particle-drift: 24;
  --particle-opacity: 0.22;
  --particle-color: #2563eb;
}

/* Cards float on white with a soft shadow instead of a glow. */
[data-theme="day"] .surface-card {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.05);
}

/* Desktop only: the letterbox around the phone frame. The shell's
   default darkens --bg, which turns white into mid-grey. */
@media (min-width: 520px) {
  [data-theme="day"] body { background: #e9ecf1; }
  [data-theme="day"] .app { box-shadow: 0 0 0 1px var(--rim), 0 24px 60px rgba(15, 23, 42, 0.14); }
}