:root {
  /* Background */
  --bg-base: #ffffff;
  --bg-warm: #f9f6f2;          /* signature warm cream */
  --bg-warm-deep: #f1ece4;

  /* Text — contrast tuned for WCAG AA on warm cream/white backgrounds */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.68);
  --text-muted: rgba(0, 0, 0, 0.48);
  --text-inverse: #ffffff;

  /* Border */
  --border-light: rgba(0, 0, 0, 0.08);
  --border-mid: rgba(0, 0, 0, 0.15);

  /* Brand accent palette (emoji-style multi-color)
   * Each hue: -base (default), -deep (hover / emphasis), -soft (tinted background).
   * Shorthand aliases (--c-mint, etc.) point to -base for backward compatibility. */
  --c-mint-base: #34BFB3;
  --c-mint-deep: #1AADA0;
  --c-mint-soft: #cff4ed;

  --c-coral-base: #ff5c4d;
  --c-coral-deep: #e8483a;
  --c-coral-soft: #ffe8e6;

  --c-sun-base: #ffc919;
  --c-sun-deep: #e6b000;
  --c-sun-soft: #fff1cf;

  --c-sky-base: #82c9e8;
  --c-sky-deep: #64b6df;
  --c-sky-soft: #d9f1fd;

  --c-marine-base: #6489ff;
  --c-marine-deep: #4a6fe6;
  --c-marine-soft: #e8eeff;

  --c-purple-base: #7055cb;
  --c-purple-deep: #5740b0;
  --c-purple-soft: #ede8f9;

  --c-mint: var(--c-mint-base);
  --c-coral: var(--c-coral-base);
  --c-sun: var(--c-sun-base);
  --c-marine: var(--c-marine-base);
  --c-purple: var(--c-purple-base);

  /* Font weight */
  --weight-extra-bold: 900;
  --weight-bold: 700;
  --weight-medium: 500;

  /* Font size */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Type family */
  --font-jp: "YakuHanRP", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  /* Layout */
  --container-max: 1180px;

  /* Shadow — refined modern stack */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 28px -8px rgba(20, 24, 22, 0.10), 0 4px 10px -4px rgba(20, 24, 22, 0.06);
  --shadow-soft: 0 0 12px rgba(0, 0, 0, 0.08);

  /* Transition */
  --transition-base: all .3s cubic-bezier(0,1,.64,1);
}