Weather Widget

<section
  class="ws-weather-widget max-w-sm rounded-2xl border p-6"
  style="
    --ws-weather-widget-bg: oklch(0.98 0.005 75);
    --ws-weather-widget-text: oklch(0.25 0.02 75);
    --ws-weather-widget-text-soft: oklch(0.45 0.015 75);
    --ws-weather-widget-text-muted: oklch(0.6 0.01 75);
    --ws-weather-widget-border: oklch(0.9 0.01 75);
    --ws-weather-widget-accent: oklch(0.55 0.12 250);
    --ws-weather-widget-accent-soft: oklch(0.92 0.04 250);
    background: var(--ws-weather-widget-bg);
    color: var(--ws-weather-widget-text);
    border-color: var(--ws-weather-widget-border);
  "
>
  <!-- Header: City + Condition -->
  <div class="flex items-start justify-between">
    <div>
      <h3 class="text-lg font-semibold" style="color: var(--ws-weather-widget-text)">San Francisco</h3>
      <p class="text-sm" style="color: var(--ws-weather-widget-text-muted)">Partly Cloudy</p>
    </div>
    <span class="text-4xl" role="img" aria-label="Partly cloudy">⛅</span>
  </div>

  <!-- Current Temperature -->
  <div class="mt-4 flex items-baseline gap-2">
    <span class="text-5xl font-light tracking-tight" style="color: var(--ws-weather-widget-text)">18°</span>
    <div class="flex gap-2 text-sm font-medium">
      <span style="color: var(--ws-weather-widget-text-soft)">H: 22°</span>
      <span style="color: var(--ws-weather-widget-text-muted)">L: 12°</span>
    </div>
  </div>

  <!-- Stats Row -->
  <div
    class="mt-5 flex gap-4 rounded-xl px-4 py-3"
    style="background: var(--ws-weather-widget-accent-soft)"
  >
    <div class="flex-1 text-center">
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">Humidity</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">72%</p>
    </div>
    <div
      class="w-px self-stretch"
      style="background: var(--ws-weather-widget-border)"
    ></div>
    <div class="flex-1 text-center">
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">Wind</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">14 km/h</p>
    </div>
    <div
      class="w-px self-stretch"
      style="background: var(--ws-weather-widget-border)"
    ></div>
    <div class="flex-1 text-center">
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-weather-widget-text-muted)">UV</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-weather-widget-text)">5</p>
    </div>
  </div>

  <!-- 5-Day Forecast -->
  <div
    class="mt-5 border-t pt-4"
    style="border-color: var(--ws-weather-widget-border)"
  >
    <div class="grid grid-cols-5 gap-2 text-center">
      <div>
        <p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Mon</p>
        <span class="my-1 block text-lg" role="img" aria-label="Sunny">☀️</span>
        <p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">24°</p>
      </div>
      <div>
        <p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Tue</p>
        <span class="my-1 block text-lg" role="img" aria-label="Partly cloudy">⛅</span>
        <p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">20°</p>
      </div>
      <div>
        <p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Wed</p>
        <span class="my-1 block text-lg" role="img" aria-label="Rainy">🌧️</span>
        <p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">16°</p>
      </div>
      <div>
        <p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Thu</p>
        <span class="my-1 block text-lg" role="img" aria-label="Cloudy">☁️</span>
        <p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">18°</p>
      </div>
      <div>
        <p class="text-xs font-medium" style="color: var(--ws-weather-widget-text-muted)">Fri</p>
        <span class="my-1 block text-lg" role="img" aria-label="Sunny">☀️</span>
        <p class="text-xs font-semibold" style="color: var(--ws-weather-widget-text)">22°</p>
      </div>
    </div>
  </div>
</section>