/* ==========================================================================
PattayaHomes — shared design tokens + base
Extracted verbatim from the homepage. Every public page loads this first,
so colours, fonts and the container are identical across the whole site.
Load order on each page: tokens.css → shell.css → (page-specific styles)
========================================================================== */
:root{
/* Type */
--display:'Plus Jakarta Sans',system-ui,sans-serif;
/* Brand + ink */
--brand:#AD3D41;
--brand-dark:#8E3034;
--ink:#1B1714;
/* Surfaces */
--paper:#F5F3F0;
--card:#fff;
--line:#E7E2DC;
--sand:#EEE8E1;
/* Text + accents */
--muted:#81786F;
--green:#4F7A5A;
--green-soft:#EAF4EC;
/* Elevation */
--shadow:0 18px 50px rgba(27,23,20,.08);
/* Sticky header height — referenced by anchor-scroll offset in shell.js */
--sticky-header-height:82px;
}
@media (max-width:620px){
:root{ --sticky-header-height:66px; }
}
/* Base reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:Inter,system-ui,sans-serif;
overflow-x:clip;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
a{ color:inherit; }
button,input,select,textarea{ font:inherit; }
/* Shared page container */
.shell{
max-width:1180px;
margin:auto;
padding-left:18px;
padding-right:18px;
}
@media(max-width:620px){
.shell{ padding-left:14px; padding-right:14px; }
}
/* Shared fonts — load once per page in :
*/
/* ==========================================================================
Shared typography scale — applied site-wide so font sizes don't jump
between pages. Each page can override for unique hero elements,
but body copy, section titles and leads should always use these.
========================================================================== */
/* Base */
body{ font-size:16px; line-height:1.6; }
/* Headings */
h1{ font-family:var(--display); font-weight:800; line-height:1.12;
font-size:clamp(32px,5vw,56px); margin:0; }
h2{ font-family:var(--display); font-weight:700; line-height:1.18;
font-size:clamp(22px,3vw,34px); margin:0 0 .5em; }
h3{ font-family:var(--display); font-weight:700; line-height:1.25;
font-size:clamp(17px,2vw,22px); margin:0 0 .4em; }
/* Lead / section intro */
.lead, .section-lead{
font-size:clamp(15px,1.5vw,18px);
line-height:1.65;
color:var(--muted);
}
/* Eyebrow / kicker */
.eyebrow{
display:block;
font-size:11px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--brand);
margin-bottom:.6em;
}
/* Section title (used in forms/cards) */
.section-title{
font-family:var(--display);
font-weight:700;
font-size:clamp(16px,1.6vw,20px);
margin:0 0 .75em;
}