:root {
  /* Colors */
  --c-bg:            #FCFBF8;
  --c-surface:       #F5F4F7;
  --c-surface-warm:  #FBF6EE;
  --c-text:          #2E2C33;
  --c-text-light:    #6E6B78;
  --c-border:        #E9E7EE;

  /* Accent */
  --c-accent:        #5A64A8;
  --c-accent-soft:   #E8EAF6;

  /* Sub Accent */
  --c-moon:          #E9B95C;
  --c-moon-soft:     #FBF1DA;

  /* Beastmaster Elements (kept) */
  --c-bm-magic: #8B664B;
  --c-bm-fly: #5B8B5B;
  --c-bm-fierce: #C45B5B;
  --c-bm-solid: #4B78A4;

  --c-bm-light-magic: #F0E6DD;
  --c-bm-light-fly: #E2EFE2;
  --c-bm-light-fierce: #F5E1E1;
  --c-bm-light-solid: #DCEAF5;

  /* Typography */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --font-heading: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  
  --fz-base: 16px;
  --lh-base: 1.8;
  --space-paragraph: 1.5em;

  /* Layout */
  --w-content: 720px;
  --w-container: 1080px;

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

  /* Others */
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(46,44,51,.04), 0 6px 20px rgba(46,44,51,.06);
}

@media (min-width: 768px) {
  :root {
    --fz-base: 17px;
  }
}