/* Refinery Design System — foundation (tokens + type roles + base + reusable controls). Recreated in the portal's vanilla stack from the design handoff (_ds/refinery-design-system-16b2acbb…). Latin serifs + Thai faces load from Google Fonts (small woff2); Geist + Orbitron ship locally in assets/fonts/ (small). Role aliases only — never the legacy inverted --black/--cream names. */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Kanit:wght@300&family=IBM+Plex+Sans+Thai:wght@200;300&display=swap'); @font-face{font-family:'Geist';src:url('assets/fonts/Geist.ttf?v=ds1') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Orbitron';src:url('assets/fonts/Orbitron.ttf?v=ds1') format('truetype-variations');font-weight:400 900;font-style:normal;font-display:swap} :root{ /* neutrals + accents (light "warm paper") */ --paper:#F0ECE4; --ink:#1C1F24; --ink-mid:#3A3F47; --ink-dim:#565C64; --surface:#E6DFD0; --surface-raise:#DCD3C0; --surface-card:#DCD3C0; --slate:#3D5A80; --slate-deep:#2B4460; --slate-bg:rgba(61,90,128,.10); --slate-border:rgba(43,68,96,.28); --orange:#C94A1A; --orange-rule:rgba(201,74,26,.30); --orange-bg:rgba(201,74,26,.08); --rule:rgba(28,31,36,.10); --grid:rgba(28,31,36,.04); --char:#16130D; --char-raise:#221E15; --char-raise-2:#2B261B; --focus:rgba(43,68,96,.40); --ok:#1A7F37; --err:#C03A24; /* type roles — Latin primary, Thai fallback (glyph-level fallback handles TH) */ --font-head:'DM Serif Display','Kanit',Georgia,'Times New Roman',serif; --font-subhead:'Geist','IBM Plex Sans Thai',Arial,system-ui,sans-serif; --font-num:'Orbitron','Geist','IBM Plex Sans Thai',system-ui,sans-serif; --font-body:'Playfair Display','Playfair','IBM Plex Sans Thai',Georgia,serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --text-hero:clamp(52px,7vw,96px); --text-h1:56px; --text-h2:36px; --text-h3:26px; --text-standfirst:24px; --text-body-lg:17px; --text-body-md:15px; --text-body-sm:13px; --text-eyebrow:11px; --lh-display:.98; --lh-tight:1.1; --lh-body:1.6; --track-eyebrow:.22em; --track-display:-.01em; /* spacing · radii · motion */ --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:36px; --space-2xl:64px; --nav-h:56px; --page-max:1232px; --page-pad:32px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --t-soft:cubic-bezier(.34,1.56,.64,1); --t-flat:cubic-bezier(.4,0,.2,1); --shadow-raise:0 1px 2px rgba(28,31,36,.06),0 4px 16px rgba(28,31,36,.08); --grid-size:36px; } [data-theme="dark"]{ /* dark "warm charcoal" — grounds on #16130D, paper-colored text, brighter orange */ --paper:#16130D; --ink:#F0ECE4; --ink-mid:#C9C2B2; --ink-dim:#9A9384; --surface:#221E15; --surface-raise:#2B261B; --surface-card:#221E15; --slate:#7FA3D1; --slate-deep:#7FA3D1; --slate-bg:rgba(127,163,209,.14); --slate-border:rgba(127,163,209,.32); --orange:#E2703E; --orange-rule:rgba(226,112,62,.35); --orange-bg:rgba(226,112,62,.12); --rule:rgba(240,236,228,.12); --grid:rgba(240,236,228,.045); --focus:rgba(127,163,209,.5); --ok:#3FB95E; --err:#E8633A; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable} html,body{background:var(--paper);color:var(--ink);font-family:var(--font-body);min-height:100vh} body{-webkit-font-smoothing:antialiased;font-weight:400;line-height:var(--lh-body)} a{color:inherit;text-decoration:none} a:hover{color:var(--orange)} ul{list-style:none} img,svg{max-width:100%;height:auto} *{overflow-wrap:break-word} :is(h1,h2,h3,h4){font-family:var(--font-head);font-weight:400;line-height:var(--lh-display);letter-spacing:var(--track-display)} /* bilingual show/hide, driven by */ html:not([lang="th"]) [lang="th"]{display:none} html[lang="th"] [lang="en"]{display:none} /* ── reusable controls ─────────────────────────────────────────── */ .ds-eyebrow{font-family:var(--font-subhead);font-size:var(--text-eyebrow);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-dim)} .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-subhead);font-size:14px;font-weight:600;line-height:1;height:42px;padding:0 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform .18s var(--t-soft),background .18s var(--t-flat),color .18s var(--t-flat),border-color .18s var(--t-flat),box-shadow .18s var(--t-flat)} .ds-btn:active{transform:scale(.98)} .ds-btn:disabled{opacity:.55;cursor:default;transform:none} .ds-btn-primary{background:var(--ink);color:var(--paper)} .ds-btn-primary:hover:not(:disabled){box-shadow:var(--shadow-raise)} .ds-btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)} .ds-btn-secondary:hover:not(:disabled){border-color:var(--ink-dim)} .ds-btn-accent{background:var(--orange);color:#fff} .ds-btn-accent:hover:not(:disabled){box-shadow:var(--shadow-raise)} .ds-btn-ghost{background:transparent;color:var(--ink-mid);border-color:transparent;padding:0} .ds-btn-ghost:hover:not(:disabled){color:var(--orange)} .ds-input{width:100%;height:44px;padding:0 14px;font-family:var(--font-subhead);font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:10px; transition:border-color .18s var(--t-flat),box-shadow .18s var(--t-flat)} .ds-input::placeholder{color:var(--ink-dim)} .ds-input:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px var(--focus)} .ds-card{background:var(--surface-card);border:1px solid var(--rule);border-radius:var(--r-lg)} .ds-grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size)} @media (prefers-reduced-motion: reduce){ .ds-btn{transition:none} }