/* SLOW NORTH — brand.css (9Expert CI Skill Studio) */
/* ใส่ data-theme="dark" ที่ <html> เพื่อสลับเป็นโหมดมืด */

:root {
  --brand-primary: #2D6A4F;
  --brand-secondary: #95D5B2;
  --brand-accent: #D4A373;
  --brand-ink: #1B2E24;
  --brand-paper: #F6F8F3;
  --brand-action: #2D6A4F;
  --brand-on-action: #FFFFFF;
  --brand-link: #2D6A4F;
  --brand-on-primary: #F6F8F3;
  --brand-on-secondary: #0D1B2A;
  --brand-on-accent: #0D1B2A;
  --brand-muted: #68756C;
  --brand-line: #D7DCD6;
  --brand-surface: #FFFFFF;
  --brand-tint: #F5F8F7;
  --brand-badge-bg: #DDE7E3;
  --brand-badge-text: #2D6A4F;
  --brand-table-head-bg: #95D5B2;
  --brand-table-head-text: #0D1B2A;

  --brand-primary-50: #F0F5F3;
  --brand-primary-100: #DDE7E3;
  --brand-primary-200: #B8CCC3;
  --brand-primary-300: #8EAFA0;
  --brand-primary-400: #5F8E79;
  --brand-primary-500: #2D6A4F;
  --brand-primary-600: #275C45;
  --brand-primary-700: #204C39;
  --brand-primary-800: #193B2C;
  --brand-primary-900: #132E22;
  --brand-primary-950: #0E2018;
  --brand-secondary-50: #F8FCFA;
  --brand-secondary-100: #EEF8F3;
  --brand-secondary-200: #DBF1E5;
  --brand-secondary-300: #C6E8D5;
  --brand-secondary-400: #AEDFC4;
  --brand-secondary-500: #95D5B2;
  --brand-secondary-600: #82B99B;
  --brand-secondary-700: #6B9980;
  --brand-secondary-800: #537764;
  --brand-secondary-900: #405C4D;
  --brand-secondary-950: #2D4035;
  --brand-accent-50: #FCF9F5;
  --brand-accent-100: #F8F0E9;
  --brand-accent-200: #F0E0CF;
  --brand-accent-300: #E8CDB3;
  --brand-accent-400: #DEB995;
  --brand-accent-500: #D4A373;
  --brand-accent-600: #B88E64;
  --brand-accent-700: #997553;
  --brand-accent-800: #775B40;
  --brand-accent-900: #5B4631;
  --brand-accent-950: #403123;

  --brand-success: #15803D;
  --brand-warning: #B45309;
  --brand-error: #B91C1C;
  --brand-info: #1D4ED8;
  --ui-success-bg: #D7E7DA;
  --ui-success-text: #126F35;
  --ui-warning-bg: #EDE1D2;
  --ui-warning-text: #9D4808;
  --ui-error-bg: #EDD9D5;
  --ui-error-text: #B91C1C;
  --ui-info-bg: #D8E0EF;
  --ui-info-text: #1D4ED8;
  --brand-chart-1: #2D6A4F;
  --brand-chart-2: #997553;
  --brand-chart-3: #7B8780;
  --brand-chart-4: #193B2C;
  --brand-chart-5: #91468C;
  --brand-chart-6: #466791;

  --brand-font-heading: "Plus Jakarta Sans", Inter, Roboto, "Bai Jamjuree", "Noto Sans Thai", Sarabun, sans-serif;
  --brand-font-body: "Plus Jakarta Sans", Inter, Roboto, "Bai Jamjuree", "Noto Sans Thai", Sarabun, sans-serif;
  --brand-font-mono: "JetBrains Mono", Consolas, "Bai Jamjuree", "Noto Sans Thai", "Sarabun", monospace;
  --brand-size-display: 39px;
  --brand-size-h1: 31.5px;
  --brand-size-h2: 25px;
  --brand-size-h3: 20px;
  --brand-size-body: 16px;
  --brand-size-small: 13px;
  --brand-size-caption: 12px;
  --brand-weight-heading: 700;
  --brand-weight-body: 400;
  --brand-leading-heading: 1.2;
  --brand-leading-body: 1.6;
  --brand-heading-case: none;
  --brand-heading-tracking: normal;

  --brand-radius: 12px;
  --brand-radius-btn: 8px;
  --brand-shadow: 0 1px 2px rgba(27,46,36,0.06), 0 4px 14px rgba(27,46,36,0.08);
  --brand-gap: 16px;
  --brand-gradient: linear-gradient(135deg, #2D6A4F 0%, #5F8E79 100%);

  --ui-bg: #F6F8F3;
  --ui-surface: #FFFFFF;
  --ui-text: #1B2E24;
  --ui-muted: #68756C;
  --ui-line: #D7DCD6;
  --ui-link: #2D6A4F;
  --ui-action: #2D6A4F;
  --ui-on-action: #FFFFFF;
  --ui-action-hover: #275C45;
  --ui-stripe: #F5F8F7;
}

[data-theme="dark"] {
  --ui-bg: #182920;
  --ui-surface: #28372F;
  --ui-text: #F6F8F3;
  --ui-muted: #AFB6AF;
  --ui-line: #3C4A42;
  --ui-link: #8EAFA0;
  --ui-action: #5F8E79;
  --ui-on-action: #0D1B2A;
  --ui-action-hover: #5F8E79;
  --ui-stripe: #182920;
  --ui-success-bg: #28372F;
  --ui-success-text: #81BA96;
  --ui-warning-bg: #28372F;
  --ui-warning-text: #D7A27A;
  --ui-error-bg: #28372F;
  --ui-error-text: #D98484;
  --ui-info-bg: #28372F;
  --ui-info-text: #859FEA;
  --brand-chart-1: #5F8E79;
  --brand-chart-2: #D4A373;
  --brand-chart-3: #DBF1E5;
  --brand-chart-4: #83958D;
  --brand-chart-5: #AB72A8;
  --brand-chart-6: #728BAB;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--brand-font-body);
  font-size: var(--brand-size-body);
  font-weight: var(--brand-weight-body);
  line-height: var(--brand-leading-body);
}
h1, h2, h3 {
  font-family: var(--brand-font-heading);
  font-weight: var(--brand-weight-heading);
  line-height: var(--brand-leading-heading);
  text-transform: var(--brand-heading-case);
  letter-spacing: var(--brand-heading-tracking);
  margin: 0 0 .5em;
}
/* ภาษาไทยไม่มีตัวพิมพ์ใหญ่และไม่เว้นระยะตัวอักษร */
h1:lang(th), h2:lang(th), h3:lang(th) { letter-spacing: normal; }
h1 { font-size: var(--brand-size-h1); }
h2 { font-size: var(--brand-size-h2); }
h3 { font-size: var(--brand-size-h3); }
small, .text-small { font-size: var(--brand-size-small); }
.text-muted { color: var(--ui-muted); }
a { color: var(--ui-link); text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--ui-link); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .6em 1.4em;
  border: 2px solid transparent; border-radius: var(--brand-radius-btn);
  font: inherit; font-weight: var(--brand-weight-heading); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--ui-action); color: var(--ui-on-action); }
