/* Design tokens. Source of truth: design-system/za-and-hawwi/pages/home.md
   Single light theme on purpose (pastel pink, Hello Kitty inspired).
   Contrast (WCAG) on --bg #FFF0F6 / white card / --blush #FFD6E7:
   --text 13.0 / 14.4 / 11.0 · --muted 6.5 / 7.2 / 5.5 · --rose 5.5 / 6.0 / 4.6
   --lilac-text 6.1 / 6.8 / 5.2 · white on --rose 6.0
   --pink (2.4) and --bow (3.9) are decoration only; --bow may be used for very large display text. */
:root {
  color-scheme: light;

  --bg: #FFF0F6;
  --surface: #FFFFFF;               /* solid fallback for glass */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.9);
  --blur: 14px;
  --shadow: 0 14px 34px -14px rgba(190, 24, 93, 0.28);

  --text: #4A1734;
  --muted: #7D4565;
  --rose: #BE185D;                  /* primary: buttons, small accent text */
  --on-rose: #FFFFFF;
  --pink: #F472A6;                  /* decoration */
  --blush: #FFD6E7;                 /* soft fills */
  --bow: #E5304A;                   /* bows, hearts, big display only */
  --lilac: #EBD9FF;
  --lilac-text: #7E3FA0;            /* her accent */
  --butter: #FFE08A;                /* tiny highlights */
  --mint: #CFF3E4;                  /* sticky note */
  --paper: #FFFDFB;                 /* polaroid / letter paper */
  --note-pink: #FFE1EC;
  --note-lilac: #EFE2FF;
  --note-butter: #FFF1BF;

  /* "for you, from me" (Za's paragraphs): baby blue
     navy on blue paper 9.5:1 · baby blue letters vs navy outline 7.1:1 */
  --baby-blue: #A9D8FF;
  --blue-paper: #E6F3FF;
  --blue-ink: #1F3F66;
  --blue-text: #2C5F99;             /* 5.8:1 on blue paper */
  /* "from you, to me" (Hawwi's paragraphs): baby pink
     baby pink letters vs plum outline 8.9:1 */
  --baby-pink: #FFB8D4;

  --focus: #7E3FA0;

  --font-display: 'Fredoka', 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Gaegu', 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius: 999px;
  --radius-lg: 26px;

  --gutter: max(var(--space-4), env(safe-area-inset-left));
  --gutter-r: max(var(--space-4), env(safe-area-inset-right));
  --maxw: 1100px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
}