/* ==========================================================================
   alphabet CRÈCHE — design tokens (v3 "crayon box")
   One source of truth. Components never use raw values that exist here.

   Brand anchors: the yellow badge #FFDE59 and red wordmark #EB3821 from the
   uniform / Instagram mark. Around them, a crayon box taken from the centre's
   own walls (sky-blue mural, yellow rooms, alphabet chart colours).

   Every colour has three jobs, and only the -ink shade may carry small text:
     --x        vivid: shapes, blocks, big display type, decoration
     --x-soft   tint: section grounds and cards (ink text ≥ 13.7:1 on all)
     --x-ink    deep: buttons + small coloured text (white on it ≥ 5.4:1)
   On yellow, small text is ink or grape-ink only (red-ink is 4.3:1 there).
   ========================================================================== */

/* Self-hosted fonts (Latin subsets only; Gurmukhi subset to the 12 glyphs of
   the tagline). No third-party requests on the critical path. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/baloo2-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Gurmukhi"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/noto-gurmukhi-600-subset.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---- Text ---- */
  --ink:        #1B1A33;   /* 12.8:1 on yellow, ≥ 13.7:1 on every tint */
  --text:       #1B1A33;
  --text-2:     #45435E;   /* ≥ 7.1:1 on every ground */
  --muted:      #66647B;   /* ≥ 4.6:1 on every tint */
  --paper:      #FFFFFF;
  --rule:       rgba(27, 26, 51, .12);

  /* ---- Crayon box ---- */
  --yellow:       #FFDE59;  --yellow-soft: #FFF3C4;
  --red:          #EB3821;  --red-ink:  #C4291A;  --red-soft: #FFE1DA;
  --sky:          #52C3F2;  --sky-ink:  #0B6A99;  --sky-soft: #D6F1FC;
  --leaf:         #34C170;  --leaf-ink: #137A40;  --leaf-soft: #D9F7E4;
  --grape:        #8B5CF6;  --grape-ink: #5B2FD0; --grape-soft: #ECE4FF;
  --bubble:       #FF6FAE;  --bubble-ink: #C2185B; --bubble-soft: #FFE1EE;
  --tangerine:    #FF9A2E;  --tangerine-ink: #A94F00; --peach-soft: #FFE8D4;
  --cream:        #FFF8E8;

  --wa:   #0F7A40;          /* WhatsApp action (white on it = 5.4:1) */

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-brand:   "Baloo 2", "Segoe UI", system-ui, sans-serif;  /* wordmark, blocks */
  --font-pa:      "Noto Sans Gurmukhi", sans-serif;

  --fs-display: clamp(2.6rem, 1.3rem + 5.6vw, 5.9rem);
  --fs-h2:      clamp(2.1rem, 1.35rem + 3.1vw, 3.8rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + .75vw, 1.8rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --fs-body:    1rem;
  --fs-label:   .78rem;
  --lh-tight:   1.02;
  --lh-head:    1.08;
  --lh-body:    1.62;

  /* ---- Space (8px base) ---- */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;
  --section: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --gutter:  clamp(16px, 4vw, 40px);
  --maxw:    1240px;

  /* ---- Shape: nothing sharp ---- */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 999px;
  --frame:  6px;          /* white photo border (the "polaroid" edge) */

  /* ---- Depth & gloss ---- */
  --sh-1: 0 1px 2px rgba(27, 26, 51, .06), 0 12px 28px -14px rgba(27, 26, 51, .28);
  --sh-2: 0 2px 6px rgba(27, 26, 51, .06), 0 34px 70px -34px rgba(27, 26, 51, .5);
  --sh-3: 0 40px 80px -36px rgba(27, 26, 51, .55);
  /* Candy gloss: a top highlight + a darker lip underneath, like a boiled sweet */
  --gloss: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .16);
  --gloss-lg: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -7px 0 rgba(0, 0, 0, .16);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .6s;
  --intro: 0s;            /* set to the intro length when the intro plays */

  /* ---- Layers ---- */
  --z-deco: 2;
  --z-nav: 50;
  --z-fab: 60;
  --z-cursor: 70;
  --z-menu: 80;
  --z-modal: 100;
  --z-intro: 200;
}