/* The Fun Place — brand tokens (CSS custom properties)
 * Colors SAMPLED from the logo. Replace with exact brand-book hex when available.
 * Rule (Constitution §III): text uses --ink or white; the rainbow is for surfaces & motion. */

:root {
  /* Anchor / ink — the navy outline that holds the whole logo together */
  --ink:        #16267e;
  --ink-deep:   #0f1b5c;

  /* Rainbow accents — sampled left-to-right across the wordmark */
  --red:        #ed1c24;  /* the "f" */
  --orange:     #f5821f;  /* the "a" */
  --yellow:     #fdb913;  /* the "u" + the star */
  --green:      #5cba47;  /* the "n" */
  --teal:       #1fb6a6;  /* balloon / accents */
  --sky:        #29abe2;  /* the "p" */
  --blue:       #2e5bd7;  /* royal blue */
  --purple:     #8e2dc4;  /* the "n"/"l" */
  --pink:       #ec1c8e;  /* the "ce" */
  --cta-teal:   #0a7d85;  /* deep teal — primary action (brightest teal that keeps white text AA 4.6:1) */

  /* Surfaces */
  --bg:         #ffffff;
  --surface:    #fff9f0;  /* warm white for cards/sections */
  --surface-2:  #f3f5ff;  /* cool tint */

  /* Semantic (derive, don't re-pick) */
  --success:    var(--green);
  --warning:    var(--yellow);
  --danger:     var(--red);
  --cta:        var(--cta-teal); /* primary action — deep teal */
  --cta-ink:    #ffffff;         /* white text on --cta-teal = 4.6:1 (AA pass) */
  --focus-ring: var(--blue);

  /* Radii — chunky & rounded like the lettering */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Type */
  --font-display: "Baloo 2", "Fredoka", system-ui, sans-serif; /* rounded, chunky, friendly */
  --font-body:    "Nunito", "Inter", system-ui, sans-serif;     /* legible companion for forms/body */

  /* Motion signature — squash & stretch; nothing moves linearly (Constitution §IV) */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot "pop" */
  --ease-squish: cubic-bezier(0.5, 0, 0.2, 1.4);
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med:  420ms;
  --dur-slow: 800ms;

  /* Audience moods — one brand, two emotions (BRAND.md §2) */
  --festive-sky: linear-gradient(160deg, #ffe9a8 0%, #ffd0e4 52%, #c9ecff 100%); /* Birthday: bright, hyped */
  --trust-sky:   linear-gradient(160deg, #dff3ff 0%, #eaf7ec 55%, #fff8ec 100%);  /* After-school: calm, safe */

  /* The sticker look — heavy navy ink outline + soft drop (the logo's signature) */
  --sticker-ink:    var(--ink);
  --sticker-stroke: 3px;                 /* outline weight on shapes/letters */
  --sticker-shadow: 0 8px 0 rgba(15,27,92,.12), 0 18px 28px rgba(15,27,92,.18);
  --elev-card:      0 2px 0 rgba(15,27,92,.08), 0 10px 24px rgba(15,27,92,.12);

  /* Full-bleed layout system (every page is edge-to-edge; text stays readable) */
  --bleed: 100vw;                        /* sections span the viewport */
  --gutter: clamp(16px, 4vw, 64px);      /* inner padding so content never kisses the edge */
  --readable: 68ch;                      /* max measure for body copy inside a full-bleed section */
  --content-max: 1240px;                 /* max measure for UI rows (forms, cards) */
  --space-1: 8px;  --space-2: 16px;  --space-3: 24px;
  --space-4: 40px; --space-5: 64px;  --space-6: 104px;  /* section rhythm */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-med: 1ms; --dur-slow: 1ms;
          --ease-bounce: linear; --ease-squish: linear; --ease-soft: linear; }
}