/*
 * 21 Young Hearts — Design Tokens
 * Single source of truth for all CSS custom properties.
 * All other stylesheets consume these; nothing is hard-coded elsewhere.
 *
 * Source of truth: 21YH_TEMPS/21-young-hearts-design-system.html
 * ─────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Colour: Brand primaries ───────────────────────────────── */
  --color-blue:           #01639A;
  --color-blue-light:     #E8F4FA;
  --color-blue-mid:       #0282C8;
  --color-blue-dark:      #004D75;

  --color-red:            #E24626;
  --color-red-light:      #FDEAE5;
  --color-red-dark:       #B8351D;

  --color-yellow:         #FCF34B;
  --color-yellow-light:   #FEF9D1;
  --color-yellow-dark:    #D4C800;

  /* ── Colour: Warm neutrals ─────────────────────────────────── */
  --color-warm-white:     #FFFAF6;   /* page background */
  --color-cream:          #F5EDE6;   /* card / section alt */
  --color-grey-light:     #E8DDD4;   /* borders, dividers */
  --color-grey-mid:       #B8A99A;   /* disabled, subtle */
  --color-grey-dark:      #7A6B5D;   /* secondary text */
  --color-warm-black:     #2D2420;   /* primary text — never pure black */

  /* ── Colour: Semantic ──────────────────────────────────────── */
  --color-success:        #2D8A4E;
  --color-warning:        #D4880F;
  --color-error:          #C53030;
  --color-info:           var(--color-blue);

  /* ── Typography ────────────────────────────────────────────── */
  --font-display:         'Quicksand', 'Segoe UI', sans-serif;
  --font-body:            'Quicksand', 'Segoe UI', sans-serif;

  --text-xs:              0.75rem;    /* 12px */
  --text-sm:              0.875rem;   /* 14px */
  --text-base:            1rem;       /* 16px */
  --text-md:              1.125rem;   /* 18px */
  --text-lg:              1.25rem;    /* 20px */
  --text-xl:              1.5rem;     /* 24px */
  --text-2xl:             1.875rem;   /* 30px */
  --text-3xl:             2.25rem;    /* 36px */
  --text-4xl:             3rem;       /* 48px */
  --text-5xl:             3.75rem;    /* 60px */

  --leading-tight:        1.2;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-black:         700;

  /* ── Spacing (8px base) ────────────────────────────────────── */
  --space-xs:             0.25rem;    /*  4px */
  --space-sm:             0.5rem;     /*  8px */
  --space-md:             1rem;       /* 16px */
  --space-lg:             1.5rem;     /* 24px */
  --space-xl:             2rem;       /* 32px */
  --space-2xl:            3rem;       /* 48px */
  --space-3xl:            4rem;       /* 64px */
  --space-4xl:            6rem;       /* 96px */
  --space-5xl:            8rem;       /* 128px */

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:            1428px;
  --max-width-narrow:     720px;
  --sidebar-width:        260px;
  --container-gutter:     var(--space-md);   /* 16px — mobile default */

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:            0 1px 3px rgba(45, 36, 32, 0.08);
  --shadow-md:            0 4px 12px rgba(45, 36, 32, 0.1);
  --shadow-lg:            0 8px 30px rgba(45, 36, 32, 0.12);
  --shadow-xl:            0 16px 50px rgba(45, 36, 32, 0.15);

  /* ── Transitions ────────────────────────────────────────────── */
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-slow:        400ms;

  /* ── Focus ──────────────────────────────────────────────────── */
  --focus-ring:           0 0 0 3px rgba(1, 99, 154, 0.4);

}