/* Something New — Brand Tokens
   colors_and_type.css — NU modifica direct */

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* ── Brand colors ─────────────────────────────── */
  --sn-yellow:        #ffd22f;
  --sn-yellow-hover:  #f5c41a;
  --sn-yellow-light:  #fff8d6;
  --sn-amber:         #f59e0b;
  --sn-black:         #1a1a1a;
  --sn-white:         #ffffff;
  --sn-bone:          #f5f2ea;
  --sn-cream:         #faf8f2;
  --sn-cocoa:         #7a5230;
  --sn-danger:        #d63b2f;
  --sn-danger-light:  #fde8e4;

  /* ── Ink / text ───────────────────────────────── */
  --sn-ink-1: #1a1a1a;
  --sn-ink-2: #444340;
  --sn-ink-3: #8a8680;

  /* ── Grays ────────────────────────────────────── */
  --sn-gray-100: #f0ede6;
  --sn-gray-200: #e5e2d9;
  --sn-gray-300: #ccc9c0;
  --sn-gray-400: #b0ada6;
  --sn-gray-500: #8a8680;

  /* ── Typography ───────────────────────────────── */
  --sn-font-display: 'Montserrat', sans-serif;
  --sn-font-body:    'Montserrat', sans-serif;
  --sn-font-accent:  'Kalam', cursive;

  --sn-fw-regular:   400;
  --sn-fw-semibold:  600;
  --sn-fw-bold:      700;
  --sn-fw-extrabold: 800;
  --sn-fw-black:     900;

  --sn-text-xs:   0.75rem;
  --sn-text-sm:   0.875rem;
  --sn-text-base: 1rem;
  --sn-text-lg:   1.125rem;
  --sn-text-xl:   1.25rem;
  --sn-text-2xl:  1.5rem;
  --sn-text-3xl:  1.875rem;
  --sn-text-4xl:  2.25rem;

  /* ── Spacing ──────────────────────────────────── */
  --sn-space-1:  4px;
  --sn-space-2:  8px;
  --sn-space-3:  12px;
  --sn-space-4:  16px;
  --sn-space-5:  20px;
  --sn-space-6:  24px;
  --sn-space-8:  32px;
  --sn-space-10: 40px;
  --sn-space-12: 48px;

  /* ── Border radius ────────────────────────────── */
  --sn-radius-sm:   4px;
  --sn-radius-md:   8px;
  --sn-radius-lg:   12px;
  --sn-radius-xl:   20px;
  --sn-radius-pill: 9999px;

  /* ── Shadows ──────────────────────────────────── */
  --sn-shadow-hard:    4px 4px 0 var(--sn-black);
  --sn-shadow-hard-sm: 2px 2px 0 var(--sn-black);
  --sn-shadow-soft:    0 4px 16px rgba(26, 26, 26, 0.08);
}