/* ===================================================================== SEEP DESIGN SYSTEM — Design Tokens ระบบนิเวศเพื่อการศึกษาจังหวัดศรีสะเกษ ไฟล์นี้คือ "แหล่งความจริงเพียงแห่งเดียว" ของธีมทั้งระบบ แก้สี ฟอนต์ ระยะห่าง มุมโค้ง เงา ได้จากไฟล์นี้ไฟล์เดียว ห้ามใส่ค่าดิบ (hard-coded) ในไฟล์อื่น ให้อ้างอิงตัวแปรจากที่นี่เสมอ บุคลิก : Modern but Familiar — ทันสมัย สะอาด เป็นมิตร เชื่อถือได้ ===================================================================== */ :root { /* ================================================================= 1. COLOR — สีหลักของระบบ ค่า *-ink คือเฉดเข้มสำหรับใช้เป็น "สีตัวอักษร" ให้ผ่าน WCAG AA (สีแบรนด์ต้นฉบับสว่างเกินกว่าจะใช้เป็นข้อความบนพื้นขาว) ================================================================= */ /* Primary — Sisaket Deep Indigo */ --color-primary: #163B65; /* 11.4:1 บนขาว */ --color-primary-600: #174F7C; /* 8.6:1 บนขาว */ --color-primary-700: #12314F; --color-primary-800: #0E2540; --color-primary-soft: #E8F1FB; /* พื้นหลังอ่อน */ --color-primary-soft-2: #D5E4F4; --color-primary-ink: #163B65; /* Secondary — Modern Cyan / Sky Blue */ --color-secondary: #1E88E5; /* ใช้เป็นพื้น/เส้น/ปุ่ม */ --color-secondary-600: #1668B8; --color-secondary-ink: #1565C0; /* 5.8:1 — ใช้เป็นข้อความ */ --color-secondary-soft: #E7F4FE; --color-sky: #29B6F6; /* accent กราฟ/เส้นเน้น */ --color-sky-soft: #E1F5FE; /* Accent — Warm Gold (ใช้ไม่เกิน 5–10% ของหน้าจอ) */ --color-accent: #D9A441; --color-accent-600: #BE8C2E; --color-accent-ink: #8A6516; /* 5.3:1 — ใช้เป็นข้อความ */ --color-accent-soft: #FBF2DE; /* Semantic */ --color-success: #2E8B57; --color-success-ink: #1E6B41; /* 6.5:1 */ --color-success-soft: #E6F3EC; --color-warning: #F4A261; --color-warning-ink: #A15A18; /* 5.3:1 */ --color-warning-soft: #FDEDE2; --color-danger: #D9534F; --color-danger-600: #C0392B; --color-danger-ink: #B3352F; /* 6.1:1 */ --color-danger-soft: #FBE9E8; --color-info: var(--color-secondary); --color-info-ink: var(--color-secondary-ink); --color-info-soft: var(--color-secondary-soft); /* Neutral / Surface */ --color-background: #F6F8FB; --color-surface: #FFFFFF; --color-surface-2: #EEF2F7; /* พื้นรอง เช่น หัวตาราง */ --color-surface-3: #E4E9F0; --color-border: #E4E9F0; --color-border-strong: #CFD8E3; /* Text */ --color-text: #172033; /* 15.4:1 */ --color-text-muted: #5F6B7A; /* 5.4:1 — ผ่าน AA */ --color-text-subtle: #7A8697; /* ใช้กับข้อความ ≥16px เท่านั้น */ --color-text-invert: #FFFFFF; /* ข้อความบนพื้นเข้ม (sidebar / hero / footer) */ --color-on-dark: #DCE7F5; --color-on-dark-muted: #A9BDD8; --color-on-dark-faint: #9DB2CE; /* 5.25:1 บนพื้น primary — ผ่าน AA */ /* ================================================================= 2. TYPOGRAPHY ================================================================= */ --font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", -apple-system, "Segoe UI", system-ui, sans-serif; --font-family-heading: var(--font-family); --font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* สเกลตัวอักษร — ห้ามมีค่าใดต่ำกว่า 14px สำหรับข้อความที่ต้องอ่าน */ --font-size-xs: 0.875rem; /* 14px — meta, caption */ --font-size-sm: 0.9375rem; /* 15px — ข้อความรอง */ --font-size-body: 1rem; /* 16px — ค่าเริ่มต้น */ --font-size-lg: 1.0625rem; /* 17px */ --font-size-h3: 1.375rem; /* 22px */ --font-size-h2: 1.75rem; /* 28px */ --font-size-h1: 2.125rem; /* 34px */ --font-size-display: 2.75rem; /* 44px */ /* ขนาดที่ยืดตามหน้าจอ */ --font-size-h1-fluid: clamp(1.625rem, 1.15rem + 2.1vw, 2.375rem); /* 26 → 38px */ --font-size-h2-fluid: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); /* 24 → 30px */ --font-size-hero: clamp(1.75rem, 1.1rem + 3.1vw, 3rem); /* 28 → 48px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ระยะบรรทัด — ภาษาไทยต้องการมากกว่าอังกฤษ */ --line-height-body: 1.7; --line-height-relaxed: 1.75; --line-height-tight: 1.45; --line-height-heading: 1.35; --letter-spacing-normal: 0; --letter-spacing-heading: -0.005em; /* บีบน้อยมาก ไม่ทำให้สระไทยชน */ --letter-spacing-label: 0.02em; /* ความกว้างบรรทัดที่อ่านสบาย ~60–80 ตัวอักษร */ --measure: 68ch; --measure-wide: 80ch; /* ================================================================= 3. SPACING — 8px grid ================================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --card-padding: var(--space-5); /* 24px desktop */ --card-padding-mobile: var(--space-4); /* 16px mobile */ --section-gap: var(--space-5); --page-padding: var(--space-6); --page-padding-mobile: var(--space-4); /* ความกว้างสูงสุดของเนื้อหา */ --content-max: 1200px; --content-narrow: 1100px; --reading-max: 760px; /* ================================================================= 4. RADIUS ================================================================= */ --radius-sm: 8px; /* badge, chip, องค์ประกอบเล็ก */ --radius-md: 10px; /* input, button */ --radius-lg: 14px; /* card */ --radius-xl: 18px; /* feature card, modal */ --radius-2xl: 22px; /* hero panel */ --radius-pill: 999px; /* ================================================================= 5. SHADOW — นุ่ม บาง ไม่เรืองแสง ================================================================= */ --shadow-xs: 0 1px 2px rgba(23, 32, 51, .05); --shadow-sm: 0 1px 2px rgba(30, 50, 80, .05), 0 2px 8px rgba(30, 50, 80, .04); --shadow-md: 0 4px 20px rgba(30, 50, 80, .06); --shadow-lg: 0 8px 28px rgba(30, 50, 80, .10); --shadow-xl: 0 18px 48px rgba(23, 45, 78, .16); --shadow-focus: 0 0 0 3px rgba(30, 136, 229, .28); /* ================================================================= 6. SIZE — ขนาดควบคุมการสัมผัส (touch target ≥ 44px) ================================================================= */ --control-height: 44px; --control-height-sm: 36px; --control-height-lg: 50px; --input-height: 46px; --textarea-min: 120px; --touch-min: 44px; --sidebar-width: 268px; --sidebar-width-collapsed: 76px; --topbar-height: 60px; /* ================================================================= 7. MOTION — เบา สั้น ไม่รบกวน ================================================================= */ --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1); --transition-base: 200ms cubic-bezier(.4, 0, .2, 1); --transition-slow: 250ms cubic-bezier(.4, 0, .2, 1); --z-sticky: 1020; --z-backdrop: 1040; --z-sidebar: 1045; --z-modal: 1055; --z-toast: 1090; } /* --------------------------------------------------------------------- ลดการเคลื่อนไหวสำหรับผู้ใช้ที่ตั้งค่าไว้ (accessibility) --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 1ms; --transition-base: 1ms; --transition-slow: 1ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- สะพานเชื่อมกับ Bootstrap 5 — ให้คอมโพเนนต์มาตรฐานใช้ token ชุดเดียวกัน --------------------------------------------------------------------- */ :root { --bs-primary: #163B65; --bs-primary-rgb: 22, 59, 101; --bs-secondary: #1E88E5; --bs-secondary-rgb: 30, 136, 229; --bs-success: #2E8B57; --bs-success-rgb: 46, 139, 87; --bs-warning: #F4A261; --bs-warning-rgb: 244, 162, 97; --bs-danger: #D9534F; --bs-danger-rgb: 217, 83, 79; --bs-info: #29B6F6; --bs-info-rgb: 41, 182, 246; --bs-body-font-family: var(--font-family); --bs-body-font-size: var(--font-size-body); --bs-body-line-height: var(--line-height-body); --bs-body-color: #172033; --bs-body-color-rgb: 23, 32, 51; --bs-body-bg: #F6F8FB; --bs-secondary-color: #5F6B7A; --bs-emphasis-color: #172033; --bs-border-color: #E4E9F0; --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-pill: var(--radius-pill); --bs-link-color: #174F7C; --bs-link-color-rgb: 23, 79, 124; --bs-link-hover-color: #163B65; --bs-link-hover-color-rgb: 22, 59, 101; --bs-heading-color: #172033; } /* --------------------------------------------------------------------- ตัวแปรเดิม (--seep-*) — คงไว้เพื่อความเข้ากันได้ย้อนหลัง หน้าเก่าที่ยังอ้างอิงชื่อเดิมจะได้ค่าจากชุดใหม่โดยอัตโนมัติ ไม่ต้องไล่แก้ทุกไฟล์ และไม่ทำให้ของเดิมพัง --------------------------------------------------------------------- */ :root { --seep-navy: var(--color-primary); --seep-navy-600: var(--color-primary-600); --seep-royal: var(--color-primary-600); --seep-royal-600: var(--color-primary); --seep-cyan: var(--color-secondary-ink); --seep-green: var(--color-success-ink); --seep-gold: var(--color-accent-ink); --seep-danger: var(--color-danger-ink); --seep-ground: var(--color-background); --seep-surface: var(--color-surface); --seep-surface-2: var(--color-surface-2); --seep-line: var(--color-border); --seep-line-soft: var(--color-surface-2); --seep-ink: var(--color-text); --seep-ink-2: var(--color-text); --seep-ink-3: var(--color-text-muted); --seep-royal-soft: var(--color-primary-soft); --seep-cyan-soft: var(--color-secondary-soft); --seep-green-soft: var(--color-success-soft); --seep-gold-soft: var(--color-accent-soft); --seep-radius: var(--radius-lg); --seep-radius-sm: var(--radius-sm); --seep-shadow: var(--shadow-md); --seep-shadow-lg: var(--shadow-lg); --seep-font-display: var(--font-family-heading); --seep-font-body: var(--font-family); --seep-font-mono: var(--font-family-mono); }