.btn-primary:hover { background: var(--ui-action-hover); text-decoration: underline; }
.btn-secondary { background: var(--brand-secondary); color: var(--brand-on-secondary); }
.btn-accent { background: var(--brand-accent); color: var(--brand-on-accent); }
.btn-ghost { background: transparent; color: var(--ui-link); border-color: currentColor; }

.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
  padding: calc(var(--brand-gap) * 1.5);
}

.badge {
  display: inline-block; padding: .2em .7em;
  border-radius: var(--brand-radius-btn);
  font-size: var(--brand-size-small); font-weight: var(--brand-weight-heading);
  background: var(--brand-badge-bg); color: var(--brand-badge-text);
}
.badge-success { background: var(--ui-success-bg); color: var(--ui-success-text); }
.badge-warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.badge-error { background: var(--ui-error-bg); color: var(--ui-error-text); }
.badge-info { background: var(--ui-info-bg); color: var(--ui-info-text); }
[data-theme="dark"] .badge:not(.badge-success, .badge-warning, .badge-error, .badge-info) { background: var(--ui-line); color: var(--ui-text); }

table.brand-table { width: 100%; border-collapse: collapse; background: var(--ui-surface); }
table.brand-table th { background: var(--brand-table-head-bg); color: var(--brand-table-head-text); font-weight: 700; text-align: left; padding: .6em .8em; }
table.brand-table td { padding: .6em .8em; border-bottom: 1px solid var(--ui-line); }
table.brand-table tbody tr:nth-child(even) { background: var(--ui-stripe); }

.kpi-label { margin: 0; font-size: var(--brand-size-small); color: var(--ui-muted); }
.kpi-value { margin: .2em 0; font-family: var(--brand-font-heading); font-size: var(--brand-size-h1); font-weight: var(--brand-weight-heading); line-height: 1.1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}