/* Sprout Arcade — design tokens. Single source of truth for colour, type, space.

   Direction is taken straight from the logo: a glossy sticker set. Deep navy
   outline on everything, candy-bright fills, white outer ring, chunky pressable
   depth. Sprout is green, Arcade is orange — the same two hues carry the UI.

   Text on a coloured fill is ALWAYS navy: every subject hue below clears 5.4:1
   against --stroke, so nothing needs a special case. */

:root {
  /* Surfaces — a sunlit jungle clearing */
  --bg:          #EFFAE8;
  --bg-sky:      #DDF3FF;
  --bg-leaf:     #C4E7A8;
  --bg-dots:     #C4E7A8;
  --surface:     #FFFFFF;
  --surface-2:   #EAF7E1;
  --line:        #CBE8B8;
  --line-strong: #9CCF78;

  /* The sticker outline. Used as border, ink, and SVG stroke everywhere. */
  --stroke:      #0A2754;
  --stroke-soft: #2E609F;

  /* Ink */
  --ink:      #0A2754;
  --ink-soft: #2E609F;
  --ink-mute: #6D86A8;
  --on-color: #0A2754;   /* text sitting on a candy fill is navy, not white */

  /* Brand — "Sprout" green */
  --primary:      #4FBF12;
  --primary-dark: #2F8A00;
  --primary-soft: #E2F7CE;

  /* "Go" — "Arcade" orange. Start, play again, next, done: anything a child presses. */
  --go:      #FF8A1E;
  --go-dark: #C95E1D;

  /* Subject hues, lifted from the logo. base / pressed edge / pale tint / text-on. */
  --c-letters:  #C77DFF;  --c-letters-dark:  #8E37D6;  --c-letters-soft:  #F3E6FF;  --c-letters-on:  #0A2754;
  --c-words:    #FF6FB5;  --c-words-dark:    #D62D82;  --c-words-soft:    #FFE4F1;  --c-words-on:    #0A2754;
  --c-numbers:  #23AEE7;  --c-numbers-dark:  #1073AB;  --c-numbers-soft:  #D9F1FC;  --c-numbers-on:  #0A2754;
  --c-money:    #F2C10B;  --c-money-dark:    #C08E00;  --c-money-soft:    #FDF3CC;  --c-money-on:    #0A2754;
  --c-logic:    #4FBF12;  --c-logic-dark:    #2F8A00;  --c-logic-soft:    #E2F7CE;  --c-logic-on:    #0A2754;
  --c-keyboard: #A2E909;  --c-keyboard-dark: #6FAB00;  --c-keyboard-soft: #F0FCD2;  --c-keyboard-on: #0A2754;
  --c-science:  #00C9A7;  --c-science-dark:  #00876F;  --c-science-soft:  #D2FBF2;  --c-science-on:  #0A2754;
  --c-social:   #FF6B6B;  --c-social-dark:   #C43535;  --c-social-soft:   #FFE1E1;  --c-social-on:   #0A2754;
  --c-writing:  #8E8BFF;  --c-writing-dark:  #5551D6;  --c-writing-soft:  #E8E7FF;  --c-writing-on:  #0A2754;
  --c-art:      #EE5FD8;  --c-art-dark:      #B01F9C;  --c-art-soft:      #FFE2FA;  --c-art-on:      #0A2754;
  --c-multiplication: #FFB03A; --c-multiplication-dark: #C77A00; --c-multiplication-soft: #FFEFD6; --c-multiplication-on: #0A2754;

  /* Semantic */
  --good:      #2F9E1E;
  --good-soft: #DDF6D2;
  --bad:       #E23B2E;
  --bad-soft:  #FFE0DC;

  /* Type — no webfonts, so this works offline and paints on the first frame */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Baloo 2", system-ui,
          -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.875rem;
  --t-2xl: 2.5rem;
  --t-3xl: 3.5rem;
  --t-4xl: 5rem;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* The sticker: navy border, white ring outside it, then a solid pressed edge. */
  --bd: 3px;                     /* standard navy border width */
  --ring: 0 0 0 3px #FFFFFF;     /* white outer ring */
  --lift: 5px;

  --shadow-sm: 0 2px 4px rgba(10,39,84,.14);
  --shadow-md: 0 4px 10px rgba(10,39,84,.16);
  --shadow-lg: 0 12px 30px rgba(10,39,84,.26);

  --tap: 56px;
  --dur: 180ms;
  --ease: cubic-bezier(.34, 1.3, .64, 1);
}

/* Jungle at night. The candy fills stay bright and keep their navy text —
   only the world around them darkens, so contrast never changes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0A2033;
    --bg-sky:      #071A2C;
    --bg-leaf:     #17405A;
    --bg-dots:     #17405A;
    --surface:     #13314A;
    --surface-2:   #1B4062;
    --line:        #245173;
    --line-strong: #3B7099;

    --stroke:      #04162E;
    --stroke-soft: #7FA8CC;

    --ink:      #EAF4FF;
    --ink-soft: #A9C6E0;
    --ink-mute: #7593B0;

    --primary-soft: #1B4020;
    --c-letters-soft:  #33204A;
    --c-words-soft:    #4A1C33;
    --c-numbers-soft:  #10374C;
    --c-money-soft:    #40350C;
    --c-logic-soft:    #1D3F12;
    --c-keyboard-soft: #2C3D0B;
    --c-science-soft:  #0C3B34;
    --c-social-soft:   #451D1D;
    --c-writing-soft:  #22214A;
    --c-art-soft:      #431739;
    --c-multiplication-soft: #43300C;

    --good-soft: #16401A;
    --bad-soft:  #45201C;

    --ring: 0 0 0 3px rgba(255,255,255,.9);

    --shadow-sm: 0 2px 4px rgba(0,0,0,.5);
    --shadow-md: 0 4px 10px rgba(0,0,0,.5);
    --shadow-lg: 0 12px 30px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:#0A2033; --bg-sky:#071A2C; --bg-leaf:#17405A; --bg-dots:#17405A;
  --surface:#13314A; --surface-2:#1B4062; --line:#245173; --line-strong:#3B7099;
  --stroke:#04162E; --stroke-soft:#7FA8CC;
  --ink:#EAF4FF; --ink-soft:#A9C6E0; --ink-mute:#7593B0;
  --primary-soft:#1B4020;
  --c-letters-soft:#33204A; --c-words-soft:#4A1C33; --c-numbers-soft:#10374C;
  --c-money-soft:#40350C; --c-logic-soft:#1D3F12; --c-keyboard-soft:#2C3D0B;
  --c-science-soft:#0C3B34; --c-social-soft:#451D1D;
  --c-writing-soft:#22214A; --c-art-soft:#431739;
  --c-multiplication-soft:#43300C;
  --good-soft:#16401A; --bad-soft:#45201C;
  --ring: 0 0 0 3px rgba(255,255,255,.9);
  --shadow-sm:0 2px 4px rgba(0,0,0,.5);
  --shadow-md:0 4px 10px rgba(0,0,0,.5);
  --shadow-lg:0 12px 30px rgba(0,0,0,.6);
}