/* ============================================
   花敘時光 Flourish Bloom - 全域樣式
   法式詩意極簡主義設計系統
   ============================================ */

/* ============ 字體導入 ============ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Poppins:wght@400;500;600;700&display=swap');

/* ============ CSS 變數系統 ============ */
:root {
  /* 品牌色彩 */
  --color-rose-dust: #D4A5A5;     /* 煙粉色 - 主色 */
  --color-olive-green: #6B8E23;   /* 橄欖綠 - 輔色 */
  --color-papyrus-white: #FAF9F6; /* 紙莎草白 - 背景 */
  --color-deep-gray: #3A3A3A;     /* 深灰 - 文字 */
  --color-soft-gold: #E8DCC8;     /* 淡金 - 強調 */

  /* 語義色彩 */
  --primary: #D4A5A5;
  --primary-foreground: #FAF9F6;
  --secondary: #6B8E23;
  --secondary-foreground: #FAF9F6;
  --muted: #E8DCC8;
  --muted-foreground: #6B8E23;
  --accent: #D4A5A5;
  --accent-foreground: #FFFFFF;
  --destructive: #C85A5A;
  --border: #E8DCC8;
  --background: #FAF9F6;
  --foreground: #3A3A3A;

  /* 間距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* 圓角 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;

  /* 陰影 */
  --shadow-sm: 0 2px 8px rgba(212, 165, 165, 0.08);
  --shadow-md: 0 8px 16px rgba(212, 165, 165, 0.12);
  --shadow-lg: 0 12px 24px rgba(212, 165, 165, 0.15);

  /* 過渡 */
  --transition-fast: 200ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* ============ 全域樣式 ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* ============ 字體系統 ============ */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

h4, h5, h6 {
  font-family: 'Lora', serif;
  font-weight: 600;
}

.subtitle, .flower-language {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
}

button, [role="button"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ============ 連結樣式 ============ */
a {
  color: var(--foreground);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--accent);
}

/* ============ 花瓣卡片組件 ============ */
.flower-card {
  border-radius: var(--radius-2xl);
  background-color: #FFFFFF;
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: 1px solid var(--border);
}

.flower-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ============ 進度條 ============ */
.flower-progress {
  height: 0.5rem;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--muted);
  overflow: hidden;
}

.flower-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #D4A5A5, #6B8E23);
  transition: width var(--transition-slow);
}

/* ============ 狀態標籤 ============ */
.tag-fresh {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.tag-preserved {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.status-urgent {
  color: var(--destructive);
  font-weight: 600;
}

/* ============ 動畫 ============ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-in-down {
  animation: slideInDown 0.3s ease-out;
}

/* ============ 按鈕樣式 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background-color: var(--muted);
}

/* ============ 分割線 ============ */
.divider-line {
  border-top: 1px solid var(--border);
  height: 1px;
}

/* ============ 容器 ============ */
.container-custom {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1280px;
  }
}

/* ============ 響應式工具 ============ */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .hide-mobile {
    display: none;
  }
}

@media (min-width: 769px) {
  .show-mobile {
    display: none;
  }
}

/* ============ 狀態顏色 ============ */
.status-peak {
  color: var(--color-rose-dust);
}

.status-care {
  color: var(--color-olive-green);
}

.status-renewal {
  color: var(--muted-foreground);
}