/* aitytech.com shared styles: theme tokens (light + dark), the shared nav/footer, and
   theme mapping for the Tailwind utility classes the pages already use.
   Loaded by every page (home, legal, 404, Astro blog) after the page's own CSS.
   Theme switch: <html data-theme="light|dark"> (set before paint by the inline head script,
   toggled by js/site-chrome.js, stored in localStorage "theme").
   <html data-base="dark"> = hand-written pages built dark-first (Tailwind classes text-white,
   bg-dark-*); data-base="light" = Astro blog built light-first (text-gray-*, bg-white).
   Contrast (WCAG AA 4.5:1 text, 3:1 large) is measured in both themes by scripts/contrast-check.js. */

/* Self-hosted fonts (Google Fonts, SIL OFL 1.1): DM Sans + Space Grotesk, variable weight files.
   Replaces the render-dependent fonts.googleapis.com request (font swap shifted the hero text). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/dmsans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/dmsans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/spacegrotesk-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/spacegrotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/spacegrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched fallbacks (size-adjust computed from the font files vs Arial): the swap to the
   web font no longer re-wraps headings (it caused CLS 0.12-0.15 on the home page). */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 104.3%; ascent-override: 95.1%; descent-override: 29.7%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 109.5%; ascent-override: 89.9%; descent-override: 26.7%; line-gap-override: 0%; }
body { font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6, .font-heading, .sc-brand-name, .sc-fname { font-family: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif; }

/* ---------- tokens ---------- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0a0a0a;
  --c-bg-alt: #121212;
  --c-card: #1a1a1a;
  --c-card-2: #242424;
  --c-card-3: #2f2f2f;
  --c-pop: #1a1a1a;
  --c-ink: #ffffff;
  --c-ink-2: #d1d5db;
  --c-ink-3: #9ca3af;
  --c-ink-4: #9ca3af;
  --c-link: #a78bfa;
  --c-link-hover: #c4b5fd;
  --c-blue: #60a5fa;
  --c-cyan: #22d3ee;
  --c-amber: #fbbf24;
  --c-red: #f87171;
  --c-line: rgba(255, 255, 255, 0.1);
  --c-line-soft: rgba(255, 255, 255, 0.05);
  --c-line-strong: rgba(255, 255, 255, 0.16);
  --c-tint: rgba(124, 58, 237, 0.18);
  --c-nav-bg: rgba(10, 10, 10, 0.85);
  --c-code-bg: #1f2430;
  --c-code-ink: #f9a8d4;
  --c-focus: #a78bfa;
  --c-shadow: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"],
html[data-base="light"]:not([data-theme]) {
  color-scheme: light;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f6f8;
  --c-card: #eef0f4;
  --c-card-2: #e3e6ec;
  --c-card-3: #d5d9e1;
  --c-pop: #ffffff;
  --c-ink: #0f172a;
  --c-ink-2: #334155;
  --c-ink-3: #475569;
  --c-ink-4: #5b6577;
  --c-link: #6d28d9;
  --c-link-hover: #5b21b6;
  --c-blue: #1d4ed8;
  --c-cyan: #0b657c;
  --c-amber: #92400e;
  --c-red: #b91c1c;
  --c-line: rgba(15, 23, 42, 0.14);
  --c-line-soft: rgba(15, 23, 42, 0.08);
  --c-line-strong: rgba(15, 23, 42, 0.22);
  --c-tint: rgba(124, 58, 237, 0.1);
  --c-nav-bg: rgba(255, 255, 255, 0.88);
  --c-code-bg: #f3f4f6;
  --c-code-ink: #b4235a;
  --c-focus: #6d28d9;
  --c-shadow: rgba(15, 23, 42, 0.12);
}

body { background-color: var(--c-bg); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Brand gradient: white text sits on it (buttons), so it stops at the blue (white on cyan = 2.4:1). */
.gradient-bg { background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); }
html[data-theme="light"] .gradient-text,
html[data-base="light"]:not([data-theme]) .gradient-text {
  background: linear-gradient(135deg, #6d28d9 0%, #1d4ed8 55%, #0e7490 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gradient-border { background: var(--c-bg-alt); }
html[data-theme="light"] .gradient-orb { opacity: 0.14; }
html[data-theme="light"] .scroll-progress { opacity: 0.9; }

/* visually hidden, still read by screen readers */
.sc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- shared chrome: nav ---------- */
.sc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--c-nav-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line);
  font-family: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--c-ink-2); }
