/* Hallmark · genre: editorial · macrostructure: Ecosystem Index · theme: Garden * enrichment: real animated assets (user-supplied WebP) · nav: N6 masthead · footer: Ft4 dense colophon * anchor hue: 130 (leaf) · paper band: light · display: sans (IBM Plex Sans Thai) * pre-emit critique: P5 H5 E4 S5 R4 V5 * ──────────────────────────────────────────────────────────────────────────── * OneData — design tokens. ทุกสีและฟอนต์ในระบบต้องอ้างผ่านตัวแปรในไฟล์นี้เท่านั้น */ :root { /* ── กระดาษและหมึก (โทนสว่าง = พื้นผิวแอป "Civic Clarity") ───────────────── */ --color-paper: oklch(97.5% 0.010 120); --color-paper-2: oklch(95.0% 0.013 120); --color-paper-3: oklch(92.0% 0.016 122); --color-rule: oklch(85.5% 0.014 124); --color-rule-soft: oklch(90.5% 0.012 124); --color-neutral: oklch(58.0% 0.014 128); --color-muted: oklch(43.0% 0.016 130); --color-ink: oklch(22.0% 0.020 132); --color-ink-soft: oklch(32.0% 0.018 132); /* ── accent เดียว: เขียวใบไม้ (ใช้ ≤3% ของหน้าจอ) ────────────────────────── */ --color-accent: oklch(46.0% 0.115 145); --color-accent-deep: oklch(36.0% 0.100 148); --color-accent-tint: oklch(93.0% 0.045 145); --color-focus: oklch(52.0% 0.170 145); /* ── สัญญาณเปรียบเทียบรายปี (ต้องมีไอคอนกำกับเสมอ ไม่ใช้สีอย่างเดียว) ─────── */ --color-up: oklch(48.0% 0.115 150); --color-down: oklch(52.0% 0.145 32); --color-warn: oklch(62.0% 0.130 70); /* ── พื้นผิวมืด "Immersive Deep" (hero + ฉาก Explore) ───────────────────── ค่าเริ่มต้นคือธีมสัตว์น้ำ · setDomain() ใน ui.js จะเขียนทับตามชุดข้อมูล */ --dm-deep: oklch(19.0% 0.045 205); --dm-mid: oklch(27.0% 0.058 200); --dm-accent: oklch(78.0% 0.120 185); --dm-ink: oklch(96.0% 0.010 200); --dm-muted: oklch(78.0% 0.020 200); /* ── จานสีข้อมูล (data-viz) — เรียงตามลำดับการใช้ ────────────────────────── */ --dv-1: oklch(46% 0.115 145); --dv-2: oklch(55% 0.105 205); --dv-3: oklch(66% 0.130 75); --dv-4: oklch(52% 0.140 32); --dv-5: oklch(48% 0.100 268); --dv-6: oklch(52% 0.115 325); --dv-7: oklch(62% 0.020 128); /* ── ตัวอักษร ───────────────────────────────────────────────────────────── */ /* หัวเรื่องใช้ sans ตัวเดียวกับเนื้อหา ต่างกันที่น้ำหนัก/ขนาด — เหลือ 2 ตระกูล: sans + mono */ --font-display: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; --font-body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --text-3xs: 0.6875rem; /* 11 */ --text-2xs: 0.75rem; /* 12 */ --text-xs: 0.8125rem; /* 13 */ --text-sm: 0.9375rem; /* 15 */ --text-md: 1.0625rem; /* 17 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.375rem; /* 38 */ --text-4xl: 3rem; /* 48 */ --text-display-s: clamp(2.25rem, 4.5vw, 3.5rem); --text-display: clamp(2.75rem, 7vw, 5.25rem); --text-numeral: clamp(3rem, 9vw, 7rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.65; /* ── ระยะ (4pt scale) ───────────────────────────────────────────────────── */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; /* ── เส้น มุม เงา ───────────────────────────────────────────────────────── */ --rule-hair: 1px; --rule-bold: 2px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-whisper: 0 1px 2px oklch(22% 0.02 132 / 0.06); --shadow-hair: 0 0 0 1px oklch(30% 0.02 132 / 0.07); /* ── จังหวะ ─────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ── ชั้นซ้อน ───────────────────────────────────────────────────────────── */ --z-stage3d: 1; /* ผ้าใบ WebGL ร่วม — เหนือพื้นหลัง section แต่ใต้เนื้อหาทุกชิ้น */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ── โครง ───────────────────────────────────────────────────────────────── */ --wrap: 78rem; --wrap-narrow: 46rem; --font-scale: 1; /* ปุ่มปรับขนาดตัวอักษรใน a11y toolbar เขียนค่านี้ */ } /* ── ธีมมืดทั้งเว็บ (ปุ่มในแถบการเข้าถึง) ─────────────────────────────────── */ :root[data-theme="dark"] { --color-paper: oklch(17.5% 0.016 135); --color-paper-2: oklch(21.5% 0.018 135); --color-paper-3: oklch(26.0% 0.020 135); --color-rule: oklch(34.0% 0.016 135); --color-rule-soft: oklch(28.0% 0.014 135); --color-neutral: oklch(64.0% 0.014 130); --color-muted: oklch(76.0% 0.014 130); --color-ink: oklch(94.0% 0.010 128); --color-ink-soft: oklch(84.0% 0.012 128); --color-accent: oklch(72.0% 0.105 148); --color-accent-deep: oklch(82.0% 0.090 150); --color-accent-tint: oklch(28.0% 0.055 148); --color-focus: oklch(78.0% 0.150 148); --color-up: oklch(74.0% 0.100 150); --color-down: oklch(70.0% 0.130 32); --dv-1: oklch(70% 0.110 148); --dv-2: oklch(72% 0.095 205); --dv-3: oklch(78% 0.115 78); --dv-4: oklch(70% 0.125 32); --dv-5: oklch(70% 0.090 268); --dv-6: oklch(72% 0.100 325); --dv-7: oklch(70% 0.018 128); --shadow-whisper: 0 1px 2px oklch(8% 0.01 132 / 0.5); --shadow-hair: 0 0 0 1px oklch(80% 0.01 132 / 0.10); } /* ── โหมดคอนทราสต์สูง (WCAG AAA) ─────────────────────────────────────────── */ :root[data-contrast="high"] { --color-paper: oklch(100% 0 0); --color-paper-2: oklch(97% 0 0); --color-paper-3: oklch(94% 0 0); --color-rule: oklch(20% 0 0); --color-rule-soft: oklch(45% 0 0); --color-neutral: oklch(28% 0 0); --color-muted: oklch(18% 0 0); --color-ink: oklch(8% 0 0); --color-ink-soft: oklch(14% 0 0); --color-accent: oklch(32% 0.14 145); --color-accent-deep: oklch(24% 0.12 148); --color-accent-tint: oklch(95% 0.03 145); --rule-hair: 2px; } :root[data-theme="dark"][data-contrast="high"] { --color-paper: oklch(8% 0 0); --color-paper-2: oklch(13% 0 0); --color-paper-3: oklch(18% 0 0); --color-ink: oklch(100% 0 0); --color-ink-soft: oklch(94% 0 0); --color-muted: oklch(92% 0 0); --color-neutral: oklch(84% 0 0); --color-rule: oklch(90% 0 0); --color-accent: oklch(88% 0.12 148); }