/* ================================================================
   กะเพราแท้ — Unified Theme (ใช้ร่วมทุกระบบใน kaprao-local)
   สีหลัก: แดง/ครีม · เปลี่ยนผ่าน CSS variables
   Season variants: default, songkran, newyear, loykrathong, chinese
   ================================================================ */
:root {
  --red:        #DB0007;
  --red-dark:   #A80005;
  --red-light:  #FFE8EA;
  --amber:      #FFB80E;
  --orange:     #FF611D;
  --cream:      #F7EAD4;
  --cream-lt:   #FBF5E8;
  --ink:        #1A1A1A;
  --ink-2:      #4A4A4A;
  --line:       #E5DFD2;
  --good:       #17A34A;
  --warn:       #FF611D;
  --radius:     14px;

  /* ===== Season-aware primary color (ใช้ shared กับระบบบัญชี/cost-calc) ===== */
  --theme-primary:      #DB0007;
  --theme-primary-dark: #A80005;

  /* Season-specific overlay patterns (SVG data URI) */
  --season-pattern: none;
}

/* ===== Season tokens — override ทั้ง --red (cost-calc) และ --theme-primary (accounting/landing) ===== */
html[data-season="songkran"] {
  --red: #00A8CC; --red-dark: #0088A8;
  --theme-primary: #00A8CC; --theme-primary-dark: #0088A8;
  --amber: #FFD93D;
  --season-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='20' cy='20' r='3' fill='%2300A8CC' opacity='.3'/><circle cx='60' cy='40' r='2' fill='%2300A8CC' opacity='.4'/><circle cx='40' cy='65' r='2.5' fill='%2300A8CC' opacity='.35'/></svg>");
}
html[data-season="newyear"] {
  --red: #D4AF37; --red-dark: #8B0000;
  --theme-primary: #D4AF37; --theme-primary-dark: #8B0000;
  --amber: #FFD700;
  --season-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><text x='20' y='25' font-size='14' fill='%23D4AF37' opacity='.3'>✨</text><text x='50' y='50' font-size='14' fill='%23FFD700' opacity='.3'>✨</text></svg>");
}
html[data-season="loykrathong"] {
  --red: #8B4513; --red-dark: #5C2E0A;
  --theme-primary: #8B4513; --theme-primary-dark: #5C2E0A;
  --amber: #FFD700;
  --season-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='14' stroke='%23FFD700' stroke-width='1' fill='none' opacity='.3'/></svg>");
}
html[data-season="chinese"] {
  --red: #C8102E; --red-dark: #8B0020;
  --theme-primary: #C8102E; --theme-primary-dark: #8B0020;
  --amber: #FFD700;
  --season-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><text x='30' y='50' font-size='24' fill='%23FFD700' opacity='.25'>福</text></svg>");
}

/* ===== Background watermark (ใบกะเพรา subtle) ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: var(--season-pattern, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='%23DB0007' opacity='.035'><path d='M60 20 Q80 40 60 60 Q40 40 60 20Z'/><path d='M30 70 Q50 85 50 100 Q30 92 30 70Z'/></g></svg>"));
  background-repeat: repeat;
  background-size: 120px;
  opacity: .8;
  animation: driftBg 60s linear infinite;
}
@keyframes driftBg {
  0% { background-position: 0 0; }
  100% { background-position: 240px 240px; }
}

/* ===== Shared utility classes (optional — link ใช้ได้ทุกหน้า) ===== */
.kt-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 16px;
  font-size: 11px; font-weight: 600;
  background: var(--red-light); color: var(--red-dark);
}