/* ScreenX white/orange system. Loaded after page styles; artwork and shop tokens retain their colors. */
:root {
    color-scheme: light;
    --sx-bg: #ffffff;
    --sx-bg2: #fafaf8;
    --sx-panel: #ffffff;
    --sx-panel2: #f8f8f5;
    --sx-panel-2: #f8f8f5;
    --sx-surface: #f3f3ef;
    --sx-elev: #f5f5f1;
    --sx-bg-card: #ffffff;
    --sx-bg-elevated: #fafaf8;
    --sx-bg-input: #f8f8f5;
    --sx-line: #eaeae5;
    --sx-line2: #ddddd5;
    --sx-line-strong: #ddddd5;
    --sx-border: #eaeae5;
    --sx-border-hover: #d6d6cc;
    --sx-line-orange: #ffd6bd;
    --sx-text: #292925;
    --sx-text-soft: #50504a;
    --sx-muted: #74746b;
    --sx-muted-2: #6d6d63;
    --sx-text-muted: #74746b;
    --sx-text-dim: #6d6d63;
    --sx-brand: #ff6a00;
    --sx-orange: #ce4700;
    --sx-orange2: #c34608;
    --sx-orange-2: #c34608;
    --sx-orange-deep: #b63d00;
    --sx-orange-light: #c34608;
    --sx-orange-soft: #fff1e8;
    --sx-orange-gradient: linear-gradient(135deg, #d94b00, #c84000);
    --sx-orange-glow: rgba(206, 71, 0, .08);
    --sx-danger: #b32d35;
    --sx-success: #21734b;
    --sx-green: #21734b;
    --sx-info: #246b8c;
    --sx-shadow: 0 8px 28px rgba(41, 41, 37, .045);
    --sx-shadow-glow: 0 6px 20px rgba(206, 71, 0, .07);
    --sx-font: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg: var(--sx-bg);
    --bg2: var(--sx-bg2);
    --bg-soft: var(--sx-panel-2);
    --panel: var(--sx-panel);
    --panel2: var(--sx-panel-2);
    --panel-2: var(--sx-panel-2);
    --surface: var(--sx-surface);
    --elev: var(--sx-elev);
    --line: var(--sx-line);
    --line2: var(--sx-line2);
    --line-strong: var(--sx-line-strong);
    --text: var(--sx-text);
    --text-soft: var(--sx-text-soft);
    --muted: var(--sx-muted);
    --muted2: var(--sx-muted-2);
    --muted-2: var(--sx-muted-2);
    --orange: var(--sx-orange);
    --orange2: var(--sx-orange-2);
    --orange-2: var(--sx-orange-2);
    --orange-deep: var(--sx-orange-deep);
    --orange-soft: var(--sx-orange-soft);
    --line-orange: var(--sx-line-orange);
    --green: var(--sx-green);
    --cyan: var(--sx-info);
    --danger: var(--sx-danger);
    --yellow: #916500;
    --shadow: var(--sx-shadow);
    --glow: 0 4px 14px rgba(206, 71, 0, .08);
    --glow-o: var(--glow);
    --soft-shadow: var(--sx-shadow);
    --bs-body-color: var(--sx-text);
    --bs-body-bg: var(--sx-bg);
    --bs-border-color: var(--sx-line);
    --bs-secondary-color: var(--sx-muted);
}

html { background: var(--sx-bg); }
body { background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font); }
body::before { background: none; }
::selection { background: #ffdec8; color: #292925; }
:focus-visible { outline: 3px solid #dc5c17; outline-offset: 3px; }
button, input, textarea, select { font-family: inherit; }
input, textarea, select { accent-color: var(--sx-orange); }
input::placeholder, textarea::placeholder { color: #6d6d63; opacity: 1; }
select option { color: var(--sx-text); background: #fff; }

/* Shared page landmarks; sizing and interaction belong to their module. */
:is(.topbar, .page-header, .site-header, .search-topbar, .sx-topbar) {
    background: rgba(255, 255, 255, .97);
    border-color: var(--sx-line);
    box-shadow: none;
}
:is(.brand-mark, .brand-logo, .sx-logo-mark) {
    background: var(--sx-brand);
    color: #fff;
    box-shadow: none;
    text-shadow: none;
}
:is(.brand, .brand-title, .brand-text, .sx-logo-text) { text-shadow: none; }
:is(.brand-title, .brand-text, .sx-logo-text) > :is(span, b) { color: var(--sx-brand); text-shadow: none; }
:is(.card, .panel, .glass-panel, .summary-card, .portfolio-card, .sx-panel) { box-shadow: var(--sx-shadow); }
:is(.hero, .intro-bar) h1 { letter-spacing: -.035em; }
:is(.btn.primary, .btn-primary, .btn-sx-primary, .primary-link, .submit, .sx-btn-primary) {
    background: var(--sx-orange);
    border-color: var(--sx-orange);
    color: #fff;
    text-shadow: none;
    box-shadow: 0 4px 10px rgba(206, 71, 0, .08);
}
:is(.btn.primary, .btn-primary, .btn-sx-primary, .primary-link, .submit, .sx-btn-primary):hover {
    background: var(--sx-orange-deep);
    color: #fff;
}

/* Preserve merchant-selected artwork/surface colors within the new platform shell. */
.sx-store-hero,
.sx-store-theme[data-card-style='glass'] :is(.sx-catalog-card, .sx-product-card) {
    --sx-text: #ffffff;
    --sx-text-soft: #efefeb;
    --sx-muted: #c5c5be;
    --sx-muted-2: #bebeb6;
    --sx-line: rgba(255, 255, 255, .18);
    color: var(--sx-text);
}
.sx-store-theme .sx-btn.primary { background: var(--shop-accent); color: var(--shop-accent-text); }
.sx-store-theme :is(.sx-product-price, .shop-product-price-large) { color: #ce4700; }
.sx-store-theme[data-card-style='glass'] .sx-product-card .sx-product-price { color: var(--shop-accent-2); }
.sx-store-logo-fallback { background: var(--shop-surface); }
.sx-store-hero .sx-contact-link:hover { color: var(--sx-text); }
.shop-preview-hero { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Seven reachable destinations retain usable targets on a 320px viewport. */
@media (max-width: 600px) {
    .sx-bottomnav:has(.sx-nav-designs) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sx-bottomnav:has(.sx-nav-designs) .sx-nav-tab { min-width: 0; min-height: 44px; padding: 8px 1px; box-sizing: border-box; }
    .sx-bottomnav:has(.sx-nav-designs) .sx-create-btn { width: 40px; height: 40px; margin-top: -12px; }
}