:root {
    /* ── Core palette (Color Palette — Inspired by Dock Coffee & Works) ── */
    --color-charcoal:  #686867;   /* Charcoal Gray   — Main Background */
    --color-greige:    #999591;   /* Warm Greige     — Secondary Background */
    --color-gold:      #8C7B68;   /* Muted Gold      — Accent / Border */
    --color-beige:     #DFD9D2;   /* Light Beige     — Section Background */
    --color-coffee:    #332013;   /* Coffee Brown    — Heading / Text */
    --color-ivory:     #F4F1EC;   /* Soft Ivory      — Highlight / Text */

    /* ══════════════════════════════════════════════════════════════
     * 色の使い分けルール — デグレ防止のため変更禁止
     *
     *  DARK背景   header / footer / .section--dark
     *    └─ background : --color-charcoal  #686867
     *    └─ テキスト   : --color-ivory     #F4F1EC  (inherit で自動追従)
     *
     *  LIGHT背景  body / .section--cream
     *    └─ background : --color-ivory     #F4F1EC
     *    └─ テキスト   : --color-coffee    #332013
     *
     *  アクセント             : --color-gold    #8C7B68
     *  サブテキスト/ラベル    : color: inherit; opacity: 0.65-0.75 で対応
     *
     *  ❌ --color-brown を var(--color-coffee) にしてはいけない
     *     （dark section のテキスト色が同化し可読性が壊れる）
     * ══════════════════════════════════════════════════════════════ */

    /* ── エイリアス ── */
    --color-espresso:  var(--color-charcoal);
    --color-mocha:     var(--color-greige);
    --color-brown:     var(--color-charcoal);  /* DARK背景専用 → #686867 */
    --color-cream:     var(--color-ivory);
    --color-offwhite:  var(--color-ivory);     /* DARK背景上テキスト → #F4F1EC */
    --color-taupe:     var(--color-greige);

    /* ── ボーダー用 alpha variants (Coffee Brown ベース / ライト背景向け) ── */
    --color-brown-10:  rgba(51, 32, 19, 0.10);
    --color-brown-15:  rgba(51, 32, 19, 0.15);
    --color-brown-30:  rgba(51, 32, 19, 0.30);
    --color-brown-70:  rgba(51, 32, 19, 0.70);
    --color-brown-80:  rgba(51, 32, 19, 0.80);

    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans:  'Noto Sans JP', sans-serif;

    --text-xs:   0.8125rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  clamp(1.5rem, 3vw, 2rem);
    --text-3xl:  clamp(2rem, 4vw, 2.5rem);
    --text-4xl:  clamp(2.5rem, 5vw, 4rem);

    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;

    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
}