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

:root {
  /* ========================================
     SEMANTIC BRAND COLORS (Change these to re-theme)
     ======================================== */
  --brand-primary: #7A9B76;      /* Main brand color */
  --brand-dark: #5D7659;         /* Darker variant - hovers, emphasis */
  --brand-light: #A8C4B8;        /* Lighter variant - backgrounds, subtle */
  --brand-muted: #8B9D83;        /* Muted variant */
  --brand-subtle: #B8CDB5;       /* Very light variant */
  --brand-deep: #4A5D47;         /* Deepest variant */
  --brand-bg: #E8F2EC;           /* Light brand background */

  --brand-accent: #D4AF37;       /* Accent/highlight color */
  --brand-accent-light: #F0D96B; /* Lighter accent */
  --brand-accent-warm: #E8C547;  /* Warm accent variant */

  /* Text Colors */
  --text-primary: #3A423A;       /* Main text */
  --text-secondary: #9BA098;     /* Secondary/muted text */
  --text-inverse: #FFFFFF;       /* Text on dark backgrounds */

  /* Background Colors */
  --bg-primary: #FFFFFF;         /* Main background */
  --bg-secondary: #FAFBFA;       /* Secondary/page background */
  --bg-tertiary: #E8EBE7;        /* Tertiary/card backgrounds */

  /* System Colors */
  --system-success: #7A9B76;
  --system-success-dark: #065f46;
  --system-success-light: #d1fae5;
  --system-success-bg: #ecfdf5;
  --system-success-50: #f0fdf4;
  --system-success-100: #dcfce7;
  --system-success-200: #bbf7d0;
  --system-success-300: #86efac;
  --system-success-400: #4ade80;
  --system-success-500: #22c55e;
  --system-success-600: #16a34a;
  --system-success-700: #15803d;
  --system-success-text: #059669;
  --system-success-border: #a7f3d0;
  --system-error: #C53030;
  --system-error-dark: #991b1b;
  --system-error-light: #fecaca;
  --system-error-bg: #fee2e2;
  --system-error-text: #dc2626;
  --system-error-border: #fca5a5;
  --system-warning: #E8C547;
  --system-warning-dark: #92400e;
  --system-warning-light: #fde68a;
  --system-warning-bg: #fef3c7;
  --system-warning-text: #f59e0b;
  --system-info: #4A90A4;
  --system-info-bg: #f0f9ff;
  --system-info-border: #3b82f6;
  --system-info-light: #e3f2fd;
  --system-info-text: #1565c0;
  --system-pending-bg: #fff3e0;
  --system-pending-text: #ef6c00;
  --system-pending-light: #fff8e1;
  --system-pending-border: #ffb74d;

  /* Decorative/Special Colors */
  --decorative-dark: #2E2A4A;      /* Dark navy for SVGs and decorative elements */

  /* Alchemy Page Colors (Copper/Gold theme) */
  --alchemy-bg: #F0E5B9;           /* Light gold background */
  --alchemy-primary: #A05C2C;      /* Copper/rust */
  --alchemy-gold: #D4B965;         /* Gold */
  --alchemy-gold-dark: #B29638;    /* Dark gold */
  --alchemy-gold-text: #B8941F;    /* Gold text variant */

  /* ========================================
     LEGACY ALIASES (for backward compatibility)
     Reference semantic vars where possible
     ======================================== */
  --forest-primary: var(--brand-primary);
  --forest-deep: var(--brand-dark);
  --sage-light: var(--brand-light);
  --moss-green: var(--brand-muted);
  --eucalyptus: var(--brand-subtle);
  --pine-deep: var(--brand-deep);
  --bamboo: #C5D4C1;
  --kintsugi-gold: var(--brand-accent);
  --golden-light: var(--brand-accent-light);
  --warm-amber: var(--brand-accent-warm);
  --pure-white: var(--bg-primary);
  --natural-white: var(--bg-secondary);
  --stone-gray: var(--bg-tertiary);
  --soft-gray: var(--text-secondary);
  --charcoal: var(--text-primary);
  --success: var(--system-success);
  --error: var(--system-error);
  --warning: var(--system-warning);
  --info: var(--system-info);
  --transition-fast: 150ms ease;

  /* Typography - Standard naming */
  --font-heading: 'Noto Serif JP', serif;
  --font-body: 'Montserrat', sans-serif;

  /* Legacy alias */
  --font-japanese: var(--font-heading);

  /* Additional utility aliases */
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-light: var(--gray-200);
  --gray-medium: var(--gray-500);
  --gray-dark: var(--gray-700);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);

  /* Legacy gray aliases */
  --medium-gray: var(--gray-medium);
  --dark-gray: var(--gray-dark);

  /* CMS prefixed (legacy) */
  --cms-primary: var(--brand-primary);
  --cms-forest-deep: var(--brand-dark);
  --cms-sage-light: var(--brand-light);
  --cms-moss-green: var(--brand-muted);
  --cms-eucalyptus: var(--brand-subtle);
  --cms-pine-deep: var(--brand-deep);
  --cms-kintsugi-gold: var(--brand-accent);
  --cms-golden-light: var(--brand-accent-light);
  --cms-warm-amber: var(--brand-accent-warm);
  --cms-pure-white: var(--bg-primary);
  --cms-natural-white: var(--bg-secondary);
  --cms-stone-gray: var(--bg-tertiary);
  --cms-soft-gray: var(--text-secondary);
  --cms-charcoal: var(--text-primary);
  --cms-success: var(--system-success);
  --cms-error: var(--system-error);
  --cms-warning: var(--system-warning);
  --cms-info: var(--system-info);

  /* Typography */
  --cms-font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cms-font-display: 'Noto Serif JP', serif;
  
  /* Font Sizes */
  --cms-font-size-h1: 48px;
  --cms-font-size-h2: 36px;
  --cms-font-size-h3: 28px;
  --cms-font-size-h4: 22px;
  --cms-font-size-h5: 18px;
  --cms-font-size-body: 16px;
  --cms-font-size-small: 14px;
  --cms-font-size-button: 14px;
  
  /* Line Heights */
  --cms-line-height-h1: 56px;
  --cms-line-height-h2: 44px;
  --cms-line-height-h3: 36px;
  --cms-line-height-h4: 28px;
  --cms-line-height-h5: 24px;
  --cms-line-height-body: 24px;
  --cms-line-height-small: 20px;
  
  /* Spacing */
  --cms-space-4: 4px;
  --cms-space-8: 8px;
  --cms-space-12: 12px;
  --cms-space-16: 16px;
  --cms-space-24: 24px;
  --cms-space-32: 32px;
  --cms-space-48: 48px;
  --cms-space-64: 64px;
  
  /* Border Radius */
  --cms-radius-small: 4px;
  --cms-radius-medium: 8px;
  --cms-radius-large: 12px;
  --cms-radius-full: 9999px;
  
  /* Shadows */
  --cms-shadow-small: 0 1px 2px rgba(0,0,0,0.05);
  --cms-shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
  --cms-shadow-large: 0 8px 16px rgba(0,0,0,0.15);
  --cms-shadow-nature: 0 4px 12px rgba(122, 155, 118, 0.15);
  --cms-shadow-kintsugi: 0 6px 20px rgba(212, 175, 55, 0.25);
  
  /* Transitions */
  --cms-transition-fast: 150ms ease;
  --cms-transition-normal: 300ms ease;
  --cms-transition-smooth: 250ms ease-in-out;
  --cms-transition-kintsugi: 1.5s ease-out;
}

/* Base Typography Styles */
.cms-h1 {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h1);
  font-weight: 700;
  line-height: var(--cms-line-height-h1);
  margin-bottom: var(--cms-space-24);
}

@media (max-width: 768px) {
  .cms-h1 {
    font-size: 32px;
    line-height: 40px;
  }
}

.cms-h2 {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h2);
  font-weight: 700;
  line-height: var(--cms-line-height-h2);
  margin-bottom: var(--cms-space-16);
}

.cms-h3 {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h3);
  font-weight: 600;
  line-height: var(--cms-line-height-h3);
  margin-bottom: var(--cms-space-12);
}

.cms-h4 {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h4);
  font-weight: 600;
  line-height: var(--cms-line-height-h4);
  margin-bottom: var(--cms-space-8);
}

.cms-h5 {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h5);
  font-weight: 500;
  line-height: var(--cms-line-height-h5);
  margin-bottom: var(--cms-space-8);
}

.cms-body {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-body);
  font-weight: 400;
  line-height: var(--cms-line-height-body);
  margin-bottom: var(--cms-space-8);
}

.cms-small {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-small);
  font-weight: 400;
  line-height: var(--cms-line-height-small);
  margin-bottom: var(--cms-space-8);
}

/* Button Base Styles */
.cms-btn {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-button);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--cms-space-12) var(--cms-space-24);
  border-radius: var(--cms-radius-full);
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all var(--cms-transition-smooth);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cms-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--cms-shadow-kintsugi);
}

.cms-btn:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  animation: kintsugi-shimmer 1.5s ease-out;
}

@keyframes kintsugi-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.cms-btn:active {
  transform: translateY(0);
}

.cms-btn:disabled,
.cms-btn-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.cms-btn:disabled:hover,
.cms-btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Card Styles */
.cms-card {
  min-width: 300px;
  max-width: 400px;
  border-radius: var(--cms-radius-large);
  box-shadow: var(--cms-shadow-nature);
  transition: all var(--cms-transition-smooth);
  overflow: hidden;
}

.cms-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cms-shadow-kintsugi);
}

.cms-card-header {
  padding: var(--cms-space-24) var(--cms-space-24) var(--cms-space-16);
}

.cms-card-title {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-h4);
  font-weight: 600;
  margin-bottom: var(--cms-space-8);
}

.cms-card-content {
  padding: 0 var(--cms-space-24) var(--cms-space-16);
}

.cms-card-footer {
  padding: var(--cms-space-16) var(--cms-space-24) var(--cms-space-24);
}

/* Form Elements */
.cms-form-control {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-body);
  height: 40px;
  padding: var(--cms-space-12) var(--cms-space-16);
  border-radius: var(--cms-radius-medium);
  border: 1px solid var(--cms-stone-gray);
  transition: all var(--cms-transition-smooth);
  width: 100%;
  min-height: 44px;
}

.cms-form-control:hover {
  border-color: var(--cms-primary);
}

.cms-form-control:focus {
  outline: none;
  border: 2px solid var(--cms-primary);
  box-shadow: var(--cms-shadow-nature);
}

.cms-form-control.cms-error {
  border: 2px solid var(--cms-error);
}

.cms-form-textarea {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-body);
  padding: var(--cms-space-12) var(--cms-space-16);
  border-radius: var(--cms-radius-medium);
  border: 1px solid var(--cms-stone-gray);
  transition: all var(--cms-transition-smooth);
  width: 100%;
  min-height: 100px;
  resize: vertical;
}

.cms-form-textarea:hover {
  border-color: var(--cms-primary);
}

.cms-form-textarea:focus {
  outline: none;
  border: 2px solid var(--cms-primary);
  box-shadow: var(--cms-shadow-nature);
}

.cms-form-select {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-body);
  height: 40px;
  padding: var(--cms-space-12) var(--cms-space-16);
  border-radius: var(--cms-radius-medium);
  border: 1px solid var(--cms-stone-gray);
  transition: all var(--cms-transition-smooth);
  width: 100%;
  min-height: 44px;
  cursor: pointer;
}

.cms-form-select:hover {
  border-color: var(--cms-primary);
}

.cms-form-select:focus {
  outline: none;
  border: 2px solid var(--cms-primary);
  box-shadow: var(--cms-shadow-nature);
}

.cms-form-label {
  font-family: var(--cms-font-display);
  font-size: var(--cms-font-size-small);
  font-weight: 600;
  margin-bottom: var(--cms-space-8);
  display: block;
}

.cms-form-checkbox,
.cms-form-radio {
  width: 18px;
  height: 18px;
  margin-right: var(--cms-space-8);
  cursor: pointer;
}

.cms-error-message {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-small);
  color: var(--cms-error);
  margin-top: var(--cms-space-4);
}

.cms-success-message {
  font-family: var(--cms-font-primary);
  font-size: var(--cms-font-size-small);
  color: var(--cms-success);
  margin-top: var(--cms-space-4);
}

/* Link Styles */
.cms-link {
  text-decoration: none;
  transition: all var(--cms-transition-smooth);
  cursor: pointer;
}

.cms-link:hover {
  text-decoration: underline;
}

/* Color Utility Classes - Backgrounds */
.cms-bg-primary { background-color: var(--cms-primary); }
.cms-bg-dark { background-color: var(--cms-forest-deep); }
.cms-bg-light { background-color: var(--cms-sage-light); }
.cms-bg-moss { background-color: var(--cms-moss-green); }
.cms-bg-eucalyptus { background-color: var(--cms-eucalyptus); }
.cms-bg-pine { background-color: var(--cms-pine-deep); }
.cms-bg-gold { background-color: var(--cms-kintsugi-gold); }
.cms-bg-amber { background-color: var(--cms-warm-amber); }
.cms-bg-golden-light { background-color: var(--cms-golden-light); }
.cms-bg-white { background-color: var(--cms-pure-white); }
.cms-bg-natural-white { background-color: var(--cms-natural-white); }
.cms-bg-stone { background-color: var(--cms-stone-gray); }
.cms-bg-soft-gray { background-color: var(--cms-soft-gray); }
.cms-bg-charcoal { background-color: var(--cms-charcoal); }
.cms-bg-indigo { background-color: var(--cms-deep-indigo); }

/* Color Utility Classes - Text */
.cms-text-primary { color: var(--cms-primary); }
.cms-text-dark { color: var(--cms-forest-deep); }
.cms-text-light { color: var(--cms-sage-light); }
.cms-text-moss { color: var(--cms-moss-green); }
.cms-text-eucalyptus { color: var(--cms-eucalyptus); }
.cms-text-pine { color: var(--cms-pine-deep); }
.cms-text-gold { color: var(--cms-kintsugi-gold); }
.cms-text-amber { color: var(--cms-warm-amber); }
.cms-text-golden-light { color: var(--cms-golden-light); }
.cms-text-white { color: var(--cms-pure-white); }
.cms-text-natural-white { color: var(--cms-natural-white); }
.cms-text-stone { color: var(--cms-stone-gray); }
.cms-text-soft-gray { color: var(--cms-soft-gray); }
.cms-text-charcoal { color: var(--cms-charcoal); }
.cms-text-indigo { color: var(--cms-deep-indigo); }

/* Color Utility Classes - Borders */
.cms-border-primary { border-color: var(--cms-primary); }
.cms-border-dark { border-color: var(--cms-forest-deep); }
.cms-border-light { border-color: var(--cms-sage-light); }
.cms-border-moss { border-color: var(--cms-moss-green); }
.cms-border-eucalyptus { border-color: var(--cms-eucalyptus); }
.cms-border-pine { border-color: var(--cms-pine-deep); }
.cms-border-gold { border-color: var(--cms-kintsugi-gold); }
.cms-border-amber { border-color: var(--cms-warm-amber); }
.cms-border-golden-light { border-color: var(--cms-golden-light); }
.cms-border-white { border-color: var(--cms-pure-white); }
.cms-border-natural-white { border-color: var(--cms-natural-white); }
.cms-border-stone { border-color: var(--cms-stone-gray); }
.cms-border-soft-gray { border-color: var(--cms-soft-gray); }
.cms-border-charcoal { border-color: var(--cms-charcoal); }
.cms-border-indigo { border-color: var(--cms-deep-indigo); }

/* Hover State Utility Classes - Backgrounds */
.hover-cms-bg-primary:hover { background-color: var(--cms-primary); }
.hover-cms-bg-dark:hover { background-color: var(--cms-forest-deep); }
.hover-cms-bg-light:hover { background-color: var(--cms-sage-light); }
.hover-cms-bg-moss:hover { background-color: var(--cms-moss-green); }
.hover-cms-bg-eucalyptus:hover { background-color: var(--cms-eucalyptus); }
.hover-cms-bg-pine:hover { background-color: var(--cms-pine-deep); }
.hover-cms-bg-gold:hover { background-color: var(--cms-kintsugi-gold); }
.hover-cms-bg-amber:hover { background-color: var(--cms-warm-amber); }
.hover-cms-bg-golden-light:hover { background-color: var(--cms-golden-light); }
.hover-cms-bg-white:hover { background-color: var(--cms-pure-white); }
.hover-cms-bg-natural-white:hover { background-color: var(--cms-natural-white); }
.hover-cms-bg-stone:hover { background-color: var(--cms-stone-gray); }
.hover-cms-bg-soft-gray:hover { background-color: var(--cms-soft-gray); }
.hover-cms-bg-charcoal:hover { background-color: var(--cms-charcoal); }
.hover-cms-bg-indigo:hover { background-color: var(--cms-deep-indigo); }

/* Hover State Utility Classes - Text */
.hover-cms-text-primary:hover { color: var(--cms-primary); }
.hover-cms-text-dark:hover { color: var(--cms-forest-deep); }
.hover-cms-text-light:hover { color: var(--cms-sage-light); }
.hover-cms-text-moss:hover { color: var(--cms-moss-green); }
.hover-cms-text-eucalyptus:hover { color: var(--cms-eucalyptus); }
.hover-cms-text-pine:hover { color: var(--cms-pine-deep); }
.hover-cms-text-gold:hover { color: var(--cms-kintsugi-gold); }
.hover-cms-text-amber:hover { color: var(--cms-warm-amber); }
.hover-cms-text-golden-light:hover { color: var(--cms-golden-light); }
.hover-cms-text-white:hover { color: var(--cms-pure-white); }
.hover-cms-text-natural-white:hover { color: var(--cms-natural-white); }
.hover-cms-text-stone:hover { color: var(--cms-stone-gray); }
.hover-cms-text-soft-gray:hover { color: var(--cms-soft-gray); }
.hover-cms-text-charcoal:hover { color: var(--cms-charcoal); }
.hover-cms-text-indigo:hover { color: var(--cms-deep-indigo); }

/* Hover State Utility Classes - Borders */
.hover-cms-border-primary:hover { border-color: var(--cms-primary); }
.hover-cms-border-dark:hover { border-color: var(--cms-forest-deep); }
.hover-cms-border-light:hover { border-color: var(--cms-sage-light); }
.hover-cms-border-moss:hover { border-color: var(--cms-moss-green); }
.hover-cms-border-eucalyptus:hover { border-color: var(--cms-eucalyptus); }
.hover-cms-border-pine:hover { border-color: var(--cms-pine-deep); }
.hover-cms-border-gold:hover { border-color: var(--cms-kintsugi-gold); }
.hover-cms-border-amber:hover { border-color: var(--cms-warm-amber); }
.hover-cms-border-golden-light:hover { border-color: var(--cms-golden-light); }
.hover-cms-border-white:hover { border-color: var(--cms-pure-white); }
.hover-cms-border-natural-white:hover { border-color: var(--cms-natural-white); }
.hover-cms-border-stone:hover { border-color: var(--cms-stone-gray); }
.hover-cms-border-soft-gray:hover { border-color: var(--cms-soft-gray); }
.hover-cms-border-charcoal:hover { border-color: var(--cms-charcoal); }
.hover-cms-border-indigo:hover { border-color: var(--cms-deep-indigo); }

/* Utility Classes for Common Styling */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.bg-transparent { background-color: transparent; }
.text-white { color: var(--cms-pure-white); }
.text-black { color: var(--cms-charcoal); }

/* Focus States for Accessibility */
.cms-btn:focus,
.cms-form-control:focus,
.cms-form-textarea:focus,
.cms-form-select:focus,
.cms-link:focus {
  outline: 2px solid var(--cms-kintsugi-gold);
  outline-offset: 2px;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .cms-h2 { font-size: 28px; line-height: 36px; }
  .cms-h3 { font-size: 24px; line-height: 32px; }
  .cms-h4 { font-size: 20px; line-height: 26px; }
  .cms-h5 { font-size: 16px; line-height: 22px; }
}

/* Special Kintsugi Effects */
.cms-kintsugi-glow {
  position: relative;
}

.cms-kintsugi-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.1) 50%, transparent 70%);
  opacity: 0;
  transition: opacity var(--cms-transition-kintsugi);
  pointer-events: none;
}

.cms-kintsugi-glow:hover::after {
  opacity: 1;
}