@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Color Palette */
  --color-bg: #050505;
  --color-section-bg: #111111;
  --color-section-bg-alt: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #aaaaaa;
  --color-text-muted: #666666;
  --color-accent: #D4AF37; /* Gold */
  --color-accent-hover: #f1cc5b; /* Lighter Gold */
  --color-cta: #E63946; /* Red */
  --color-cta-hover: #ff5263; /* Lighter Red */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(212, 175, 55, 0.3);

  /* Fonts */
  --font-en: 'Poppins', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  /* Typography Scale */
  --font-size-hero-title: clamp(2.5rem, 6vw, 5rem);
  --font-size-hero-sub: clamp(1rem, 2vw, 1.25rem);
  --font-size-section-title: clamp(2rem, 4vw, 3rem);
  --font-size-section-sub: 0.875rem;
  --font-size-card-title: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  /* Spacing */
  --space-unit: 1rem;
  --space-xs: calc(var(--space-unit) * 0.5);   /* 8px */
  --space-sm: var(--space-unit);               /* 16px */
  --space-md: calc(var(--space-unit) * 1.5);   /* 24px */
  --space-lg: calc(var(--space-unit) * 3);     /* 48px */
  --space-xl: calc(var(--space-unit) * 5);     /* 80px */
  --space-xxl: calc(var(--space-unit) * 8);    /* 128px */

  /* Layout Container */
  --container-max-width: 1200px;
  --container-padding: 0 1.5rem;

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);

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

  /* Header Height */
  --header-height: 80px;
  --header-height-scrolled: 70px;
}