/* ============================================================
   5ac.vn — Shared Base Styles (Base.v1)
   :root variables, dark mode, element resets.
   Include BEFORE nav.css in all pages.
   ============================================================ */

/* ─── CSS Custom Properties ─────────────────────────── */
:root {
  --ink: #141413; --ink-soft: #2a2a28; --paper: #faf9f5;
  --paper-warm: #f5f2ea; --paper-muted: #efece4;
  --orange: #d97757; --orange-deep: #c65d3a; --orange-light: #f0b89e;
  --blue: #6a9bcc; --blue-deep: #4a7db3; --blue-light: #a6c4e3;
  --green: #788c5d; --green-deep: #5e7247; --green-light: #a8b896;
  --mid-gray: #b0aea5; --light-gray: #e8e6dc; --text-secondary: #6b6a64;
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;
  --sh-sm:0 1px 2px rgba(20,20,19,0.06);--sh-md:0 4px 6px rgba(20,20,19,0.08);
  --sh-lg:0 8px 24px rgba(20,20,19,0.10);--sh-xl:0 12px 40px rgba(20,20,19,0.14);
  --sh-orange:0 4px 12px rgba(217,119,87,0.25);
  --page-max:1200px;--content-max:800px;--nav-height:72px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);--dur:250ms;
}

/* ─── Dark Mode ──────────────────────────────────────── */
[data-theme="dark"] {
  --ink:#e8e6dc;--ink-soft:#c4c2b8;--paper:#1a1a18;--paper-warm:#222220;--paper-muted:#2a2a28;
  --orange:#e88b6a;--orange-deep:#f0a080;--orange-light:#c47a58;
  --blue:#8ab8e0;--blue-deep:#a6cef0;--blue-light:#6088aa;
  --green:#9ab87a;--green-deep:#b0cc90;--green-light:#688a50;
  --mid-gray:#8a887f;--light-gray:#3a3a38;--text-secondary:#9a988f;
  --sh-sm:0 1px 2px rgba(0,0,0,0.3);--sh-md:0 4px 6px rgba(0,0,0,0.4);
  --sh-lg:0 8px 24px rgba(0,0,0,0.5);--sh-xl:0 12px 40px rgba(0,0,0,0.6);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8e6dc;--ink-soft:#c4c2b8;--paper:#1a1a18;--paper-warm:#222220;--paper-muted:#2a2a28;
    --orange:#e88b6a;--orange-deep:#f0a080;--orange-light:#c47a58;
    --blue:#8ab8e0;--blue-deep:#a6cef0;--blue-light:#6088aa;
    --green:#9ab87a;--green-deep:#b0cc90;--green-light:#688a50;
    --mid-gray:#8a887f;--light-gray:#3a3a38;--text-secondary:#9a988f;
  }
}

