/* ===================================================================
   Fine Art Exhibition Design Tokens — 4 Curatorial Design Styles
   1. heritage      (alias: crimson)    : Neo-Classical Heritage & Royal Salon (วิทยาลัยเพาะช่าง)
   2. swiss-modern  (alias: noir)       : Swiss Modernism & Editorial Grid (สวิส โมเดิร์น ซาลอน)
   3. white-cube    (alias: white-cube) : Exaggerated Minimalism (ไวท์คิวบ์ มินิมอล แสงธรรมชาติ)
   4. bento-craft   (alias: celadon)    : Curatorial Bento & Organic Craft (เบนโตะ คราฟต์ ศิลาดล)
   =================================================================== */

/* 1. STYLE: POH-CHANG HERITAGE & WARM GOLD (วิทยาลัยเพาะช่าง - มาตรฐานหลัก) */
:root,
[data-theme="heritage"],
html[data-theme="heritage"],
[data-theme="crimson"],
html[data-theme="crimson"] {
  --theme-id: "heritage";
  --bg-base: #FBF9F4;
  --bg-surface: rgba(255, 255, 255, 0.95);
  --bg-surface-solid: #FFFFFF;
  --bg-surface-elevated: #F4EFE6;
  --mat-bg: #F7F4EC;
  
  --text-main: #171C1A;
  --text-muted: #4A5852;
  --text-subtle: #7A8B84;
  
  --color-accent: #1A2822;
  --color-accent-gold: #C5A059;
  --color-accent-light: #FAF3E3;
  --color-accent-dark: #141E19;
  --color-accent-contrast: #FFFFFF;
  --color-accent-glow: rgba(197, 160, 89, 0.18);
  
  --border-subtle: #E8E0D2;
  --border-accent: rgba(197, 160, 89, 0.55);
  --selection-bg: #C5A059;
  --selection-text: #141E19;
  --card-shadow: 0 10px 30px rgba(26, 40, 34, 0.08);
}

