/* SEASA design tokens.
   Copied verbatim from the design system (SEASA Design System/tokens/*.css).
   These are the contract — do not add hues, a dark mode, or square corners.
   Font faces live in fonts.css; the >=768px display step lives in base.css. */

/* ---------- colors ---------- */
:root{
  /* ---- Brand blues (base scale, built out from the three logo blues) ---- */
  --blue-950:#0A3A63;
  --blue-900:#0E4C82;
  --blue-800:#14589A;
  --blue-700:#1B6AB0; /* logo deep blue — PRIMARY */
  --blue-600:#2380C4;
  --blue-500:#2B8FD0; /* logo mid blue */
  --blue-400:#4EABDD;
  --blue-300:#6EC6E8; /* logo light sky blue — accent, use sparingly */
  --blue-200:#A6DCF1;
  --blue-100:#D3EDF9;
  --blue-50:#EDF7FC;

  /* ---- Neutrals (cool, never warm grey) ---- */
  --ink-900:#0D2233;
  --ink-700:#274557;
  --ink-500:#556E7E;
  --ink-400:#7C919E;
  --ink-300:#AFBFC9;
  --ink-200:#D8E2E8;
  --ink-100:#EBF1F4;
  --white:#FFFFFF;

  /* ---- Semantic status ---- */
  --green-600:#1F9D6B;
  --green-100:#E1F5EC;
  --amber-600:#C7860B;
  --amber-100:#FDF1DC;
  --red-600:#CE4436;
  --red-100:#FBE7E4;

  /* ---- Semantic aliases ---- */
  --brand-primary:var(--blue-700);
  --brand-primary-hover:var(--blue-800);
  --brand-primary-active:var(--blue-900);
  --brand-secondary:var(--blue-500);
  --brand-accent:var(--blue-300);

  --text-strong:var(--blue-900);
  --text-heading:var(--blue-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-link:var(--brand-primary);
  --text-link-hover:var(--blue-500);
  --text-on-brand:var(--white);

  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-sunken:var(--blue-50);
  --surface-tint:var(--blue-100);
  --surface-brand:var(--brand-primary);
  --surface-brand-soft:var(--blue-50);
  --surface-overlay:rgba(13,34,51,.55);

  --border-subtle:var(--ink-200);
  --border-default:var(--ink-300);
  --border-brand:var(--blue-200);
  --focus-ring:var(--blue-300);

  --status-live:var(--red-600);
  --status-live-bg:var(--red-100);
  --status-ok:var(--green-600);
  --status-ok-bg:var(--green-100);
  --status-warn:var(--amber-600);
  --status-warn-bg:var(--amber-100);
  --status-info:var(--brand-secondary);
  --status-info-bg:var(--blue-100);

  /* ---- Gradients: only ever blue→blue, low contrast, used behind headers ---- */
  --grad-wave:linear-gradient(135deg,var(--blue-700) 0%,var(--blue-500) 58%,var(--blue-300) 100%); /* @kind color */
  --grad-sky:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 100%); /* @kind color */
  --grad-protect:linear-gradient(180deg,rgba(10,58,99,0) 0%,rgba(10,58,99,.72) 100%); /* @kind color */
}

/* ---------- typography ---------- */
:root{
  --font-display:"Prompt","IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans Thai","Prompt",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Mobile-first sizes. Display sizes step up at >=768px (see base.css). */
  --fs-display-1:2.25rem; /* 36 */
  --fs-display-2:1.75rem; /* 28 */
  --fs-h1:1.5rem;         /* 24 */
  --fs-h2:1.25rem;        /* 20 */
  --fs-h3:1.0625rem;      /* 17 */
  --fs-body-lg:1.0625rem; /* 17 */
  --fs-body:1rem;         /* 16 */
  --fs-body-sm:.9375rem;  /* 15 */
  --fs-caption:.8125rem;  /* 13 */
  --fs-label:.75rem;      /* 12 */

  --lh-tight:1.12; /* @kind font */
  --lh-heading:1.22; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-loose:1.75; /* @kind font */

  --ls-display:-0.02em; /* @kind font */
  --ls-heading:-0.01em; /* @kind font */
  --ls-body:0; /* @kind font */
  --ls-label:.08em; /* @kind font */ /* eyebrows / overlines, uppercase */

  /* Thai needs more leading than Latin; apply to bilingual blocks. */
  --lh-thai:1.85; /* @kind font */
}

/* ---------- spacing ---------- */
:root{
  /* 4px base scale */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Layout */
  --gutter-mobile:20px;
  --gutter-tablet:32px;
  --gutter-desktop:48px;
  --content-max:1140px;
  --measure-prose:66ch; /* @kind spacing */
  --section-y-mobile:var(--space-12);
  --section-y-desktop:var(--space-24);
  --tap-min:44px;
}

/* ---------- shape ---------- */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-2xl:36px;
  --radius-pill:999px;
  --radius-circle:50%;

  --border-width:1px;
  --border-width-thick:2px;

  /* Flowing wave edge used on hero/section bottoms */
  --wave-crest:0 0 var(--radius-2xl) var(--radius-2xl); /* @kind radius */
}

/* ---------- elevation ---------- */
:root{
  /* Shadows are cool-tinted (navy, never black) and soft — airy, not heavy. */
  --shadow-xs:0 1px 2px rgba(14,76,130,.06);
  --shadow-sm:0 2px 6px rgba(14,76,130,.08);
  --shadow-md:0 6px 18px rgba(14,76,130,.10);
  --shadow-lg:0 14px 34px rgba(14,76,130,.12);
  --shadow-xl:0 24px 60px rgba(14,76,130,.16);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-focus:0 0 0 3px rgba(110,198,232,.55);
  --ring-brand:0 0 0 1px var(--border-brand);
  --blur-glass:saturate(140%) blur(12px); /* @kind other */
}

/* ---------- motion ---------- */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --dur-reveal:600ms; /* @kind other */
  /* Water-like: quick out, long settle. No bounce, no overshoot. */
  --ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-base:all var(--dur-base) var(--ease-out);
}