/* ============================================================
   Donează · Something New — Design tokens
   Something New Design System (varianta galben / negru)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@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 ── */
  --sn-yellow:        #ffd22f;
  --sn-yellow-hover:  #f5c41a;
  --sn-yellow-press:  #e6b70f;
  --sn-yellow-soft:   #fff3c2;
  --sn-yellow-wash:   #fffae6;

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

  --sn-bone:          #fdfbf3;
  --sn-cream:         #faf4e1;
  --sn-amber:         #c97d00;
  --sn-cocoa:         #6b4226;
  --sn-white:         #ffffff;

  /* ── 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-danger:        #b94040;
  --sn-danger-wash:   #fdf2f2;

  /* ── Tipografie ── */
  --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;

  /* ── Raze ── */
  --sn-radius-sm:   8px;
  --sn-radius-md:   12px;
  --sn-radius-lg:   20px;
  --sn-radius-pill: 999px;

  /* ── Borduri & umbre hard ── */
  --sn-border-w:       2px;
  --sn-shadow-hard:    4px 4px 0 var(--sn-black);
  --sn-shadow-hard-sm: 2px 2px 0 var(--sn-black);

  /* ── Spațiere (grilă 4pt) ── */
  --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;

  /* ── Mișcare ── */
  --sn-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --sn-dur-fast:  120ms;
  --sn-dur-base:  200ms;
}