/* ============================================
   KOBKA BRAND CSS — Sino-Thai Heritage
   Locked: #KD006 #KD008 #KD012 #KD016
   Created: 2026-04-30 (Chat #KB001)
   ============================================ */

:root {
  /* ── Primary Palette ── */
  --kb-oxblood:        #7A1F1F;  /* Primary — แดงเข้มจีน */
  --kb-oxblood-deep:   #5C1818;  /* Primary deep */
  --kb-gold:           #C39A40;  /* Antique Gold */
  --kb-gold-light:     #E0C078;  /* Gold soft */
  --kb-gold-deep:      #8B6F2C;  /* Bronze */

  /* ── Backgrounds ── */
  --kb-cream:          #F3E9D2;  /* Aged Cream — page bg */
  --kb-cream-soft:     #FAF4E5;  /* Lighter cream */
  --kb-parchment:      #EDE4D0;  /* Section dividers */
  --kb-white:          #FFFFFF;

  /* ── Text ── */
  --kb-bronze:         #4B3A2A;  /* Body text */
  --kb-ink:            #1A1A1A;  /* Headings */
  --kb-charcoal:       #3A3A3A;  /* Secondary */
  --kb-stone:          #7A7166;  /* Muted */

  /* ── Status ── */
  --kb-jade:           #2C5F4F;  /* Trust/success */
  --kb-jade-light:     #D8E4DE;  /* Trust soft bg */
  --kb-lacquer:        #A85A1F;  /* Warning */
  --kb-error:          #8B2920;  /* Error (deeper than primary) */

  /* ── Shadows ── */
  --kb-shadow-sm:      0 1px 3px rgba(74, 58, 42, 0.08);
  --kb-shadow:         0 4px 12px rgba(74, 58, 42, 0.12);
  --kb-shadow-lg:      0 12px 32px rgba(74, 58, 42, 0.18);
  --kb-shadow-strong:  0 24px 48px rgba(74, 58, 42, 0.24);

  /* ── Borders ── */
  --kb-border-thin:    1px solid var(--kb-gold);
  --kb-border-double:  3px double var(--kb-gold);

  /* ── Spacing ── */
  --kb-radius-sm:      6px;
  --kb-radius:         10px;
  --kb-radius-lg:      16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kb-cream);
  color: var(--kb-bronze);
  font-family: 'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(195, 154, 64, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 92% 88%, rgba(122, 31, 31, 0.03) 0%, transparent 35%);
  min-height: 100vh;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif Thai', 'Cormorant Garamond', serif;
  color: var(--kb-oxblood);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1em; }
strong { color: var(--kb-oxblood); font-weight: 600; }

a {
  color: var(--kb-oxblood);
  text-decoration: none;
  border-bottom: 1px dotted var(--kb-gold);
  transition: color 0.2s, border-color 0.2s;
}
a:hover { color: var(--kb-gold-deep); border-bottom-color: var(--kb-oxblood); }

/* ── Lang-specific font ── */
:lang(zh), [lang="zh"] { font-family: 'Noto Serif SC', 'IBM Plex Sans Thai', serif; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { font-family: 'Noto Serif SC', serif; }
:lang(ja), [lang="ja"] { font-family: 'Noto Serif JP', 'IBM Plex Sans Thai', serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-family: 'Noto Serif JP', serif; }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { font-family: 'Cormorant Garamond', 'Playfair Display', serif; }

/* ── Container ── */
.kb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.kb-container-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ── */
.kb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid var(--kb-oxblood);
  border-radius: var(--kb-radius-sm);
  background: var(--kb-oxblood);
  color: var(--kb-gold);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.kb-btn:hover {
  background: var(--kb-oxblood-deep);
  border-color: var(--kb-oxblood-deep);
  color: var(--kb-gold-light);
  transform: translateY(-1px);
  box-shadow: var(--kb-shadow);
}

.kb-btn-outline {
  background: transparent;
  color: var(--kb-oxblood);
}

.kb-btn-outline:hover {
  background: var(--kb-oxblood);
  color: var(--kb-gold);
}

.kb-btn-gold {
  background: var(--kb-gold);
  color: var(--kb-oxblood);
  border-color: var(--kb-gold);
}

.kb-btn-gold:hover {
  background: var(--kb-gold-deep);
  color: var(--kb-cream);
  border-color: var(--kb-gold-deep);
}

.kb-btn-ghost {
  background: transparent;
  border-color: var(--kb-gold);
  color: var(--kb-gold-deep);
}

.kb-btn-ghost:hover {
  background: var(--kb-cream-soft);
}

/* ── Badges/Tags ── */
.kb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--kb-cream);
  border: 1px solid var(--kb-gold);
  color: var(--kb-bronze);
  font-size: 12px;
  font-weight: 500;
}

.kb-tag-gold { background: var(--kb-gold); color: var(--kb-oxblood); border-color: var(--kb-gold-deep); }
.kb-tag-jade { background: var(--kb-jade-light); color: var(--kb-jade); border-color: var(--kb-jade); }
.kb-tag-oxblood { background: var(--kb-oxblood); color: var(--kb-gold); border-color: var(--kb-oxblood); }

