/* RandomPop design tokens — brand: deep emerald + electric lime (from resource/랜덤팝 로고.html) */
:root {
  color-scheme: light;

  /* Brand */
  --brand: #012F26;          /* deep emerald — logo box */
  --brand-700: #011C17;
  --brand-600: #01231D;
  --brand-100: #D9E0DE;
  --brand-50: #E6EAE9;
  --lime: #C9EE44;           /* signature lime — ribbon, use on emerald or as fill only */
  --lime-400: #B5D63D;
  --accent: #97B333;         /* lime for borders/strokes on light surfaces */
  --accent-ink: #5A6B1F;     /* lime-family text on light surfaces (AA) */
  --accent-soft: #F4FADB;
  --accent-soft-2: #EEFAC5;

  /* Surfaces */
  --bg: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-3: #ECEEED;
  --page-bg: #FAFAFB;

  /* Text */
  --ink: #0C0D0D;
  --ink-2: #191A1D;
  --text-2: #404040;
  --muted: #575757;
  --subtle: #6B6B6B;

  /* Lines */
  --line: #E6E6E6;
  --line-strong: #CFCFCF;

  /* Actions */
  --primary: var(--brand);
  --primary-hover: var(--brand-600);
  --on-primary: #FFFFFF;

  /* Semantic */
  --danger: #C62F35;
  --danger-soft: #FDF1F1;
  --success: #1E7F4F;
  --success-soft: #ECF7F1;

  /* Grades */
  --g-legend: var(--accent-ink);
  --g-legend-bg: var(--accent-soft-2);
  --g-epic: #624492;
  --g-epic-bg: #F1EAFD;
  --g-rare: #1E40AF;
  --g-rare-bg: #EEF2FB;
  --g-common: #575757;
  --g-common-bg: #F2F2F2;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Lora", "Pretendard Variable", Georgia, serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(4, 6, 15, .05);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, .06);
  --shadow-3: 0 16px 40px rgba(1, 47, 38, .16);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Layout */
  --app-max: 480px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --actionbar-h: 80px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Z-index scale */
  --z-sticky: 20;
  --z-bar: 40;
  --z-toast: 1000;
}