/* Spelling Live — brand tokens
 * Drop into a global stylesheet. Use CSS variables anywhere you'd
 * reference brand colours so the system stays consistent.
 */

:root {
  /* Brand */
  --sl-purple:        #6C46E0;
  --sl-purple-deep:   #5635C2;
  --sl-purple-soft:   #EDE7FF;
  --sl-yellow:        #FFC83A;   /* the tick / streak / reward */
  --sl-yellow-deep:   #E8A41A;

  /* Ink & paper */
  --sl-ink:           #1A1B2E;
  --sl-ink-2:         #3B3D54;
  --sl-ink-mute:      #7A7E97;
  --sl-paper:         #F5F0E1;   /* calm cream surface */
  --sl-bg:            #EEF1FA;   /* lavender app background */

  /* Roles */
  --sl-mint:          #46D69E;   /* success · "got it!" */
  --sl-mint-deep:     #2BB07F;
  --sl-coral:         #F76A8C;   /* early-years accent */
  --sl-coral-deep:    #D74A6A;
  --sl-sky:           #4DC8E8;   /* fluent-level accent */
  --sl-teal:          #1FA38C;   /* alt brand */

  /* Radii */
  --sl-r-icon:        22%;        /* 22% of icon edge — matches the SVG rx */
  --sl-r-tile:        12px;
  --sl-r-card:        16px;
  --sl-r-pill:        999px;

  /* Type */
  --sl-font-display:  'Fraunces', Georgia, serif;
  --sl-font-ui:       'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}