: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);
  --border-brand-subtle: rgba(38, 52, 74, 0.08);
  --border-brand-muted: rgba(38, 52, 74, 0.07);
  --border-inverse: rgba(255, 255, 255, 0.12);
  --border-inverse-soft: rgba(255, 255, 255, 0.11);

  /* Translucent surfaces */
  --bg-inverse-soft: rgba(255, 255, 255, 0.06);
  --overlay-dark: rgba(20, 24, 22, 0.55);
  --focus-ring-sky: rgba(100, 182, 223, 0.35);

  /* 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-mint-ink: #167f71;

  --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-purple-base: #7055cb;

  --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);

  /* PhotoPuzzle theme */
  --pp-mint-base: #2ebcb3;
  --pp-mint-soft: rgba(46, 188, 179, 0.2);
  --pp-blue-base: #3999fb;
  --pp-blue-deep: #1d83fa;
  --pp-sun-base: #feca58;
  --pp-bg-warm: #fef7ea;

  /* Banana Unchi theme */
  --bu-bg-warm: #fefdfa;
  --bu-bg-paper: #fffef7;
  --bu-bg-cream: #fff7db;
  --bu-bg-note: #fff8d6;
  --bu-text-primary: #353840;
  --bu-text-secondary: rgba(53, 56, 64, 0.68);
  --bu-text-brown: #70380c;
  --bu-text-ink: #26211d;
  --bu-text-muted: rgba(53, 56, 64, 0.5);
  --bu-text-subtle: rgba(53, 56, 64, 0.6);
  --bu-border-warm: #d7c9a7;
  --bu-banana-base: #ffeb56;
  --bu-banana-deep: #ffd83d;
  --bu-sun-base: #ffb800;
  --bu-sky-deep: #248ed5;
  --bu-link: #3bacfc;
  --bu-mint: #77ddb5;
  --bu-pink: #ff6fa4;
  --bu-board: #2373b5;
  --bu-brown: #8d542d;
  --bu-dark-brown: #613719;

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

  /* Font size */
  --fs-4: 4px;
  --fs-6: 6px;
  --fs-8: 8px;
  --fs-10: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-22: 22px;
  --fs-2xl: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-3xl: 32px;
  --fs-34: 34px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-4xl: 40px;
  --fs-42: 42px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;
  --fs-60: 60px;
  --fs-64: 64px;
  --fs-88: 88px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 996px;

  /* Type family */
  --font-jp: "YakuHanRP", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

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

  /* 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);
  --shadow-drawer: -16px 0 40px rgba(0, 0, 0, 0.16);

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