/* ===============================
   Design Tokens — Scratch Education Platform
   =============================== */
:root {
  /* ---- Primary Brand ---- */
  --color-primary:        #FF6B1A;
  --color-primary-hover:  #E55D0E;
  --color-primary-light:  #FFF1E6;

  /* ---- Semantic ---- */
  --color-success:  #52C41A;
  --color-danger:   #FF4D4F;
  --color-warning:  #FAAD14;
  --color-info:     #1890FF;

  /* ---- Text ---- */
  --color-text-primary:   #222222;
  --color-text-secondary: #666666;
  --color-text-tertiary:  #999999;
  --color-text-disabled:  #CCCCCC;

  /* ---- Surfaces ---- */
  --color-border:    #E8E8E8;
  --color-bg-page:   #F5F5F5;
  --color-bg-white:  #FFFFFF;
  --color-bg-dark:   #1A1A2E;

  /* ---- Typography ---- */
  --font-family-base: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-xxl:  24px;
  --text-hero: 32px;

  /* ---- Spacing (4px scale) ---- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-base: 6px;
  --radius-lg:   8px;
  --radius-xl:   12px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px  rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
}