/* =====================================================================
   Signage CMS — Theme tokens & overrides
   Visual language of SYSTEM CONVERGANCE (navy + gold, Sora/Sarabun,
   soft elevated cards). Loaded AFTER the Tailwind CDN so the palette
   variables it references resolve here, and a few neutral utilities
   are re-pointed to surface/stage tokens.
   ===================================================================== */

/* ---------- LIGHT (default) ---------- */
:root, :root[data-theme="light"] {
    --c-surface: 255 255 255;

    --c-gray-50:  248 250 252;
    --c-gray-100: 244 246 251;   /* page background */
    --c-gray-200: 230 235 243;   /* lines / borders */
    --c-gray-300: 211 219 232;
    --c-gray-400: 148 163 184;
    --c-gray-500: 100 116 139;
    --c-gray-600: 71 85 105;
    --c-gray-700: 51 65 85;
    --c-gray-800: 15 23 42;      /* primary ink */
    --c-gray-900: 15 23 42;

    --c-blue-50:  232 239 255;
    --c-blue-100: 219 230 255;
    --c-blue-200: 191 211 255;
    --c-blue-400: 96 141 240;
    --c-blue-500: 59 110 220;
    --c-blue-600: 40 86 196;     /* accent */
    --c-blue-700: 32 70 165;
    --c-blue-800: 30 58 138;

    --c-indigo-50:  238 242 255;
    --c-indigo-100: 224 231 255;
    --c-indigo-200: 199 210 254;
    --c-indigo-400: 129 140 248;
    --c-indigo-500: 99 102 241;
    --c-indigo-600: 99 102 241;
    --c-indigo-700: 79 70 229;
    --c-indigo-800: 55 48 163;

    --c-green-50:  220 252 231;
    --c-green-100: 209 250 229;
    --c-green-200: 167 243 208;
    --c-green-400: 52 211 153;
    --c-green-500: 34 197 94;
    --c-green-600: 22 163 74;
    --c-green-700: 21 128 61;
    --c-green-800: 22 101 52;

    --c-red-50:  254 242 242;
    --c-red-100: 254 226 226;
    --c-red-200: 254 202 202;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 220 38 38;
    --c-red-700: 185 28 28;

    --c-amber-50:  255 251 235;
    --c-amber-100: 254 243 199;
    --c-amber-200: 253 230 138;
    --c-amber-500: 245 158 11;
    --c-amber-600: 217 119 6;
    --c-amber-700: 180 83 9;
    --c-amber-800: 146 64 14;

    --c-purple-50:  243 232 255;
    --c-purple-100: 233 213 255;
    --c-purple-600: 147 51 234;
    --c-purple-700: 126 34 206;

    --c-shadow: 15 30 61;
    --stage-bg: #0b1020;        /* dark media/preview stage (both themes) */
    --gold: #c8a85a;
    --scrollbar: 211 219 232;
}

/* ---------- DARK ---------- */
:root[data-theme="dark"] {
    --c-surface: 19 28 54;       /* #131c36 elevated card */

    --c-gray-50:  26 35 66;      /* soft panel */
    --c-gray-100: 11 18 36;      /* page background */
    --c-gray-200: 39 51 86;      /* lines / borders */
    --c-gray-300: 51 65 102;
    --c-gray-400: 100 116 139;
    --c-gray-500: 148 163 184;
    --c-gray-600: 203 213 225;
    --c-gray-700: 203 213 225;
    --c-gray-800: 241 245 249;   /* primary ink (light) */
    --c-gray-900: 241 245 249;

    --c-blue-50:  30 41 70;
    --c-blue-100: 37 49 86;
    --c-blue-200: 49 64 110;
    --c-blue-400: 129 140 248;
    --c-blue-500: 99 102 241;
    --c-blue-600: 99 102 241;    /* accent */
    --c-blue-700: 79 70 229;
    --c-blue-800: 165 180 252;

    --c-indigo-50:  34 38 74;
    --c-indigo-100: 41 46 92;
    --c-indigo-200: 60 66 124;
    --c-indigo-400: 165 180 252;
    --c-indigo-500: 129 140 248;
    --c-indigo-600: 129 140 248;
    --c-indigo-700: 99 102 241;
    --c-indigo-800: 199 210 254;

    --c-green-50:  13 38 30;
    --c-green-100: 17 46 37;
    --c-green-200: 167 243 208;
    --c-green-400: 52 211 153;
    --c-green-500: 52 211 153;
    --c-green-600: 52 211 153;
    --c-green-700: 16 185 129;
    --c-green-800: 167 243 208;

    --c-red-50:  51 23 28;
    --c-red-100: 61 28 34;
    --c-red-200: 90 40 46;
    --c-red-400: 248 113 113;
    --c-red-500: 248 113 113;
    --c-red-600: 248 113 113;
    --c-red-700: 252 165 165;

    --c-amber-50:  51 41 18;
    --c-amber-100: 61 49 22;
    --c-amber-200: 92 70 30;
    --c-amber-500: 251 191 36;
    --c-amber-600: 251 191 36;
    --c-amber-700: 251 191 36;
    --c-amber-800: 253 230 138;

    --c-purple-50:  46 30 64;
    --c-purple-100: 54 36 76;
    --c-purple-600: 192 132 252;
    --c-purple-700: 192 132 252;

    --c-shadow: 0 0 0;
    --stage-bg: #060b18;
    --gold: #d4b46a;
    --scrollbar: 51 65 102;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Sarabun', 'Poppins', 'Inter', sans-serif;
    transition: background-color .25s ease, color .25s ease;
}

