/* The Foundry Labs — Design Tokens v1.1 (2026-08-06) Canonical, copied from design-system handoff. If a value here conflicts with any older doc (Brand.md §5) or with v3.css, THIS FILE WINS. Fonts are loaded via in each page (not @import — faster paint). */ :root { /* Base neutrals */ --ink: #161b20; /* dark bg / heading text on light */ --graphite: #303941; /* secondary dark bg, section divider slide */ --bone: #f2f0ea; /* text on dark */ --paper: #fbfaf6; /* light page bg */ --surface: #ffffff; /* card surface on light */ --muted: #6b747c; /* secondary text */ --body: #3d454d; /* body text on light (softer than ink) */ --line: #deddd6; /* hairline on light */ --line-dark: rgba(242, 240, 234, .16); /* hairline on dark */ --muted-dark: #9aa5ae; /* secondary text on dark */ --label-dark: #7f8b95; /* mono eyebrow on dark */ /* Ocean accent — the ONLY accent family allowed in content */ --aqua: #4fd6c4; /* light end — use on dark bg */ --ocean: #22a2c2; /* mid — links, icons, primary accent (lines/icons/≥24px text only) */ --blue: #2e6bc4; /* dark end — hover, accent text on light bg (use for text <24px) */ --grad: linear-gradient(122deg, #6addd4, #22a2c2 52%, #1c6c96); --ocean-soft: rgba(34, 162, 194, .12); /* accent chip bg on light */ /* Semantic (state only, never decoration) */ --success: #4fd6c4; --info: #22a2c2; --warning: #e0a03a; --danger: #d6675c; /* Logo-only gradients — NEVER use as content accents */ --logo-frost: linear-gradient(135deg,#F4FBFE,#BADAEE 30%,#7BA6C8 52%,#A8CCE4 74%,#EAF4FB); --logo-ocean-aqua: linear-gradient(135deg,#EAFAFA,#6ADDD4 26%,#22A2C2 50%,#1C6C96 72%,#BCEAEA); --logo-dot: linear-gradient(135deg,#4FD6C4,#2E6BC4); --logo-frost-outline: #9BB8CE; /* Placeholder mock-visual fills (§8) — no product photography yet */ --mock-light: #eceae3; --mock-dark: #232b32; /* Type */ --font-display-en: 'IBM Plex Sans', Anuphan, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* EN headings, 400–500 only */ --font-display-th: Anuphan, "IBM Plex Sans Thai", sans-serif; /* TH headings, 500–600, ≥24px */ --font-body: "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; --font-mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, SFMono-Regular, Menlo, monospace; /* Active display font — swapped per html[lang] in v3.css */ --font-display: var(--font-display-en); --weight-display: 500; --ls-display: -.02em; /* Spacing scale (4px base) */ --s-xs: 4px; --s-s: 8px; --s-m: 16px; --s-l: 24px; --s-xl: 40px; --s-2xl: 72px; --s-3xl: 120px; /* Radius */ --r-s: 8px; /* input, square chip */ --r-m: 16px; /* card */ --r-l: 20px; /* panel */ --r-pill: 999px; /* Elevation */ --e1: 0 1px 2px rgba(22,27,32,.06), 0 6px 16px rgba(22,27,32,.06); --e2: 0 2px 6px rgba(22,27,32,.08), 0 18px 40px rgba(22,27,32,.12); --glow: 0 0 0 1px rgba(34,162,194,.35), 0 0 34px rgba(34,162,194,.25); /* dark bg only */ /* Layout */ --container: 1240px; --section-y: 120px; /* desktop */ --section-y-mobile: 72px; --gutter: 24px; } /* Thai pages: swap active display font to Anuphan 600, no negative tracking */ html[lang="th"] { /* IBM Plex Sans first: Latin glyphs render sans per spec; Thai glyphs fall through to Anuphan */ --font-display: 'IBM Plex Sans', Anuphan, "IBM Plex Sans Thai", sans-serif; --weight-display: 500; --ls-display: 0em; } /* Chinese fallback: IBM Plex Sans/Anuphan don't cover CJK — use the body stack (which already ends in "Noto Sans SC") for display roles too, per handoff §4 note "ประโยคที่ปนไทย-อังกฤษใช้ฟอนต์เดียว" extended to zh so headings don't silently fall back to a mismatched system font mid-word. */ html[lang="zh-CN"] { --font-display: var(--font-body); --weight-display: 600; --ls-display: 0em; } /* Type scale — apply these, do not invent sizes. Thai headings: swap font-family to var(--font-display-th) and weight to 600. */ .t-display-xl { font: var(--weight-display) 56px/1.05 var(--font-display); letter-spacing: var(--ls-display); } .t-display-l { font: var(--weight-display) 38px/1.15 var(--font-display); letter-spacing: var(--ls-display); } .t-heading-m { font: 600 24px/1.4 var(--font-body); } .t-body-m { font: 400 15px/1.75 var(--font-body); max-width: 68ch; } .t-body-s { font: 400 13px/1.7 var(--font-body); color: var(--muted); } .t-label { font: 400 11px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* Thai heading helper */ .th { font-family: var(--font-display-th); font-weight: 600; line-height: 1.3; }