/* =========================================================
   Neo-Brutalism UI — Design Tokens
   Drop this file into your project's global CSS entry.
   All components consume these via var(--nb-*).
   ========================================================= */

/* ---------- Font: 思源黑体 loaded in index.html via CDN ---------- */

:root {
  /* ---------- Colors: base ---------- */
  --nb-cream:        #FBF6E9;  /* card surface, primary text background */
  --nb-canvas:       #F4DFA8;  /* outer canvas / subtle warm wash */
  --nb-ink:          #1A1A1A;  /* borders, primary text, icons */
  --nb-ink-muted:    #5F5E5A;  /* secondary text — warm gray, NEVER cool gray */
  --nb-ink-hint:     #888780;  /* placeholder text, hints */

  /* ---------- Colors: accent (max 3 per screen) ---------- */
  --nb-yellow:       #F7C948;  /* reward, coin, primary action */
  --nb-yellow-soft:  #FFECA6;  /* quiet highlight, selected nav */
  --nb-mint:         #7FD7E0;  /* secondary action, info */
  --nb-lime:         #C8F26C;  /* username pills, tags */
  --nb-coral:        #D85A30;  /* warnings, "hot" badges, danger */

  /* ---------- Borders ---------- */
  --nb-border-width:    2.5px;
  --nb-border-width-lg: 3px;
  --nb-border-width-sm: 2px;
  --nb-border-style:    solid;

  /* ---------- Border radius ---------- */
  --nb-radius-sm: 8px;   /* tags, small buttons */
  --nb-radius-md: 12px;  /* inputs, buttons */
  --nb-radius-lg: 14px;  /* cards */
  --nb-radius-xl: 28px;  /* phone screen / full-page containers */
  --nb-radius-pill: 999px;
  /* NEVER exceed 28px — large radii kill the brutalist feel */

  /* ---------- Shadows (HARD offset, never blurred) ---------- */
  --nb-shadow-sm:    2px 2px 0 0 var(--nb-ink);
  --nb-shadow-md:    4px 4px 0 0 var(--nb-ink);
  --nb-shadow-lg:    6px 6px 0 0 var(--nb-ink);
  --nb-shadow-xl:    7px 7px 0 0 var(--nb-ink);

  /* Hover state: shadow grows by 1px and element nudges up-left */
  --nb-shadow-hover-md: 5px 5px 0 0 var(--nb-ink);

  /* ---------- Typography ---------- */
  --nb-font-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --nb-font-body:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --nb-text-xs:   11px;
  --nb-text-sm:   12px;
  --nb-text-base: 14px;
  --nb-text-md:   16px;
  --nb-text-lg:   18px;
  --nb-text-xl:   22px;
  --nb-text-2xl:  28px;

  /* Only one font weight. Smiley Sans is already heavy. */
  --nb-font-weight: 400;
  --nb-line-height: 1.4;

  /* ---------- Spacing ---------- */
  --nb-space-1: 4px;
  --nb-space-2: 8px;
  --nb-space-3: 12px;
  --nb-space-4: 16px;
  --nb-space-5: 20px;
  --nb-space-6: 24px;
  --nb-space-8: 32px;

  /* ---------- Rotation (for intentional asymmetry) ---------- */
  --nb-tilt-left:  -1.2deg;
  --nb-tilt-right:  1deg;
  --nb-tilt-label: -2deg;
  --nb-tilt-badge:  3deg;

  /* ---------- Motion ---------- */
  --nb-transition-fast: 80ms ease;
  --nb-transition:      120ms ease;
  /* NEVER exceed 150ms — this style is snappy, not smooth */
}

/* ---------- Global resets that this style needs ---------- */
.nb-root,
.nb-root * {
  box-sizing: border-box;
}

.nb-root {
  font-family: var(--nb-font-display);
  font-weight: var(--nb-font-weight);
  color: var(--nb-ink);
  background: var(--nb-canvas);
  /* dotted background — signature ---------------------------- */
  background-image: radial-gradient(circle, var(--nb-ink) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

/* ---------- Utility: hard shadow on any element ---------- */
.nb-shadow    { box-shadow: var(--nb-shadow-md); }
.nb-shadow-lg { box-shadow: var(--nb-shadow-lg); }
.nb-shadow-sm { box-shadow: var(--nb-shadow-sm); }

/* ---------- Utility: standard border ---------- */
.nb-border {
  border: var(--nb-border-width) var(--nb-border-style) var(--nb-ink);
}

/* ---------- Utility: tilt classes ---------- */
.nb-tilt-l { transform: rotate(var(--nb-tilt-left)); }
.nb-tilt-r { transform: rotate(var(--nb-tilt-right)); }

/* ---------- Dark mode (optional — only if existing site has it) ---------- */
/* Uncomment if needed. Keep accent colors; flip cream/canvas/ink. */
/*
[data-theme="dark"] {
  --nb-cream:     #2B2620;
  --nb-canvas:    #1A1410;
  --nb-ink:       #FBF6E9;
  --nb-ink-muted: #B8B4A8;
  --nb-ink-hint:  #8A867C;
}
*/