/* ─── Base Element Resets ────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25;color:var(--ink)}
h1{font-size:2.75rem;letter-spacing:-0.02em}h2{font-size:2rem;margin-top:var(--s12);margin-bottom:var(--s4)}h3{font-size:1.25rem;margin-top:var(--s8);margin-bottom:var(--s3)}
p{margin-bottom:var(--s4)}
a{color:var(--blue);text-decoration:none;transition:color var(--dur) var(--ease-out)}a:hover{color:var(--blue-deep);text-decoration:underline}
img{max-width:100%;height:auto}
code{font-family:var(--font-mono);font-size:0.875rem;background:var(--paper-muted);padding:0.15em 0.4em;border-radius:3px}
::selection{background:var(--orange-light);color:var(--ink)}
ul,ol{padding-left:var(--s6);margin-bottom:var(--s4)}
li{margin-bottom:var(--s2)}
pre{background:var(--paper-muted);padding:16px;border-radius:8px;overflow-x:auto;margin-bottom:16px}
pre code{background:none;padding:0}

/* ─── Article Table Styling ─────────────────────────── */
.article-body table{width:100%;border-collapse:collapse;margin:var(--s6) 0;font-size:0.9375rem;line-height:1.55;overflow-x:auto;display:block}
.article-body table thead{background:var(--paper-warm)}
.article-body table th{font-family:var(--font-heading);font-weight:600;text-align:left;padding:var(--s3) var(--s4);border:1px solid var(--light-gray);color:var(--ink);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.04em}
.article-body table td{padding:var(--s3) var(--s4);border:1px solid var(--light-gray);color:var(--ink-soft);vertical-align:top}
.article-body table tbody tr:nth-child(even){background:var(--paper-warm)}
.article-body table tbody tr:hover{background:var(--paper-muted)}
@media(max-width:600px){
  .article-body table{font-size:0.8125rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-body table th,.article-body table td{padding:var(--s2) var(--s3);white-space:normal;min-width:120px}
}

/* ─── Accessibility ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--orange, #d97757);
  outline-offset: 2px;
  border-radius: var(--r-sm, 4px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─── Dark Section Tokens ─────────────────────────────── */
/* Shared by Hero, CoreFeatures, ValueProps, OpcVision components */
:root {
  --surface-dark: #020617;
  --surface-dark-2: #0f172a;
  --surface-dark-3: #1e293b;
  --text-on-dark: #e2e8f0;
  --text-on-dark-muted: #94a3b8;
  --accent-emerald: #34d399;
  --accent-cyan: #22d3ee;
}

/* ─── Pricing Page Styles ─────────────────────────────── */
.page-hero {
  text-align: center;
  padding: var(--s16, 64px) var(--s6, 24px);
  background: var(--paper-warm, #f5f2ea);
}
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange, #d97757);
  font-weight: 600;
  margin-bottom: var(--s3, 12px);
}
.content-section { padding: var(--s12, 48px) var(--s6, 24px); }
.content-inner { max-width: var(--page-max, 1200px); margin: 0 auto; }
.subtitle { color: var(--text-secondary, #6b6a64); font-size: 1.125rem; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s6, 24px);
  margin: var(--s12, 48px) 0;
}
.price-card {
  background: var(--paper, #faf9f5);
  border: 1px solid var(--light-gray, #e8e6dc);
  border-radius: var(--r-xl, 16px);
  padding: var(--s8, 32px);
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: var(--orange, #d97757);
  box-shadow: var(--sh-orange, 0 4px 12px rgba(217,119,87,0.25));
}
.tier-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #6b6a64);
  margin-bottom: var(--s3, 12px);
}
.price-card h3 { margin-top: 0; font-size: 1.25rem; }
.price-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ink, #141413);
  line-height: 1.1;
  margin: var(--s4, 16px) 0 var(--s1, 4px);
}
.price-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b6a64);
  margin-bottom: var(--s6, 24px);
}
.price-card ul {
  list-style: none;
  padding: 0;
  flex: 1;
}
.price-card li {
  padding: var(--s2, 8px) 0;
  font-size: 0.875rem;
  color: var(--ink-soft, #2a2a28);
  border-bottom: 1px solid var(--light-gray, #e8e6dc);
}
.price-card li:last-child { border-bottom: none; }
.price-cta {
  display: inline-block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: var(--s3, 12px) var(--s6, 24px);
  border-radius: var(--r-full, 9999px);
  text-decoration: none;
  margin-top: var(--s6, 24px);
  transition: all var(--dur, 250ms) var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.price-cta-primary {
  background: var(--orange, #d97757);
  color: var(--paper, #faf9f5);
}
.price-cta-outline {
  border: 1px solid var(--light-gray, #e8e6dc);
  color: var(--ink, #141413);
}
.price-cta-filled {
  background: var(--ink, #141413);
  color: var(--paper, #faf9f5);
}
.price-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md, 0 4px 6px rgba(20,20,19,0.08));
}
.price-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b6a64);
}
.badge {
  position: absolute;
  top: var(--s3, 12px);
  right: var(--s3, 12px);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange, #d97757);
  background: rgba(217,119,87,0.1);
  padding: 2px var(--s2, 8px);
  border-radius: var(--r-full, 9999px);
}