/* 2. STYLE: SWISS MODERNISM & EDITORIAL GRID */
[data-theme="swiss-modern"],
html[data-theme="swiss-modern"],
[data-theme="noir"],
html[data-theme="noir"] {
  --theme-id: "swiss-modern";
  --bg-base: #090a0d;
  --bg-surface: rgba(16, 17, 22, 0.85);
  --bg-surface-solid: #12131a;
  --bg-surface-elevated: #1a1b24;
  --mat-bg: #050608;
  
  --text-main: #f5f5f4;
  --text-muted: #a8a29e;
  --text-subtle: #78716c;
  
  --color-accent: #c5a059;
  --color-accent-gold: #c5a059;
  --color-accent-light: #e2c792;
  --color-accent-dark: #9e7d3b;
  --color-accent-contrast: #090a0d;
  --color-accent-glow: rgba(197, 160, 89, 0.16);
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(197, 160, 89, 0.35);
  --selection-bg: #c5a059;
  --selection-text: #000000;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 3. STYLE: EXAGGERATED MINIMALISM (WHITE CUBE) */
[data-theme="white-cube"],
html[data-theme="white-cube"] {
  --theme-id: "white-cube";
  --bg-base: #f7f7f8;
  --bg-surface: rgba(255, 255, 255, 0.95);
  --bg-surface-solid: #ffffff;
  --bg-surface-elevated: #f0f1f4;
  --mat-bg: #e6e8eb;
  
  --text-main: #141416;
  --text-muted: #53545c;
  --text-subtle: #767782;
  
  --color-accent: #b45309;
  --color-accent-gold: #b45309;
  --color-accent-light: #8c3f04;
  --color-accent-dark: #78350f;
  --color-accent-contrast: #ffffff;
  --color-accent-glow: rgba(180, 83, 9, 0.14);
  
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-accent: rgba(180, 83, 9, 0.38);
  --selection-bg: #b45309;
  --selection-text: #ffffff;
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 4. STYLE: CURATORIAL BENTO & ORGANIC CRAFT */
[data-theme="bento-craft"],
html[data-theme="bento-craft"],
[data-theme="celadon"],
html[data-theme="celadon"] {
  --theme-id: "bento-craft";
  --bg-base: #09130f;
  --bg-surface: rgba(18, 32, 26, 0.88);
  --bg-surface-solid: #13241d;
  --bg-surface-elevated: #1b3329;
  --mat-bg: #050a08;
  
  --text-main: #f2f7f4;
  --text-muted: #9eb5aa;
  --text-subtle: #6e857b;
  
  --color-accent: #7ea990;
  --color-accent-gold: #c5b358;
  --color-accent-light: #c5b358;
  --color-accent-dark: #557964;
  --color-accent-contrast: #09130f;
  --color-accent-glow: rgba(126, 169, 144, 0.18);
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(126, 169, 144, 0.38);
  --selection-bg: #7ea990;
  --selection-text: #09130f;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* ===================================================================
   Universal Semantic Rules
   =================================================================== */

html {
  background-color: var(--bg-base);
  color: var(--text-main);
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background-color: var(--bg-base) !important;
  color: var(--text-main) !important;
}

::selection {
  background-color: var(--selection-bg) !important;
  color: var(--selection-text) !important;
}

/* ===================================================================
   Signature Curatorial Architectural Motif:
   คม 3 มุม + โค้ง 1 มุมล่างขวา (Sharp 3 corners with curved bottom-right)
   Applied universally across all cards, frames, panels, and CTAs
   =================================================================== */

/* All Cards, Panels, Vitrines, and Modals */
.gallery-surface,
.gallery-surface-solid,
[data-theme] .gallery-surface,
[data-theme] .gallery-surface-solid,
#preview-grid > div,
#artwork-container > div > div,
#modal-container {
  border-radius: 0 0 20px 0 !important;
  background: var(--bg-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border-subtle) !important;
  box-shadow: var(--card-shadow);
}

/* Artwork Inner Presentation Matting */
.museum-mat,
[data-theme] .bg-\[\#050608\] {
  background-color: var(--mat-bg) !important;
}

/* Focus Wall stage inner mat */
#artwork-container .relative.bg-\[\#050608\] {
  border-radius: 0 0 16px 0 !important;
}

/* Primary Action Buttons */
.btn-gallery-primary,
#btn-submit,
.master-nav-cta,
a[href="/gallery.html"].bg-\[\#c5a059\] {
  border-radius: 0 0 16px 0 !important;
  background-color: var(--color-accent) !important;
  color: var(--color-accent-contrast) !important;
}


/* Secondary frames, thumbnail cards, and artist frames */
.curatorial-frame,
#modal-avatar,
#avatar-drop-zone,
.relative.w-14.h-14.rounded-sm,
a[title].group\/art {
  border-radius: 0 0 12px 0 !important;
}

/* Plaques and Curatorial Badges */
[data-theme] .bg-\[\#c5a059\]\/15,
[data-theme] .bg-amber-500\/15,
[data-theme] .bg-amber-500\/10,
[data-theme] .bg-amber-500\/20,
#artwork-zone-tag {
  border-radius: 0 0 6px 0 !important;
}

/* Accent Text */
[data-theme] .text-\[\#e2c792\],
[data-theme] .text-\[\#c5a059\],
[data-theme] .text-amber-300,
[data-theme] .text-amber-400 {
  color: var(--color-accent-light) !important;
}

/* Accent Borders */
[data-theme] .border-\[\#c5a059\]\/40,
[data-theme] .border-amber-500\/30,
[data-theme] .border-amber-500\/40,
[data-theme] .border-amber-400\/40 {
  border-color: var(--border-accent) !important;
}

/* Subtle Hairline Borders */
[data-theme] .border-white\/\[0\.08\],
[data-theme] .border-white\/\[0\.06\],
[data-theme] .border-white\/\[0\.07\] {
  border-color: var(--border-subtle) !important;
}

/* Accent Badges / Plaques */
[data-theme] .bg-\[\#c5a059\]\/15,
[data-theme] .bg-amber-500\/15,
[data-theme] .bg-amber-500\/10,
[data-theme] .bg-amber-500\/20 {
  background-color: var(--color-accent-glow) !important;
  color: var(--color-accent-light) !important;
}

[data-theme] .hover\:bg-\[\#d4af37\]:hover,
[data-theme] .hover\:bg-amber-400:hover,
[data-theme] .hover\:bg-amber-500:hover {
  filter: brightness(1.1);
}

/* Secondary links hover */
[data-theme] .hover\:text-\[\#e2c792\]:hover {
  color: var(--color-accent-light) !important;
}

/* ===================================================================
   Unified Master Navigation System (Consistent across all pages)
   =================================================================== */
.master-navbar {
  height: 4rem; /* 64px */
  background: var(--bg-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.master-brand-badge {
  width: 2.25rem; /* 36px (w-9 h-9) */
  height: 2.25rem;
  border-radius: 0 0 8px 0 !important;
  border: 1px solid var(--border-accent);
  background: linear-gradient(135deg, #1A2822 0%, #243830 50%, #141E19 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #E8C87A;
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.25);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.master-brand-badge:hover {
  transform: scale(1.05);
}

.master-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
  border-radius: 0 0 6px 0 !important;
  font-size: 0.8125rem; /* 13px */
  font-weight: 400;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.master-nav-link:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.06);
}

.master-nav-link.active,
.master-nav-link[aria-current="page"] {
  color: var(--color-accent-light) !important;
  background-color: var(--color-accent-glow) !important;
  border-color: var(--border-accent) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.master-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem; /* px-3.5 py-1.5 */
  border-radius: 0 0 8px 0 !important;
  background-color: var(--color-accent) !important;
  color: var(--color-accent-contrast) !important;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px var(--color-accent-glow);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.master-nav-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.master-nav-cta.active,
.master-nav-cta[aria-current="page"] {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 1px;
}

/* ===================================================================
   Curator Desk Entrance Button in Master Navbar
   =================================================================== */
.master-admin-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  height: 30px !important;
  padding: 0 0.65rem !important;
  border-radius: 0 0 6px 0 !important;
  font-size: 0.75rem !important; /* 12px */
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface-elevated) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.master-admin-btn:hover {
  color: var(--color-accent-light) !important;
  border-color: var(--border-accent) !important;
  background: var(--color-accent-glow) !important;
  box-shadow: 0 0 10px var(--color-accent-glow);
}

.master-admin-btn svg {
  color: var(--color-accent-gold) !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

/* ===================================================================
   Curatorial Language Switcher (Pixel-Perfect Segmented Control)
   =================================================================== */
.lang-switcher-wrap {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 6px 0 !important;
  padding: 2px !important;
  gap: 2px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  height: 30px !important;
  box-sizing: border-box !important;
}

[data-theme="white-cube"] .lang-switcher-wrap {
  background: #ebecef !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.lang-tab {
  height: 24px !important;
  min-width: 28px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  border-radius: 0 0 4px 0 !important;
  color: var(--text-subtle) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  margin: 0 !important;
}

.lang-tab:hover:not(.active) {
  color: var(--text-main) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.lang-tab.active {
  background: var(--color-accent) !important;
  color: var(--color-accent-contrast) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}



/* SVG stroke color mapping */
[data-theme] svg.text-\[\#c5a059\] {
  color: var(--color-accent-gold) !important;
}

/* Form inputs harmony across all themes with subtle signature bottom-right cut */
[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.bg-transparent),
[data-theme] select:not(.bg-transparent),
[data-theme] textarea {
  border-radius: 0 0 8px 0 !important;
  background-color: var(--bg-surface-elevated) !important;
  color: var(--text-main) !important;
  border-color: var(--border-subtle) !important;
}

[data-theme] input::placeholder,
[data-theme] textarea::placeholder {
  color: var(--text-subtle) !important;
}

[data-theme] input:focus,
[data-theme] select:focus,
[data-theme] textarea:focus {
  border-color: var(--border-accent) !important;
  outline: none;
}

/* Table harmony */
[data-theme] table th {
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
}

[data-theme] table td {
  color: var(--text-main) !important;
  border-color: var(--border-subtle) !important;
}

/* Theme picker mount harmony */
.theme-picker-mount > div {
  border-radius: 0 0 10px 0 !important;
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}

.theme-picker-mount button {
  border-radius: 0 0 6px 0 !important;
}

/* ===================================================================
   Specific Scoped Overrides for Light Theme (White Cube)
   =================================================================== */
[data-theme="white-cube"] .text-white,
[data-theme="white-cube"] .text-stone-100,
[data-theme="white-cube"] .text-stone-200 {
  color: #141416 !important;
}

[data-theme="white-cube"] .text-stone-300,
[data-theme="white-cube"] .text-stone-400,
[data-theme="white-cube"] .text-slate-400,
[data-theme="white-cube"] .text-neutral-300 {
  color: #53545c !important;
}

[data-theme="white-cube"] .text-stone-700,
[data-theme="white-cube"] .text-slate-500,
[data-theme="white-cube"] .text-slate-600 {
  color: #a1a1aa !important;
}

[data-theme="white-cube"] .bg-slate-900,
[data-theme="white-cube"] .bg-slate-950,
[data-theme="white-cube"] .bg-stone-900 {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="white-cube"] .border-slate-800,
[data-theme="white-cube"] .border-slate-700 {
  border-color: rgba(0, 0, 0, 0.09) !important;
}

[data-theme="white-cube"] .shadow-\[0_4px_24px_rgba\(0\,0\,0\,0\.6\)\] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="white-cube"] #hero-desc {
  color: #4b5563 !important;
}

[data-theme="white-cube"] footer {
  background-color: #f1f3f5 !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ===================================================================
   Curatorial Title Gradients & Accent Text
   =================================================================== */
.gold-gradient-text {
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent-gold) 60%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent-gold);
}

[data-theme="white-cube"] .gold-gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #b45309 !important;
}

/* ===================================================================
   Signature Curatorial Corner Helpers (Sharp 3 + 1 Curved Bottom-Right)
   =================================================================== */
.corner-cut-20 { border-radius: 0 0 20px 0 !important; }
.corner-cut-16 { border-radius: 0 0 16px 0 !important; }
.corner-cut-12 { border-radius: 0 0 12px 0 !important; }
.corner-cut-8  { border-radius: 0 0 8px 0 !important; }
.corner-cut-6  { border-radius: 0 0 6px 0 !important; }

/* Dropdown Options Theming */
select option {
  background-color: var(--bg-surface-solid);
  color: var(--text-main);
}
[data-theme="heritage"] select option {
  background-color: #240d12 !important;
  color: #fffaf5 !important;
}
[data-theme="swiss-modern"] select option {
  background-color: #12131a !important;
  color: #f5f5f4 !important;
}
[data-theme="white-cube"] select option {
  background-color: #ffffff !important;
  color: #141416 !important;
}
[data-theme="bento-craft"] select option {
  background-color: #13261e !important;
  color: #f2f7f4 !important;
}