/* Design tokens: colors, glass, type and spacing used across the page. */
:root {
  /* Brand colors (from the logo) */
  --ink: #4a2619;            /* chocolate outline: main text */
  --ink-soft: #6f4637;       /* secondary text */
  --cream: #fff8f3;
  --pink: #f39bc1;
  --pink-soft: #fde0ec;
  --lavender: #b79be8;
  --lavender-soft: #ebe2fb;
  --lavender-deep: #8a5bb5;
  --gradient-brand: linear-gradient(135deg, #f7a8cb 0%, #b79be8 100%);
  --gradient-soft: linear-gradient(135deg, var(--pink-soft) 0%, var(--lavender-soft) 100%);
  /* Accent: translucent pink → purple (main buttons) */
  --gradient-accent: linear-gradient(135deg, rgba(236, 118, 180, 0.78) 0%, rgba(146, 102, 224, 0.78) 100%);
  --accent-ink: #6d3fa8;     /* purple for icons and accent text */
  --accent-shadow: 0 10px 26px rgba(150, 90, 200, 0.32);

  /* Frosted glass */
  --glass-bg: rgba(255, 255, 255, 0.32);
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-fallback: rgba(255, 250, 252, 0.88); /* when blur is not supported */
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur: 12px;
  --glass-shadow:
    0 12px 32px rgba(122, 60, 104, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* Soft light glow behind text that sits directly on the film */
  --glow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 246, 251, 0.9),
    0 0 28px rgba(255, 246, 251, 0.7);

  /* Shape */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 999px;

  /* Type */
  --font-display: "Baloo Bhaijaan 2", "Vazirmatn", system-ui, sans-serif;
  --font-body: "Vazirmatn", system-ui, sans-serif;

  /* Layout: mobile-first; larger screens show a centred phone-width column */
  --page-max: 480px;
  --gutter: 16px;
  --header-h: 60px;
  --header-space: calc(env(safe-area-inset-top) + 10px + var(--header-h) + 18px);
  --page-bg: linear-gradient(160deg, #fbe3ee 0%, #ece3fb 100%);
}