/*! isPluto Space theme · © SMHosting Co., Ltd. */
/* isPluto Space (web 1.0) — fonts, tokens and the page base. The sections' look is in design.css.
   Anton and Condiment: SIL Open Font License 1.1 (fonts/OFL.txt), English words only (no Thai glyphs).
   Thai and body text: LINE Seed, already on the site (assets/site/fonts/fonts.css, family "LINE Seed"). */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Condiment"; src: url("../fonts/condiment.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.cms-theme-ispluto-space {
	--bg: #050818; --bg-2: #0a0f2e; --surface: #0d1330;
	--fg: #edeffa; --fg-2: #c7cdf0; --muted: #a3abcf; --link: #c7cdff;
	--primary: #8c97ff; --lime: #b8ff5c; --cta: #ffd84d; --cta-ink: #0a0e24;
	--ok: #86efac; --ok-bg: #123a2a; --warn: #fcd34d; --warn-bg: #3a2e10; --bad: #ff9b90; --bad-bg: #3d1d1d;
	--placeholder: #fdba74; --placeholder-bg: rgba(253, 186, 116, .12);
	--hero-grad: radial-gradient(120% 90% at 70% 10%, #141a4a 0%, #070b24 55%, #050818 100%);
	--font-display: "Anton", Impact, "LINE Seed", sans-serif;
	--font-script: "Condiment", cursive;
	--font-body: "LINE Seed", "LINE Seed Sans TH", Tahoma, system-ui, sans-serif;
	--gutter: max(24px, 5vw); /* web 1.1 */
	--ip-max: 1240px; /* web 1.1: content at most 1240px */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	color-scheme: dark;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;

	& .body, & .main, & #main { background: transparent; }
	& .body { position: relative; isolation: isolate; min-height: 100vh; overflow-x: clip; }
	& .main { position: relative; z-index: 1; }
	& a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
	& a:hover, & a:focus-visible { color: #fff; }
	& :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
	& ::selection { background: rgba(184, 255, 92, .3); color: #fff; }
	& p, & li, & dd, & dt, & label, & small { color: inherit; }
	& h1, & h2, & h3, & h4, & h5 { color: var(--fg); font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

	/* Kumo's sections hold the theme's blocks: no band colour of their own, no extra gaps */
	& .main > .section, & .main section.section { background: transparent; padding: 0; margin: 0; border: 0; }
	& .main .section > .container, & .main .section > .container-fluid { --bs-gutter-x: 0; }
	& .main .section > .container { max-width: calc(var(--ip-max) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
	& .main .section.ip-w-1240 > .container { max-width: calc(1240px + 2 * var(--gutter)); }
	& .main .section.ip-w-1200 > .container { max-width: calc(1200px + 2 * var(--gutter)); }
	& .main .section > .container-fluid { padding-left: 0; padding-right: 0; }
	& .main .section .row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }

	/* Kumo's own pages (a post, the 404 page, a form's thank-you) still read well on the dark ground */
	& .page-header { background: var(--hero-grad); border: 0; border-radius: 0 0 40px 40px; }
	& .card { background: rgba(255, 255, 255, .045); color: var(--fg); border-color: rgba(255, 255, 255, .12); }
	& .form-control, & .form-select { background: rgba(255, 255, 255, .06); color: var(--fg); border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; min-height: 48px; }
	& .form-control::placeholder { color: var(--muted); opacity: 1; }
	& .form-control:focus, & .form-select:focus { background: rgba(255, 255, 255, .09); color: #fff; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(184, 255, 92, .18); }
	& .form-select option { background: var(--surface); color: var(--fg); }
	& .form-label, & .form-check-label { color: var(--fg); font-weight: 700; }
	& .form-text, & .text-muted, & .text-body-secondary { color: var(--muted) !important; }
	& .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
	& .form-check-input:checked { background-color: var(--lime); border-color: var(--lime); }
	& .btn-primary, & .btn-modern.btn-primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); border-radius: 999px; min-height: 52px; padding: 0 28px; font-weight: 700; }
	& .btn-primary:hover, & .btn-primary:focus { background: #ffe27a; border-color: #ffe27a; color: var(--cta-ink); }
	& .alert-success { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
	& .alert-danger { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
	& .cms-skip-link { background: var(--cta); color: var(--cta-ink); }
}