/* ============================================
   main.css — design tokens, reset, typography
   Modern product-docs aesthetic (Stripe / Linear / Vercel inspired)
   ============================================ */

:root {
  /* ---- Brand accent (Syntech green) — used sparingly, neutral-dominant UI ---- */
  --c-primary:        #0c7a5e;   /* refined pine green */
  --c-primary-dark:   #075a45;
  --c-primary-soft:   #e9f4ef;   /* faint tint for active/hover surfaces */
  --c-accent:         #d4920a;   /* warm amber — secondary accent only */
  --c-accent-soft:    #fbf3dd;

  /* ---- Signature gradient (deep green → teal) — the brand's voice ---- */
  --grad:        linear-gradient(115deg, #0c7a5e 0%, #109b78 45%, #18b39a 100%);
  --grad-soft:   linear-gradient(115deg, #0c7a5e 0%, #1aa17e 100%);
  --c-dot:       #e4e7ec;        /* faint dot-grid colour */

  /* ---- Neutrals (warm-leaning slate, hairline borders) ---- */
  --c-page:           #f6f7f9;   /* page canvas (behind everything) */
  --c-bg:             #ffffff;
  --c-surface:        #f7f8fa;   /* cards, code label, inset panels */
  --c-surface-2:      #eef0f3;
  --c-border:         #e6e8ec;   /* hairline */
  --c-border-strong:  #d3d7de;
  --c-text:           #161a20;   /* near-black, crisp */
  --c-text-soft:      #4d5562;
  --c-muted:          #79808c;

  /* ---- Semantic (calm, low-saturation tints) ---- */
  --c-warning:        #9a5b09;
  --c-warning-bg:     #fdf6e9;
  --c-warning-border: #eab308;
  --c-info:           #1d63d8;
  --c-info-bg:        #eef4fe;
  --c-info-border:    #93b8f5;
  --c-tip:            #0c7a5e;
  --c-tip-bg:         #eaf6f1;
  --c-tip-border:     #5fc6a6;
  --c-danger:         #c0392b;
  --c-danger-bg:      #fdf0ee;
  --c-danger-border:  #f0a99f;

  /* ---- Typography ---- */
  /* Inter carries Latin/numerals; IBM Plex Sans Thai carries Thai glyphs */
  --font-sans:  'Inter', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont,
                'Segoe UI', 'Noto Sans Thai', sans-serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'Cascadia Code',
                Consolas, 'Courier New', monospace;

  /* ---- Radius (slightly rounder, modern) ---- */
  --radius-sm: 6px;
  --radius:    9px;
  --radius-lg: 14px;

  /* ---- Shadows — soft, neutral, layered ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow:    0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.05);

  /* ---- Layout ---- */
  --topbar-h:    62px;
  --sidebar-w:   272px;
  --toc-w:       232px;
  --content-max: 840px;

  /* ---- Code block surface ---- */
  --c-code-bg:        #0f1319;   /* deep neutral, not bluish */
  --c-code-bg-soft:   #1b212b;

  /* ---- Topbar surface ---- */
  --c-topbar-bg:      rgba(255, 255, 255, 0.78);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgba(12, 122, 94, 0.28);
}

/* ---------- Dark mode palette ---------- */
[data-theme="dark"] {
  --c-primary:        #2dd4bf;
  --c-primary-dark:   #5eead4;
  --c-primary-soft:   #11302b;
  --c-accent:         #f5c451;
  --c-accent-soft:    #2e2410;

  --c-bg:             #0c1016;
  --c-surface:        #141a22;
  --c-surface-2:      #1d242e;
  --c-border:         #232b36;
  --c-border-strong:  #36404d;
  --c-text:           #e6e9ee;
  --c-text-soft:      #b3bcc9;
  --c-muted:          #8b95a3;

  --c-warning:        #f5c451;
  --c-warning-bg:     #221c10;
  --c-warning-border: #7a5a18;
  --c-info:           #6fa8fb;
  --c-info-bg:        #111e33;
  --c-info-border:    #294a7a;
  --c-tip:            #34d399;
  --c-tip-bg:         #0c2620;
  --c-tip-border:     #1d6a55;
  --c-danger:         #f4837a;
  --c-danger-bg:      #2a1513;
  --c-danger-border:  #7a322b;

  --c-code-bg:        #0a0d12;
  --c-code-bg-soft:   #161c24;
  --c-page:           #090c11;
  --c-dot:            #1a212b;
  --grad:        linear-gradient(115deg, #2dd4bf 0%, #34d399 100%);
  --grad-soft:   linear-gradient(115deg, #14b8a6 0%, #2dd4bf 100%);

  --c-topbar-bg:      rgba(9, 12, 17, 0.72);

  --ring: 0 0 0 3px rgba(45, 212, 191, 0.30);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:    0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Smooth theme transition */
html { transition: background-color 0.25s ease; }
body, .topbar, .sidebar, .card, table, .callout, pre, .search-modal {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus ring (keyboard) — product-docs polish */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Inline links inside prose — restrained underline */
main p > a,
main li > a,
.faq-body a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-primary) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: text-decoration-color 0.15s, color 0.15s;
}
main p > a:hover,
main li > a:hover,
.faq-body a:hover {
  text-decoration-color: var(--c-primary);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: 16.25px;
  line-height: 1.72;
  color: var(--c-text);
  background-color: var(--c-page);
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: -13px -13px;
  background-attachment: fixed;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.28;
  color: var(--c-text);
  margin: 2rem 0 0.8rem;
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 {
  font-size: 2.2rem;
  margin-top: 0;
  letter-spacing: -0.03em;
  line-height: 1.16;
  font-weight: 800;
}
h2 {
  position: relative;
  font-size: 1.55rem;
  margin-top: 3.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--c-border);
  letter-spacing: -0.02em;
}
/* signature gradient accent segment overlapping the hairline */
h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.75rem;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
}
h3 {
  font-size: 1.18rem;
  margin-top: 2.1rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.012em;
}
h4 { font-size: 1.01rem; color: var(--c-text-soft); }

p { margin: 1rem 0; }
strong { font-weight: 600; color: var(--c-text); }

ul, ol { padding-left: 1.4rem; margin: 1rem 0; }
li { margin: 0.38rem 0; line-height: 1.7; }
li::marker { color: var(--c-border-strong); }

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 3rem 0;
}

blockquote {
  margin: 1.25rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 3px solid var(--c-border-strong);
  color: var(--c-text-soft);
}

.lead {
  font-size: 1.13rem;
  line-height: 1.7;
  color: var(--c-text-soft);
  margin: 0.85rem 0 1.5rem;
  max-width: 66ch;
  font-weight: 400;
}

/* ---------- Utilities ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.text-muted   { color: var(--c-muted); }
.text-center  { text-align: center; }
.mt-0         { margin-top: 0; }
.mb-0         { margin-bottom: 0; }
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.gap-1        { gap: 0.5rem; }
.gap-2        { gap: 1rem; }
.gap-3        { gap: 1.5rem; }

/* ---------- Selection ---------- */
::selection { background: color-mix(in srgb, var(--c-primary) 22%, transparent); color: var(--c-text); }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
::-webkit-scrollbar       { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 8px;
  border: 3px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

@media (max-width: 540px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.28rem; }
  body { font-size: 15.5px; }
}

/* ---------- Seamless page transitions (View Transitions API) ----------
   Progressive enhancement: browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut 0.28s ease both; }
::view-transition-new(root) { animation: vtFadeIn 0.34s ease both; }
@keyframes vtFadeOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtFadeIn  { from { opacity: 0; transform: translateY(8px); } }

/* Theme toggle → circular reveal from the click point */
:root.theme-anim::view-transition-old(root) { animation: none; }
:root.theme-anim::view-transition-new(root) {
  animation: vtReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transform: none;
}
@keyframes vtReveal {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 0)); }
}