/*
 * 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 — decorative pills / badges / captions ONLY */
  --text-sm:              var(--text-base); /* readable meta/labels — pinned to the body floor (see media query below) */
  --text-base:            1rem;            /* body floor — 16px on mobile; raised to 17px from 600px up */
  --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:     0.75rem;           /* 12px — mobile default (tight edge gap; boxes sit close to screen edge) */
  --box-pad:              var(--space-md);   /* internal padding for outlined content boxes — 16px mobile; 24/32 desktop (see base.css) */

  /* ── 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);

  /* ── Comic-book card pattern ────────────────────────────────── */
  /* The shared border + offset-shadow signature used across cards.
   * Value-identical to the literals they replace — no visual change. */
  --border-comic:         4px solid var(--color-warm-black);
  --shadow-comic:         5px 5px 0 var(--color-warm-black);   /* resting */
  --shadow-comic-sm:      3px 3px 0 var(--color-warm-black);   /* shifted hover */
  --shadow-comic-lg:      8px 8px 0 var(--color-warm-black);   /* lifted hover */

  /* ── Z-index scale (overlay layers) ─────────────────────────── */
  /* Small per-component values (1–6) are local stacking contexts and
   * intentionally NOT tokenised. These cover the global overlay stack. */
  --z-nav:                100;
  --z-mega-nav:           99;
  --z-modal:              9000;
  --z-lightbox:           9999;

  /* ── 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);

}

/* ── Readable-text floor ──────────────────────────────────────────
 * Minimum 16px on mobile, 17px on tablet & desktop. Because --text-sm
 * is pinned to --text-base, raising the base here lifts both — and with
 * them every body, meta, label, nav, footer, button and form-field that
 * consumes these tokens. Decorative --text-xs pills/badges are exempt.
 * ─────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  :root { --text-base: 1.0625rem; }   /* 17px */
}