/* ── Cards ── */
.kb-card {
  background: var(--kb-white);
  border: 1px solid var(--kb-gold);
  border-radius: var(--kb-radius);
  padding: 24px;
  box-shadow: var(--kb-shadow-sm);
  transition: all 0.3s ease;
  position: relative;
}

.kb-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kb-oxblood) 0%, var(--kb-gold) 50%, var(--kb-oxblood) 100%);
  border-radius: var(--kb-radius) var(--kb-radius) 0 0;
}

.kb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kb-shadow-lg);
  border-color: var(--kb-oxblood);
}

.kb-card-cream { background: var(--kb-cream-soft); }
.kb-card-dark { background: var(--kb-oxblood); color: var(--kb-cream); border-color: var(--kb-oxblood); }
.kb-card-dark::before { background: var(--kb-gold); }
.kb-card-dark h2, .kb-card-dark h3, .kb-card-dark h4 { color: var(--kb-gold); }
.kb-card-dark strong { color: var(--kb-gold-light); }

/* ── Section dividers ── */
.kb-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
}

.kb-divider::before,
.kb-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kb-gold) 50%, transparent);
}

.kb-divider-symbol {
  width: 32px;
  height: 32px;
  background: var(--kb-gold);
  color: var(--kb-oxblood);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Decorative gold frame ── */
.kb-frame-gold {
  border: 2px solid var(--kb-gold);
  position: relative;
  padding: 32px;
  border-radius: var(--kb-radius-lg);
}

.kb-frame-gold::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--kb-gold);
  border-radius: calc(var(--kb-radius-lg) - 6px);
  pointer-events: none;
}

/* ── Status pills (alpine.js compatible) ── */
.kb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.kb-pill-jade { background: var(--kb-jade); color: var(--kb-cream); }
.kb-pill-amber { background: var(--kb-lacquer); color: var(--kb-cream); }
.kb-pill-oxblood { background: var(--kb-oxblood); color: var(--kb-gold); }

/* ── Forms ── */
.kb-input,
.kb-textarea,
.kb-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--kb-cream-soft);
  border: 1.5px solid var(--kb-gold);
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kb-input:focus,
.kb-textarea:focus,
.kb-select:focus {
  outline: none;
  border-color: var(--kb-oxblood);
  box-shadow: 0 0 0 3px rgba(195, 154, 64, 0.25);
}

.kb-textarea { min-height: 120px; resize: vertical; }

.kb-label {
  display: block;
  margin-bottom: 6px;
  color: var(--kb-oxblood);
  font-weight: 600;
  font-size: 14px;
}

.kb-label-required::after {
  content: " *";
  color: var(--kb-error);
}

/* ── Tables ── */
.kb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kb-white);
  border-radius: var(--kb-radius);
  overflow: hidden;
  border: 1px solid var(--kb-gold);
  font-size: 14.5px;
}

.kb-table thead th {
  background: var(--kb-oxblood);
  color: var(--kb-gold);
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.kb-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--kb-parchment);
  vertical-align: top;
}

.kb-table tbody tr:nth-child(even) td { background: var(--kb-cream-soft); }
.kb-table tbody tr:hover td { background: var(--kb-cream); }
.kb-table tbody tr:last-child td { border-bottom: none; }

/* ── Callouts ── */
.kb-callout {
  border-left: 4px solid var(--kb-gold);
  background: var(--kb-cream-soft);
  padding: 16px 20px;
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
  margin: 24px 0;
}

.kb-callout-warn { border-left-color: var(--kb-error); background: #FBE8E8; }
.kb-callout-info { border-left-color: var(--kb-jade); background: var(--kb-jade-light); }
.kb-callout-gold { border-left-color: var(--kb-gold-deep); background: var(--kb-cream); }

/* ── Utility ── */
.kb-text-center { text-align: center; }
.kb-text-right { text-align: right; }
.kb-text-oxblood { color: var(--kb-oxblood); }
.kb-text-gold { color: var(--kb-gold-deep); }
.kb-text-jade { color: var(--kb-jade); }
.kb-text-bronze { color: var(--kb-bronze); }
.kb-text-stone { color: var(--kb-stone); }
.kb-bg-cream { background: var(--kb-cream); }
.kb-bg-cream-soft { background: var(--kb-cream-soft); }
.kb-bg-oxblood { background: var(--kb-oxblood); color: var(--kb-cream); }
.kb-bg-parchment { background: var(--kb-parchment); }

.kb-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--kb-gold-deep);
  font-weight: 600;
  margin-bottom: 12px;
}

.kb-display-zh {
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 8px;
}

.kb-display-th {
  font-family: 'Noto Serif Thai', serif;
  letter-spacing: 2px;
}

.kb-display-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: 2px;
}

/* ── Print ── */
@media print {
  body { background: white; color: black; }
  .kb-no-print { display: none !important; }
  .kb-card { border: 1px solid #ccc; box-shadow: none; }
}