:root {
  /* ===== Colors: Primary (Rose Gold) ===== */
  --color-primary-900: #8B5E3C;
  --color-primary-700: #B07D62;
  --color-primary-500: #C4956A;
  --color-primary-300: #D4B896;
  --color-primary-100: #F5EDE4;
  --color-primary-50:  #FAF6F1;

  /* ===== Colors: Secondary (Navy) ===== */
  --color-secondary-900: #1A2332;
  --color-secondary-700: #2C3E50;
  --color-secondary-500: #34495E;
  --color-secondary-300: #7F8C8D;
  --color-secondary-100: #BDC3C7;

  /* ===== Colors: Accent (Warm Coral) ===== */
  --color-accent-600: #A93226;
  --color-accent-500: #C0392B;
  --color-accent-400: #E74C3C;

  /* ===== Colors: Background ===== */
  --color-bg-white:  #FFFFFF;
  --color-bg-cream:  #FAF6F1;
  --color-bg-light:  #F8F9FA;
  --color-bg-warm:   #F5EDE4;

  /* ===== Colors: Text ===== */
  --color-text-primary:   #2C3E50;
  --color-text-body:      #4A4A4A;
  --color-text-secondary: #6C757D;
  --color-text-tertiary:  #95A5A6;
  --color-text-inverse:   #FFFFFF;

  /* ===== Colors: Semantic ===== */
  --color-success:     #27AE60;
  --color-success-bg:  #E8F5E9;
  --color-error:       #E74C3C;
  --color-error-bg:    #FDEDEC;
  --color-warning:     #F39C12;
  --color-warning-bg:  #FEF9E7;
  --color-info:        #3498DB;
  --color-info-bg:     #EBF5FB;

  /* ===== Colors: LINE ===== */
  --color-line:       #06C755;
  --color-line-hover: #05B34C;

  /* ===== Colors: Border ===== */
  --color-border:       #F0F0F0;
  --color-border-input: #BDC3C7;

  /* ===== Typography: Font Family ===== */
  --font-heading: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-heading-en: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* ===== Typography: Font Size ===== */
  --font-hero:       1.75rem;
  --font-h1:         1.5rem;
  --font-h2:         1.375rem;
  --font-h3:         1.125rem;
  --font-h4:         1rem;
  --font-h5:         0.9375rem;
  --font-h6:         0.875rem;
  --font-body-size:  1rem;
  --font-body-sm:    0.875rem;
  --font-caption:    0.75rem;
  --font-section-en: 0.875rem;
  --font-price:      1.25rem;

  /* ===== Typography: Line Height ===== */
  --lh-heading:   1.4;
  --lh-heading-2: 1.5;
  --lh-body:      1.8;
  --lh-body-sm:   1.7;
  --lh-caption:   1.6;

  /* ===== Typography: Letter Spacing ===== */
  --ls-heading:    0.08em;
  --ls-heading-en: 0.15em;
  --ls-body:       0.04em;
  --ls-button:     0.1em;

  /* ===== Spacing ===== */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ===== Layout ===== */
  --container-max:     1200px;
  --container-wide:    1400px;
  --container-narrow:  800px;
  --container-padding: 16px;

  /* ===== Border Radius ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* ===== Transitions ===== */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ===== Z-Index ===== */
  --z-floating-cta: 999;
  --z-header:       1000;
  --z-mobile-nav:   1010;
  --z-modal:        1020;
}

/* PC breakpoint overrides */
@media (min-width: 1024px) {
  :root {
    --font-hero:       2.75rem;
    --font-h1:         2.25rem;
    --font-h2:         1.875rem;
    --font-h3:         1.5rem;
    --font-h4:         1.25rem;
    --font-h5:         1.125rem;
    --font-h6:         1rem;
    --font-section-en: 1rem;
    --font-price:      1.5rem;
    --container-padding: 40px;
  }
}
