/* ============================================================
   Back to School 2026 — Design tokens
   Based on Something New Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand colors — Back to School blue ── */
  --sn-primary:       #4A78C7;
  --sn-primary-hover: #3D68B3;
  --sn-primary-press: #31579E;
  --sn-primary-soft:  #D8E4F5;
  --sn-primary-wash:  #EDF2FA;

  --sn-yellow:        #ffd22f;

  --sn-black:         #1a1a1a;
  --sn-ink:           #222222;
  --sn-ink-2:         #3a3a3a;
  --sn-ink-3:         #6b6b6b;

  --sn-navy:          #1E3A5F;
  --sn-navy-2:        #162D4A;
  --sn-slate:         #5A86B0;
  --sn-slate-deep:    #3D6B94;
  --sn-sky:           #8BB8E0;

  --sn-white:         #ffffff;
  --sn-bone:          #f8f9fc;
  --sn-cream:         #eef2f9;
  --sn-gray-100:      #f0f2f6;
  --sn-gray-200:      #dde1e9;
  --sn-gray-300:      #c4c9d4;

  /* ── Semantic ── */
  --sn-bg:            var(--sn-bone);
  --sn-surface:       var(--sn-white);
  --sn-surface-alt:   var(--sn-cream);
  --sn-fg-1:          var(--sn-ink);
  --sn-fg-2:          var(--sn-ink-2);
  --sn-fg-3:          var(--sn-ink-3);
  --sn-border:        var(--sn-black);
  --sn-focus:         var(--sn-primary);
  --sn-danger:        #c94a2a;

  /* ── Typography ── */
  --sn-font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sn-font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sn-font-hand:    'Kalam', 'Bradley Hand', 'Segoe Print', cursive;

  /* ── Radii ── */
  --sn-radius-sm:   6px;
  --sn-radius-md:   12px;
  --sn-radius-lg:   20px;
  --sn-radius-xl:   28px;
  --sn-radius-pill: 999px;

  /* ── Borders ── */
  --sn-border-w:    2px;

  /* ── Shadows ── */
  --sn-shadow-sm:   0 2px 6px rgba(20, 30, 60, 0.08);
  --sn-shadow-md:   0 6px 18px rgba(20, 30, 60, 0.10);
  --sn-shadow-lg:   0 14px 36px rgba(20, 30, 60, 0.14);
  --sn-shadow-hard: 4px 4px 0 var(--sn-black);
  --sn-shadow-hard-sm: 2px 2px 0 var(--sn-black);

  /* ── Spacing (4pt grid) ── */
  --sn-space-1:  0.25rem;
  --sn-space-2:  0.5rem;
  --sn-space-3:  0.75rem;
  --sn-space-4:  1rem;
  --sn-space-5:  1.5rem;
  --sn-space-6:  2rem;
  --sn-space-7:  3rem;
  --sn-space-8:  4rem;
  --sn-space-9:  6rem;

  /* ── Motion ── */
  --sn-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sn-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --sn-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --sn-dur-fast:      120ms;
  --sn-dur-base:      200ms;
  --sn-dur-slow:      360ms;
}