/* Design tokens — Love is family */
:root {
  /* Brand colors */
  --color-accent:         #c6a7f8;   /* lavender 500 */
  --color-accent-hover:   #b891f5;
  --color-text-primary:   #141414;
  --color-text-secondary: #8c8c8c;
  --color-surface:        #fcfcfc;
  --color-white:          #ffffff;
  --color-border:         #d9d9d9;
  --color-error:          #e85d4a;

  /* Feature tile colors */
  --tile-lavender-bg:   #bc9bed;
  --tile-teal-bg:       #4ecdc4;
  --tile-coral-bg:      #ff9188;
  --tile-yellow-bg:     #FCF2D1;

  /* Safety card colors */
  --safe-purple-bg:     #e5d7fc;
  --safe-coral-bg:      #ffd1cb;
  --safe-yellow-bg:     #FCF2D1;
  --safe-purple-icon:   #c6a7f8;
  --safe-coral-icon:    #ff9188;
  --safe-yellow-icon:   #f9e29a;

  /* App preview section */
  --color-preview-bg:   #c6a7f8;

  /* Typography */
  --font-family:         'IBM Plex Sans', sans-serif;
  --font-handwritten:    'Caveat', cursive;
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;

  /* Font sizes */
  --fs-display:   64px;
  --lh-display:   80px;
  --ls-display:   -1.28px;

  --fs-h1:        56px;
  --fs-h2:        48px;
  --fs-h3:        32px;

  --fs-body-lg:   22px;
  --lh-body-lg:   28px;
  --fs-body-md:   16px;
  --lh-body-md:   24px;
  --fs-body-sm:   14px;

  --fs-label:     17px;
  --lh-label:     22px;
  --fs-callout:   13px;
  --lh-callout:   18px;
  --ls-callout:   -0.08px;

  /* Radii */
  --radius-card:      32px;
  --radius-button:    64px;
  --radius-input:     8px;
  --radius-checkbox:  4px;
  --radius-tile:      20px;
  --radius-safe-card: 16px;

  /* Shadows */
  --shadow-card:
    0px 13px 44.5px  rgba(181, 171, 191, 0.09),
    0px 8.426px 26.061px rgba(181, 171, 191, 0.07),
    0px 5.007px 14.174px rgba(181, 171, 191, 0.05),
    0px 2.6px 7.231px   rgba(181, 171, 191, 0.05),
    0px 1.059px 3.626px rgba(181, 171, 191, 0.04),
    0px 0.241px 1.751px rgba(181, 171, 191, 0.02);

  /* Layout */
  --container-max: 1110px;
  --container-px:  24px;
  --section-py:    100px;

  /* Spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
}