@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  /* ── Doodle color palette ── */
  --ink:              #1a1a1a;
  --paper:            #fffdf0;
  --paper-alt:        #f0ebe0;
  --card:             #ffffff;
  --primary:          #52b788;
  --primary-hover:    #3a9d6e;
  --primary-light:    #b7e4c7;
  --primary-pale:     #d8f3dc;
  --yellow:           #ffd60a;
  --yellow-pale:      #fff9c0;
  --danger:           #ff4757;
  --danger-pale:      #ffe4e6;
  --muted:            #8a8070;

  /* ── Legacy aliases (keep existing HTML working) ── */
  --color-bg:            var(--paper);
  --color-bg-alt:        var(--paper-alt);
  --color-primary:       var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-light: var(--primary-light);
  --color-primary-pale:  var(--primary-pale);
  --color-secondary:     #74c69d;
  --color-text:          var(--ink);
  --color-text-secondary:#4a5568;
  --color-text-muted:    var(--muted);
  --color-white:         var(--card);
  --color-border:        #c8c0b0;
  --color-danger:        var(--danger);
  --color-success:       var(--primary);

  /* ── Typography ── */
  --font-hand: 'Caveat', cursive;
  --font-cn:   'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', sans-serif;
  --font-en:   'Caveat', cursive;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Doodle borders & shadows ── */
  --border-w:      2.5px;
  --shadow-ink-sm: 2px 2px 0 var(--ink);
  --shadow-ink:    4px 4px 0 var(--ink);
  --shadow-ink-lg: 6px 6px 0 var(--ink);

  /* legacy shadow tokens */
  --shadow-sm: var(--shadow-ink-sm);
  --shadow-md: var(--shadow-ink);
  --shadow-lg: var(--shadow-ink-lg);

  /* ── Border radii (organic / asymmetric) ── */
  --radius-sm:   6px 8px 6px 8px  / 8px 6px 8px 6px;
  --radius-md:   10px 8px 12px 8px / 8px 12px 8px 10px;
  --radius-lg:   14px 10px 16px 10px / 10px 16px 10px 14px;
  --radius-xl:   18px 12px 20px 14px / 12px 20px 14px 18px;
  --radius-full: 50px;

  /* ── Transitions ── */
  --transition-fast:   0.1s ease;
  --transition-normal: 0.18s ease;
  --transition-slow:   0.35s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-cn);
  background-color: var(--paper);
  /* subtle dot-grid — sketchbook paper feel */
  background-image: radial-gradient(circle, rgba(160,148,120,0.35) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
}

button {
  cursor: pointer;
  font-family: var(--font-cn);
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.7) rotate(-2deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-3deg); }
  75%       { transform: rotate(3deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-ink); }
  50%       { box-shadow: var(--shadow-ink-lg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}