/* ============================================
   SOL+ Design System — CSS Variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@500;600&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@400;600&display=swap');

:root {
  /* ── Colors ── */
  --color-teal-900: #1A524F;
  --color-teal-700: #2A7F7A;
  --color-teal-500: #3EA19B;
  --color-teal-300: #7CC5C0;
  --color-teal-100: #D4EDEB;
  --color-sand-700: #B8A682;
  --color-sand-500: #D4C5A9;
  --color-sand-300: #E8DFD0;
  --color-sand-100: #F5F1EA;
  --color-white:    #FAFAF7;
  --color-charcoal: #2D2D2D;
  --color-text-secondary: #6B6B6B;
  --color-text-tertiary:  #9B9B9B;
  --color-coral:    #D4845A;

  /* ── Typography ── */
  --font-heading-en: 'Cormorant Garamond', serif;
  --font-heading-ja: 'Shippori Mincho', serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-ui:  'Inter', sans-serif;

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

  /* ── Layout ── */
  --content-width: 1200px;
  --narrow-width:  720px;
  --gutter: 24px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-b2c: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-b2b: 0 2px 8px rgba(0,0,0,0.06);

  /* ── Transitions ── */
  --transition-fast:   0.3s ease;
  --transition-normal: 0.6s ease;

  /* ── Header ── */
  --header-height: 72px;
}