.sc-nav .hidden, .sc-footer .hidden { display: none !important; }
.sc-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .sc-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sc-wrap { padding: 0 2rem; } }
.sc-bar { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 0.75rem; }
.sc-nav a { text-decoration: none; }
.sc-brand { display: flex; align-items: center; gap: 0.5rem; color: var(--c-ink); flex-shrink: 0; }
.sc-logo { width: 2rem; height: 2rem; border-radius: 0.5rem; flex-shrink: 0; }
.sc-brand-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1; }
.sc-links { display: none; align-items: center; gap: 1.5rem; }
.sc-link { font-size: 0.875rem; font-weight: 500; color: var(--c-ink-2); white-space: nowrap; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.sc-link:hover { color: var(--c-ink); }
.sc-link[aria-current="page"] { color: var(--c-link); border-bottom-color: var(--c-link); }
.sc-tools { display: flex; align-items: center; gap: 0.25rem; position: relative; }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.75rem; height: 2.75rem;
  padding: 0 0.5rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--c-ink-2); cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 500; }
.sc-btn:hover { color: var(--c-ink); background: var(--c-line-soft); }
.sc-i { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sc-lang-btn .sc-chev { width: 0.875rem; height: 0.875rem; }
.sc-lang { position: relative; }
.sc-menu { position: absolute; right: 0; top: calc(100% + 0.25rem); min-width: 10rem; padding: 0.25rem 0;
  background: var(--c-pop); border: 1px solid var(--c-line-strong); border-radius: 0.5rem; box-shadow: 0 10px 25px var(--c-shadow); z-index: 60; }
.sc-menu-item { display: block; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--c-ink-2); }
.sc-menu-item:hover { background: var(--c-line-soft); color: var(--c-ink); }
.sc-menu-item[aria-current="true"], .sc-mlang[aria-current="true"] { color: var(--c-link); font-weight: 600; }
/* theme toggle: dark shows the sun (switch to light), light shows the moon */
.sc-theme .sc-moon { display: none; }
html[data-theme="light"] .sc-theme .sc-sun { display: none; }
html[data-theme="light"] .sc-theme .sc-moon { display: block; }
.sc-cta { display: none; align-items: center; margin-left: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem;
  font-weight: 600; color: #fff; background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); white-space: nowrap; }
.sc-cta:hover { opacity: 0.9; }
.sc-cta-block { display: block; text-align: center; margin: 0.75rem 0 0; padding: 0.75rem 1rem; }
.sc-burger .sc-close { display: none; }
.sc-burger[aria-expanded="true"] .sc-open { display: none; }
.sc-burger[aria-expanded="true"] .sc-close { display: block; }
.sc-mobile { border-top: 1px solid var(--c-line); max-height: calc(100vh - 4rem); overflow-y: auto; padding-bottom: 1rem; }
.sc-mlink { display: block; padding: 0.75rem 0; font-size: 1rem; font-weight: 500; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line-soft); }
.sc-mlink[aria-current="page"] { color: var(--c-link); }
.sc-mlangs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; }
.sc-mlang { padding: 0.5rem 0.875rem; border: 1px solid var(--c-line-strong); border-radius: 0.5rem; font-size: 0.875rem; color: var(--c-ink-2); }
@media (min-width: 1100px) {
  .sc-links { display: flex; }
  .sc-cta { display: inline-flex; }
  .sc-burger { display: none; }
  .sc-mobile { display: none !important; }
}
/* pages have a fixed 4rem bar: keep in-page anchors from hiding under it */
html { scroll-padding-top: 5rem; }

