/* Zappr design tokens. Every colour, font, size and timing on the page comes from here.
 * Tailwind slate and cyan, as in the app icon: a dark slate page, cyan-300 (the bolt) as the one action colour. */

:root {
  color-scheme: dark;

  --color-paper:  #020617; /* slate-950 */
  --color-raised: #0f172a; /* slate-900 */
  --color-ink:    #f8fafc; /* slate-50 */
  --color-ink-2:  #94a3b8; /* slate-400 */
  --color-line:   #1e293b; /* slate-800 */

  --color-accent:      #67e8f9; /* cyan-300, the bolt */
  --color-accent-deep: #a5f3fc; /* cyan-200, hover lifts toward white on a dark page */
  --color-on-accent:   #020617;

  /* Show & Tell's ink and recording dot, as in the app. */
  --color-ink-red:     #ff2938;

  /* Desktop wallpaper behind every shot: macOS Sequoia, with its deep blue as the colour while it loads. */
  --wall: #2a1fa0 url("shots/wallpaper.webp") center / cover no-repeat;

  --dim: oklch(0% 0 0 / 0.38);
  --hud: oklch(15% 0 0 / 0.8);

  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lede: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --text-xl: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --text-display: clamp(2.5rem, 5.2vw + 0.6rem, 5rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius-shot: clamp(14px, 2vw, 24px);
  --shadow-shot: 0 0 0 1px #1e293b, 0 30px 80px -30px rgb(0 0 0 / 0.8);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}