/* Design tokens.
   Brand colours sampled directly from the official logo artwork
   (logo_new.jpg): pink #e95587 and green #299b68. The old site used
   #f16f9a via a .theme-color class -- close, but the logo values are the
   authoritative brand colours, so we use those.
   Font: Plus Jakarta Sans -- warm, modern, professional; suits a family
   care brand without feeling clinical or corporate. */
:root {
    /* Brand */
    --pink-50:  #fdf2f6;
    --pink-100: #fbe3ec;
    --pink-200: #f6c2d6;
    --pink-400: #ef7ba6;
    --pink-500: #e95587;   /* primary brand pink (from logo) */
    --pink-600: #d63d71;
    --pink-700: #b32e5c;

    --green-50:  #eef8f3;
    --green-100: #d7efe4;
    --green-500: #299b68;  /* secondary brand green (from logo) */
    --green-600: #1f7d53;
    --green-700: #17603f;

    /* Neutrals -- warm-tinted so the page never feels cold/grey */
    --ink-900: #1c1b22;
    --ink-700: #3d3b47;
    --ink-500: #635f70;
    --ink-300: #9c97ab;
    --ink-100: #e9e5ef;

    --surface:      #ffffff;
    --surface-soft: #fdfaf8;
    --surface-pink: #fdf5f8;
    --surface-mint: #f2faf6;

    /* Semantic aliases */
    --color-accent:      var(--pink-500);
    --color-accent-dark: var(--pink-600);
    --color-secondary:   var(--green-500);
    --color-ink:         var(--ink-900);
    --color-ink-muted:   var(--ink-500);
    --color-bg:          var(--surface-soft);
    --color-bg-alt:      var(--surface-pink);
    --color-border:      var(--ink-100);
    --color-white:       var(--surface);
    --color-success:     var(--green-500);

    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid type scale.
       --step--1 raised from clamp(0.83rem, ..., 0.9rem) (13.3-14.4px) -- it's
       used as the "secondary text" size in ~100 places (card body copy,
       footer links, form labels, table cells), which put a lot of actual
       reading content below the ~16px floor generally recommended for body
       text, particularly relevant here since most of this site's visitors
       are older adults. Still a clear step below --step-0 so the hierarchy
       between primary and secondary text isn't lost, just less extreme. */
    --step--1: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
    --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
    --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
    --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;

    --radius-sm:     10px;
    --radius-card:   18px;
    --radius-lg:     28px;
    --radius-button: 999px;

    --shadow-xs:   0 1px 2px rgba(28, 27, 34, .06);
    --shadow-soft: 0 4px 20px rgba(28, 27, 34, .07);
    --shadow-md:   0 12px 32px rgba(28, 27, 34, .09);
    --shadow-lg:   0 24px 60px rgba(28, 27, 34, .12);
    --shadow-pink: 0 10px 28px rgba(233, 85, 135, .28);

    --max-width: 1280px;
    --max-width-narrow: 760px;
}