/* ---------- shared chrome: footer ---------- */
.sc-footer { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); color: var(--c-ink-3); padding: 3rem 0 2rem;
  font-family: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.875rem; }
.sc-fgrid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 768px) { .sc-fgrid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.sc-fname { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--c-ink); margin: 0 0 0.5rem; }
.sc-ftag { margin: 0; }
.sc-fh { font-size: 0.875rem; font-weight: 700; color: var(--c-ink); margin: 0 0 1rem; font-family: inherit; }
.sc-footer ul { list-style: none; margin: 0; padding: 0; }
.sc-footer li { margin-bottom: 0.5rem; }
.sc-footer a { color: var(--c-ink-3); text-decoration: none; }
.sc-footer a:hover { color: var(--c-ink); text-decoration: underline; }
.sc-fbottom { border-top: 1px solid var(--c-line); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.sc-fbottom p { margin: 0; }
.sc-socials { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sc-social { display: inline-flex; padding: 0.25rem; }
@media (min-width: 768px) { .sc-fbottom { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------- Tailwind class mapping: hand-written pages (data-base="dark") ---------- */
html[data-base="dark"] .bg-dark-900 { background-color: var(--c-bg); }
html[data-base="dark"] .bg-dark-800 { background-color: var(--c-bg-alt); }
html[data-base="dark"] .bg-dark-700 { background-color: var(--c-card); }
html[data-base="dark"] .bg-dark-600 { background-color: var(--c-card-2); }
html[data-base="dark"] .bg-dark-500 { background-color: var(--c-card-3); }
html[data-base="dark"] .hover\:bg-dark-700:hover { background-color: var(--c-card); }
html[data-base="dark"] .hover\:bg-dark-600:hover { background-color: var(--c-card-2); }
html[data-base="dark"] .hover\:bg-dark-500:hover { background-color: var(--c-card-3); }
html[data-base="dark"] .text-white,
html[data-base="dark"] .text-gray-200,
html[data-base="dark"] .hover\:text-white:hover { color: var(--c-ink); }
html[data-base="dark"] .text-gray-300 { color: var(--c-ink-2); }
html[data-base="dark"] .text-gray-400 { color: var(--c-ink-3); }
html[data-base="dark"] .text-gray-500 { color: var(--c-ink-4); }
html[data-base="dark"] .text-dark-600 { color: var(--c-ink-4); }
html[data-base="dark"] .text-primary-purple,
html[data-base="dark"] .text-purple-primary,
html[data-base="dark"] .text-purple-300,
html[data-base="dark"] .hover\:text-primary-purple:hover,
html[data-base="dark"] .hover\:text-purple-primary:hover,
html[data-base="dark"] .hover\:text-purple-400:hover { color: var(--c-link); }
html[data-base="dark"] .text-primary-blue,
html[data-base="dark"] .hover\:text-primary-blue:hover { color: var(--c-blue); }
html[data-base="dark"] .text-primary-cyan,
html[data-base="dark"] .hover\:text-primary-cyan:hover { color: var(--c-cyan); }
html[data-base="dark"] .text-amber-400 { color: var(--c-amber); }
html[data-base="dark"] .text-red-400 { color: var(--c-red); }
html[data-base="dark"] .border-white\/10,
html[data-base="dark"] .border-dark-700 { border-color: var(--c-line); }
html[data-base="dark"] .border-white\/5 { border-color: var(--c-line-soft); }
html[data-base="dark"] .border-dark-600 { border-color: var(--c-line-strong); }
/* tinted badges: 20% brand tint is too strong on a light page (text on it falls under 4.5:1) */
html[data-base="dark"][data-theme="light"] .bg-primary-purple\/20 { background-color: rgba(124, 58, 237, 0.1); }
html[data-base="dark"][data-theme="light"] .bg-primary-blue\/20 { background-color: rgba(37, 99, 235, 0.08); }
html[data-base="dark"][data-theme="light"] .bg-primary-cyan\/20 { background-color: rgba(6, 182, 212, 0.1); }
html[data-base="dark"][data-theme="light"] .bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.12); }
html[data-base="dark"][data-theme="light"] .hover\:bg-primary-purple\/20:hover { background-color: rgba(124, 58, 237, 0.16); }
html[data-base="dark"][data-theme="light"] .hover\:bg-primary-blue\/20:hover { background-color: rgba(37, 99, 235, 0.14); }
html[data-base="dark"][data-theme="light"] .hover\:bg-primary-cyan\/20:hover { background-color: rgba(6, 182, 212, 0.16); }
/* text that sits on a solid brand fill stays white in both themes */
html[data-base="dark"] .gradient-bg,
html[data-base="dark"] .bg-primary-purple,
html[data-base="dark"] .bg-purple-primary,
html[data-base="dark"] .hover\:bg-purple-600:hover { color: #fff; }
.bg-purple-primary { background-color: #7c3aed; }
.hover\:bg-purple-600:hover { background-color: #6d28d9; }

/* ---------- Tailwind class mapping: Astro blog (data-base="light") ---------- */
html[data-base="light"] body.bg-white,
html[data-base="light"] .bg-white { background-color: var(--c-bg); }
html[data-base="light"] .bg-gray-50 { background-color: var(--c-bg-alt); }
html[data-base="light"] .bg-gray-100 { background-color: var(--c-card); }
html[data-base="light"] .hover\:bg-gray-50:hover { background-color: var(--c-bg-alt); }
html[data-base="light"] .hover\:bg-gray-100:hover { background-color: var(--c-card); }
html[data-base="light"] .hover\:bg-gray-200:hover { background-color: var(--c-card-2); }
html[data-base="light"] .bg-purple-50,
html[data-base="light"] .hover\:bg-purple-50:hover { background-color: var(--c-tint); }
html[data-base="light"] .text-gray-900,
html[data-base="light"] .text-gray-800 { color: var(--c-ink); }
html[data-base="light"] .text-gray-700 { color: var(--c-ink-2); }
html[data-base="light"] .text-gray-600 { color: var(--c-ink-3); }
html[data-base="light"] .text-gray-500,
html[data-base="light"] .text-gray-400 { color: var(--c-ink-4); }
html[data-base="light"] .text-\[\#7C3AED\],
html[data-base="light"] .hover\:text-\[\#7C3AED\]:hover,
html[data-base="light"] .group:hover .group-hover\:text-\[\#7C3AED\] { color: var(--c-link); }
html[data-base="light"] .border-gray-100 { border-color: var(--c-line-soft); }
html[data-base="light"] .border-gray-200 { border-color: var(--c-line); }
html[data-base="light"] .bg-gray-300 { background-color: var(--c-card-3); }
/* solid purple pills / buttons keep white text */
html[data-base="light"] .bg-\[\#7C3AED\] { background-color: #6d28d9; color: #fff; }
html[data-base="light"] .group:hover .group-hover\:bg-\[\#7C3AED\] { background-color: #6d28d9; }
html[data-base="light"] .group:hover .group-hover\:text-white { color: #fff; }
/* CTA banner: always a brand-gradient block, the button inside is white with purple text */
.cta-banner { background: linear-gradient(135deg, #6d28d9 0%, #1d4ed8 100%); }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #f3e8ff; }
.cta-banner .cta-btn { background: #fff; color: #5b21b6; }
.cta-banner .cta-btn:hover { background: #f3f4f6; }

/* trailing arrow on link labels (replaces the "→" character; i18n swaps textContent, so it is CSS) */
.sc-arrow::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.375rem; vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }