/*
Theme Name: La Forêt
Theme URI:
Description: 한국숲힐링연구소 라포레 공식 테마
Version: 1.0.0
Author: La Forêt
Text Domain: laforet
*/

/* ===== Color Token System (02_DESIGN.md) ===== */
:root {
  /* Primary (Deep Forest Green) */
  --color-primary: #061b0e;
  --color-primary-container: #1b3022;
  --color-primary-fixed: #d0e9d4;
  --color-primary-fixed-dim: #b4cdb8;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #819986;
  --color-inverse-primary: #b4cdb8;

  /* Secondary (Gold / Amber) */
  --color-secondary: #775a19;
  --color-secondary-container: #fed488;
  --color-secondary-fixed: #ffdea5;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #785a1a;

  /* Tertiary */
  --color-tertiary: #091a0f;
  --color-on-tertiary: #ffffff;

  /* Surface */
  --color-surface: #fbf9f4;
  --color-background: #fbf9f4;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ee;
  --color-surface-container: #f0eee9;
  --color-surface-container-high: #eae8e3;
  --color-surface-container-highest: #e4e2dd;
  --color-surface-dim: #dbdad5;

  /* Text */
  --color-on-surface: #1b1c19;
  --color-on-surface-variant: #434843;
  --color-outline: #737973;
  --color-outline-variant: #c3c8c1;
}

/* ===== Material Symbols Base ===== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ===== WP Admin Bar Fix ===== */
body.admin-bar nav.fixed {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar nav.fixed {
    top: 46px;
  }
}

/* ===== Image Fallback ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== Scroll Fade-in Animation ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for child elements */
.fade-in-up.delay-1 { transition-delay: 0.1s; }
.fade-in-up.delay-2 { transition-delay: 0.2s; }
.fade-in-up.delay-3 { transition-delay: 0.3s; }

/* ===== Utility ===== */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}