/* bg-white → elevated surface (white kept literal for text-white). */
.bg-white { background-color: rgb(var(--c-surface)) !important; }

/* Cards / surfaces get a soft transition */
.bg-white, .rounded-xl, .rounded-lg { transition: background-color .25s ease, border-color .25s ease; }

/* Media / preview stages stay dark in BOTH themes (intentional screens). */
.bg-gray-900 { background-color: var(--stage-bg) !important; }
.bg-gray-950 { background-color: #03060f !important; }

/* Default divider color when no explicit divide-color is set */
.divide-y > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-gray-200)); }

/* Headings use the display face */
h1, h2, h3 { font-family: 'Sora', 'Poppins', 'Sarabun', sans-serif; letter-spacing: -0.2px; }

/* ---------- Form controls ---------- */
input, select, textarea {
    color: rgb(var(--c-gray-800));
    background-color: transparent;
}
input::placeholder, textarea::placeholder { color: rgb(var(--c-gray-400)); opacity: 1; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color-scheme: dark; }
/* Native select popup options readable in both themes */
select option { color: #0f172a; background: #ffffff; }
:root[data-theme="dark"] select option { color: #f1f5f9; background: #131c36; }
input:focus, select:focus, textarea:focus { outline: none; }

/* File input button inherits accent tints (already token-mapped) */
input[type="file"]::file-selector-button { font-family: inherit; cursor: pointer; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--scrollbar));
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-gray-400)); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--scrollbar)) transparent; }

/* ---------- Navbar (brand bar — constant navy in both themes) ---------- */
#main-navbar {
    background: linear-gradient(135deg, #0f1e3d 0%, #1d3461 55%, #2a4d8f 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 22px rgba(8,15,35,.35);
    position: relative;
    overflow: hidden;
}
#main-navbar::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse at 30% -40%, black, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% -40%, black, transparent 70%);
    pointer-events: none;
}
.cms-brand-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #0c1a36;
    display: grid; place-items: center;
    box-shadow: 0 4px 14px rgba(200,168,90,.30), inset 0 1px 0 rgba(255,255,255,.18);
    flex-shrink: 0;
}
.cms-nav-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.cms-nav-pill:hover { color: #fff; background: rgba(255,255,255,.08); }
.cms-nav-pill.is-active {
    color: #fff;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.25);
}
.cms-nav-pill.is-active .cms-nav-emoji { filter: drop-shadow(0 0 6px rgba(200,168,90,.55)); }
.cms-theme-toggle {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.cms-theme-toggle:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); }
.cms-theme-toggle svg { width: 17px; height: 17px; }

/* ---------- Misc polish ---------- */
::selection { background: rgba(99,102,241,.30); }
.shadow-sm, .shadow { box-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.05), 0 6px 18px rgb(var(--c-shadow) / 0.06) !important; }
:root[data-theme="dark"] .shadow-sm,
:root[data-theme="dark"] .shadow { box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.35) !important; }

@media (prefers-reduced-motion: reduce) {
    body, .bg-white, .cms-nav-pill, .cms-theme-toggle { transition: none !important; }
}