/* ============================================================
   AETB — Carbon Design System (IBM) theme
   Philosophy applied:
   · Neutral gray family dominant; Blue 60 only for action/emphasis, sparingly
   · Layering model (White theme): bg #ffffff → layer #f4f4f4 → hover #e8e8e8
   · Role-based tokens · IBM Plex type · 8px spacing grid · sharp corners
   · Focus = 2px Blue 60 · WCAG contrast via gray steps
   ============================================================ */
:root{
  /* Carbon core tokens (White theme) */
  --cds-background:#ffffff;
  --cds-layer:#f4f4f4;            /* layer-01 */
  --cds-layer-hover:#e8e8e8;      /* half-step hover */
  --cds-layer-selected:#e0e0e0;
  --cds-border-subtle:#e0e0e0;
  --cds-border-strong:#8d8d8d;
  --cds-text-primary:#161616;
  --cds-text-secondary:#525252;
  --cds-text-helper:#6f6f6f;
  --cds-link:#0f62fe;             /* Blue 60 — primary action color */
  --cds-link-hover:#0043ce;       /* Blue 70 */
  --cds-interactive:#0f62fe;
  --cds-focus:#0f62fe;
  --cds-shell:#161616;            /* Gray 100 — high-contrast UI Shell */
  --cds-shell-muted:#c6c6c6;
  --cds-notif-info-bg:#edf5ff;
  --cds-notif-info-border:#0043ce;
  --cds-inverse-bg:#393939;       /* high-contrast notification */
  --cds-tag-blue-bg:#d0e2ff;
  --cds-tag-blue-text:#0043ce;

  /* legacy names used by inline styles in HTML — mapped to Carbon roles */
  --ink:var(--cds-text-primary);
  --ink-soft:var(--cds-text-secondary);
  --muted:var(--cds-text-helper);
  --paper:var(--cds-background);
  --card:var(--cds-layer);
  --line:var(--cds-border-subtle);
  --accent:var(--cds-interactive);
  --accent-soft:var(--cds-notif-info-bg);
  --gold:var(--cds-link-hover);

  --sans:'IBM Plex Sans Thai Looped','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; /* body: looped for long-form readability */
  --display:'IBM Plex Sans Thai','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; /* headings/UI: loopless for modern look */
  --mono:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;
  --serif:var(--sans);

  /* motion — Carbon productive easing */
  --cds-motion:cubic-bezier(.2,0,.38,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cds-background);color:var(--cds-text-primary);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--cds-link);text-decoration:none}
a:hover{color:var(--cds-link-hover);text-decoration:underline}
a:focus-visible{outline:2px solid var(--cds-focus);outline-offset:1px}
.wrap{max-width:1056px;margin:0 auto;padding:0 32px}

/* ---------- UI Shell (Gray 100 high-contrast header) ---------- */
header.site{background:var(--cds-shell)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{color:#ffffff;font-size:14px;font-weight:600;line-height:1.45}
.brand small{display:block;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--cds-shell-muted);margin-top:2px}
nav.top{display:flex}
nav.top a{color:var(--cds-shell-muted);font-size:13px;padding:8px 14px;border-bottom:2px solid transparent;transition:color .11s var(--cds-motion),border-color .11s var(--cds-motion)}
nav.top a:hover{color:#ffffff;border-bottom-color:var(--cds-interactive);text-decoration:none}

/* ---------- Hero (layer-01) ---------- */
.hero{background:var(--cds-layer);border-bottom:1px solid var(--cds-border-subtle);padding:64px 0 56px}
.kicker{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--cds-link);margin-bottom:16px}
h1{font-size:40px;font-weight:300;line-height:1.28;letter-spacing:-.01em;max-width:840px}
.hero p.lead{margin-top:24px;font-size:17px;font-weight:300;line-height:1.75;color:var(--cds-text-secondary);max-width:768px}
.hero .meta{margin-top:24px;font-size:13px;color:var(--cds-text-helper);max-width:768px}

/* badge → Carbon tag (blue) */
.badge{display:inline-block;font-size:12px;color:var(--cds-tag-blue-text);background:var(--cds-tag-blue-bg);border:none;border-radius:24px;padding:2px 12px;margin-bottom:16px}

/* status note → Carbon inline notification (info) */
.status-note{background:var(--cds-notif-info-bg);border:1px solid #b8d3ff;border-left:3px solid var(--cds-notif-info-border);padding:15px 18px;font-size:13.5px;color:var(--cds-text-primary);margin-top:32px;max-width:800px}

/* ---------- Sections ---------- */
section{padding:56px 0;border-bottom:1px solid var(--cds-border-subtle)}
h2{font-size:28px;font-weight:400;line-height:1.3;margin-bottom:8px}
.section-sub{color:var(--cds-text-secondary);font-size:14px;max-width:720px;margin-bottom:32px}
h3{font-size:18px;font-weight:600;line-height:1.4}

/* ---------- Philosophy hierarchy ---------- */
.hierarchy{display:flex;flex-direction:column;align-items:center;margin:8px auto 0;max-width:460px}
.hierarchy .lvl{width:100%;text-align:center;padding:11px 16px;background:var(--cds-background);border-left:3px solid var(--cds-border-subtle);font-size:14px}
.hierarchy .lvl.first{background:var(--cds-interactive);color:#ffffff;border-left-color:var(--cds-interactive);font-weight:600}
.hierarchy .lvl.last{color:var(--cds-text-helper)}
.hierarchy .arrow{color:var(--cds-text-helper);font-size:13px;line-height:1.5;padding:2px 0}
.hnote{max-width:460px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--cds-text-helper)}

/* ---------- Tiles (layer-01, neutral — no decorative color) ---------- */
.grid{display:grid;gap:16px}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.capgroup{background:var(--cds-layer);padding:24px 24px 12px}
.capgroup h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cds-text-secondary);margin-bottom:12px}
.cap{padding:12px 0;border-top:1px solid var(--cds-border-subtle)}
.cap b{display:block;font-size:14px;font-weight:600}
.cap span{font-size:13px;color:var(--cds-text-secondary)}

.tmpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;counter-reset:t}
.tmpl div{background:var(--cds-layer);padding:16px;font-size:13px;min-height:112px}
.tmpl div::before{counter-increment:t;content:counter(t,decimal-leading-zero);display:block;font-family:var(--mono);color:var(--cds-text-helper);font-size:12px;margin-bottom:6px}
.tmpl b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.tmpl span{color:var(--cds-text-secondary)}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:16px}
.principles div{background:var(--cds-layer);padding:14px 16px;font-size:13px}

/* ---------- TOC → clickable tiles (hover = half-step) ---------- */
.toc-item{display:block;background:var(--cds-layer);padding:20px 24px;margin-bottom:8px;color:inherit;transition:background .11s var(--cds-motion)}
.toc-item:hover{background:var(--cds-layer-hover);text-decoration:none;color:inherit}
.toc-item:focus-visible{outline:2px solid var(--cds-focus);outline-offset:-2px}
.toc-item .row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.toc-item .n{font-family:var(--mono);font-size:13px;color:var(--cds-link);min-width:64px}
.toc-item .t{font-size:16px;font-weight:600}
.toc-item .d{margin-left:80px;font-size:13px;color:var(--cds-text-secondary);margin-top:2px}
.toc-item .tag{margin-left:auto;font-size:12px;color:var(--cds-tag-blue-text);background:var(--cds-tag-blue-bg);border-radius:24px;padding:1px 10px;white-space:nowrap}

/* ---------- Chapter cards (layer-02: white on white via border) ---------- */
.chapter{background:var(--cds-background);border:1px solid var(--cds-border-subtle);padding:28px 32px;margin-bottom:16px}
.chapter .cnum{font-family:var(--mono);color:var(--cds-link);font-size:12.5px;margin-bottom:6px}
.chapter h3{margin-bottom:10px;font-size:19px}
.chapter p{font-size:14px;color:var(--cds-text-secondary);max-width:800px;margin-top:4px}
.chapter p+p{margin-top:10px}
.chapter .chsum{font-size:14.5px;color:var(--cds-text-primary);max-width:820px;border-bottom:1px solid var(--cds-border-subtle);padding-bottom:16px;margin-bottom:6px}
.chapter h4{font-size:13px;font-weight:600;color:var(--cds-text-primary);margin:22px 0 6px;padding-left:10px;border-left:3px solid var(--cds-interactive)}
.chapter ul{margin:6px 0 4px 20px;font-size:13.5px;color:var(--cds-text-secondary)}
.chapter li{margin-bottom:6px}

/* ---------- Data table (Carbon) ---------- */
.chapter table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 6px}
.chapter th{text-align:left;padding:11px 14px;background:var(--cds-layer-selected);color:var(--cds-text-primary);font-weight:600}
.chapter td{padding:11px 14px;background:var(--cds-layer);border-bottom:1px solid var(--cds-border-subtle);color:var(--cds-text-secondary);vertical-align:top;transition:background .11s var(--cds-motion)}
.chapter tr:hover td{background:var(--cds-layer-hover)}

/* takeaway → Carbon high-contrast (inverse) notification */
.takeaway{margin-top:22px;padding:15px 18px;background:var(--cds-inverse-bg);border-left:3px solid #4589ff;font-size:13.5px;color:#ffffff}
.takeaway b{color:#ffffff}

/* ---------- Flow → progress indicator ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:16px;counter-reset:s;margin-top:8px}
.flow div{background:var(--cds-layer);padding:14px 16px;font-size:12.5px;border-top:2px solid var(--cds-interactive)}
.flow div::before{counter-increment:s;content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cds-interactive);color:var(--cds-interactive);font-family:var(--mono);font-size:11.5px;margin-bottom:8px}
.flow b{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.flow span{color:var(--cds-text-secondary)}

/* ---------- Pager → ghost buttons ---------- */
.pager{display:flex;justify-content:space-between;gap:16px;padding:40px 0 64px}
.pager a{display:block;background:var(--cds-background);border:1px solid var(--cds-border-subtle);padding:16px 22px;max-width:46%;transition:background .11s var(--cds-motion)}
.pager a:hover{background:var(--cds-layer);text-decoration:none}
.pager a:focus-visible{outline:2px solid var(--cds-focus);outline-offset:-2px}
.pager .dir{font-size:12px;color:var(--cds-text-helper);display:block;margin-bottom:4px}
.pager .pt{font-size:14.5px;font-weight:600;color:var(--cds-link)}

/* ---------- Footer ---------- */
footer.site{background:var(--cds-layer);padding:32px 0 48px;color:var(--cds-text-helper);font-size:12.5px;border-top:1px solid var(--cds-border-subtle)}

@media(max-width:672px){
  h1{font-size:30px}
  h2{font-size:24px}
  .toc-item .d{margin-left:0}
  .pager a{max-width:100%}
  .wrap{padding:0 16px}
}

/* ---------- Hybrid Thai type (per Typotheque 2024 research):
   loopless for headings/labels/UI, looped for paragraph text ---------- */
h1,h2,h3,.kicker,.brand,nav.top a,.badge,.toc-item .t,.toc-item .tag,.pager .dir,.pager .pt,.flow b,.capgroup h3,.hierarchy .lvl,.tmpl b,.chapter h4{font-family:var(--display)}