/**
 * Hajime Design WordPress Theme CSS
 * High-fidelity styling, typography, layout, animations & responsive rules.
 */

:root {
  /* Typography */
  --font-heading: 'Zen Old Mincho', serif;
  --font-body: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Brand Color Palette */
  --bg-50: #FAF9F5;
  --bg-100: #F5F3EC;
  --bg-200: #EAE6DC;
  --bg-300: #DDD6C6;
  
  --primary-50: #EBF0F7;
  --primary-100: #D0DCED;
  --primary-500: #1B2B48;
  --primary-600: #14223A;
  --primary-700: #0E1729;
  
  --accent-50: #FCFAF3;
  --accent-100: #F7F1DE;
  --accent-200: #EEDEB5;
  --accent-300: #E2C98A;
  --accent-400: #D3B15E;
  --accent-500: #C29636;
  --accent-600: #A87E26;
  --accent-700: #8E671C;
  --accent-800: #755217;
  
  --secondary-100: #F3F1EC;
  --secondary-200: #E6E2D8;
  --secondary-800: #4B4842;
  --secondary-900: #2E2B25;
  
  --fg-500: #8F97A3;
  --fg-600: #626D7D;
  --fg-700: #424D5D;
  --fg-800: #293342;
  --fg-900: #1A222E;
  --fg-950: #0D131C;
  
  --line-green: #06c755;
  --line-green-hover: #05b34c;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-50);
  color: var(--fg-950);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Headings font */
.font-heading {
  font-family: var(--font-heading);
}

/* Background utilities */
.bg-background-50 { background-color: var(--bg-50); }
.bg-background-100 { background-color: var(--bg-100); }
.bg-background-200 { background-color: var(--bg-200); }
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-accent-50 { background-color: var(--accent-50); }
.bg-accent-100 { background-color: var(--accent-100); }
.bg-accent-200 { background-color: var(--accent-200); }
.bg-accent-500 { background-color: var(--accent-500); }
.bg-accent-600 { background-color: var(--accent-600); }
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-200 { background-color: var(--secondary-200); }

/* Text color utilities */
.text-foreground-500 { color: var(--fg-500); }
.text-foreground-600 { color: var(--fg-600); }
.text-foreground-700 { color: var(--fg-700); }
.text-foreground-800 { color: var(--fg-800); }
.text-foreground-900 { color: var(--fg-900); }
.text-foreground-950 { color: var(--fg-950); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-accent-300 { color: var(--accent-300); }
.text-accent-500 { color: var(--accent-500); }
.text-accent-600 { color: var(--accent-600); }
.text-accent-700 { color: var(--accent-700); }
.text-accent-800 { color: var(--accent-800); }
.text-background-50 { color: var(--bg-50); }
.text-background-100 { color: var(--bg-100); }
.text-secondary-800 { color: var(--secondary-800); }
.text-secondary-900 { color: var(--secondary-900); }

/* Border color utilities */
.border-background-100 { border-color: var(--bg-100); }
.border-background-200 { border-color: var(--bg-200); }
.border-background-300 { border-color: var(--bg-300); }
.border-accent-200 { border-color: var(--accent-200); }
.border-accent-300 { border-color: var(--accent-300); }
.border-accent-400 { border-color: var(--accent-400); }
.border-primary-200 { border-color: var(--primary-200); }
.border-secondary-200 { border-color: var(--secondary-200); }

/* LINE Button Styling */
.line-button {
  background-color: var(--line-green);
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.35);
  transition: all 0.2s ease;
}
.line-button:hover {
  background-color: var(--line-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.45);
}

/* Keyframes */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pingPulse {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: pingPulse 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* WordPress post content / Typography enhancements */
.prose {
  line-height: 1.85;
}
.prose h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--fg-950);
}
.prose h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: var(--fg-900);
}
.prose p {
  margin-bottom: 1.25rem;
  color: var(--fg-700);
}
.prose ul, .prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose li {
  margin-bottom: 0.5rem;
}