/* ==========================================================================
   Quokka — design tokens (single source of truth for colour + type).
   Loaded FIRST on every page, before styles.css / blog.css / doc.css.

   Colours are sampled from the real app assets, not invented:
     · #0162FF  icon top-left blue          (Quokka Icon.png)
     · #00BBFF  icon right cyan             (Quokka Icon.png)
     · #0095FF  app AccentColor.colorset    (rgb 0, 0.584, 1)
     · #0149FF → #01BAFF  launch gradient   (Quokka Icon Gradient.png)
     · #59AC30 / #3E781B  icon green swoosh
     · #FFCC00  starYellow, rgb(1, 0.8, 0)  (AddTaskSheet.swift et al.)
   If the app's palette changes, re-sample and update HERE only.

   ⚠️ Cache-busting: bump ?v=N in every referencing file when editing —
   index.html, 404.html, privacy/index.html AND the templates in build-blog.js.
   ========================================================================== */
:root {
  /* brand */
  --blue: #0162ff;
  --blue-deep: #0149ff;
  --blue-accent: #0095ff;
  --cyan: #01baff;
  --green: #59ac30;
  --green-deep: #3e781b;
  --star: #ffcc00;
  --star-deep: #e0a800;

  /* gradients */
  --grad-brand: linear-gradient(135deg, #0149ff 0%, #0095ff 52%, #01baff 100%);
  --grad-soft: linear-gradient(180deg, #f2f7ff 0%, #ffffff 60%);

  /* neutrals — cool-tinted to sit under the blue */
  --ink: #0b1524;
  --body: rgba(11, 21, 36, 0.74);
  --muted: rgba(11, 21, 36, 0.55);
  --faint: rgba(11, 21, 36, 0.38);
  --paper: #ffffff;
  --panel: #f2f6fd;
  --panel-2: #e9f1fe;
  --line: #e2eaf6;

  /* elevation — blue-tinted shadows read as brand, not dirt */
  --shadow-sm: 0 1px 2px rgba(11, 21, 36, 0.05), 0 2px 8px rgba(1, 98, 255, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 21, 36, 0.06), 0 12px 32px rgba(1, 98, 255, 0.08);
  --shadow-lg: 0 18px 48px rgba(1, 73, 255, 0.16), 0 4px 12px rgba(11, 21, 36, 0.06);

  /* radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* type */
  --font-display: Fredoka, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 64px;
}