/* variable.css */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg:         #F0F4FF;
  --primary:    #3D2C8D;
  --secondary:  #56CCF2;
  --text-dark:  #1A1A2E;
  --text-light: #FFFFFF;
  --accent:     #7B5EA7;
  --card-bg:    #FFFFFF;
  --muted:      #8892B0;

  --font-heading: 'IBM Plex Serif', serif;
  --font-body:    'DM Sans', sans-serif;

  --section-pad: 80px 5%;
  --radius:      16px;
  --radius-sm:   999px;

  /* BUTTON SYSTEM */
  --btn-dark:   #0969e6;
  --btn-light:  #56CCF2;
  --btn-text:   #FFFFFF;

  --shadow-card: 0 4px 24px rgba(9,105,230,0.10);
  /* NEW — button system (option L) */
  --btn-fill:   #08306B;
  --btn-shadow: #08519C;
  --btn-glow:   rgba(8,81,156,0.35);

  /* NEW — sticker gradient */
  --sticker-grad: linear-gradient(135deg, #9ECAE1, #6BAED6);

  /* NEW — UI polish round 2 */
  --shadow-charcoal: #233c66;
  --badge-purple-grad: linear-gradient(135deg, #3D2C8D, #7B5EA7);

  /* NEW — page background glow (symmetric radial) */
  --page-bg-glow: radial-gradient(ellipse at center, rgba(157,193,231,0.5) 0%, rgba(246,239,230,0.65) 45%, #EDF1FB 100%);
}