/*
 * XVM Agency Design System 4.0 — Foundation
 * Global tokens, primitives and accessibility safeguards.
 * Template-specific styling remains in the conditional bundles.
 */

:root {
  color-scheme: light;

  /* Brand and neutral palette. */
  --xvm-color-brand-50: #fff1eb;
  --xvm-color-brand-100: #ffe0d4;
  --xvm-color-brand-500: #fc4c16;
  --xvm-color-brand-600: #df3f10;
  --xvm-color-brand-700: #b8320d;
  --xvm-color-brand-800: #8f2609;
  --xvm-color-ink-950: #050505;
  --xvm-color-ink-900: #0f1115;
  --xvm-color-ink-800: #1f2937;
  --xvm-color-text: #111827;
  --xvm-color-text-soft: #475569;
  --xvm-color-text-muted: #64748b;
  --xvm-color-surface: #ffffff;
  --xvm-color-surface-soft: #f8fafc;
  --xvm-color-surface-muted: #f1f5f9;
  --xvm-color-border: #e2e8f0;
  --xvm-color-border-strong: #cbd5e1;
  --xvm-color-on-dark: #ffffff;
  --xvm-color-on-dark-soft: #e2e8f0;
  --xvm-color-on-brand: #ffffff;

  /* Type scale. Uses the active Flatsome font stack. */
  --xvm-font-family: inherit;
  --xvm-font-size-xs: 0.75rem;
  --xvm-font-size-sm: 0.875rem;
  --xvm-font-size-md: 1rem;
  --xvm-font-size-lg: 1.125rem;
  --xvm-font-size-xl: 1.25rem;
  --xvm-font-size-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --xvm-font-size-3xl: clamp(2rem, 4vw, 3.5rem);
  --xvm-font-size-display: clamp(2.5rem, 6vw, 5.25rem);
  --xvm-line-tight: 1.08;
  --xvm-line-heading: 1.2;
  --xvm-line-body: 1.72;
  --xvm-weight-medium: 600;
  --xvm-weight-semibold: 650;
  --xvm-weight-bold: 700;
  --xvm-weight-heavy: 750;

  /* Spacing and layout. */
  --xvm-space-1: 0.25rem;
  --xvm-space-2: 0.5rem;
  --xvm-space-3: 0.75rem;
  --xvm-space-4: 1rem;
  --xvm-space-5: 1.25rem;
  --xvm-space-6: 1.5rem;
  --xvm-space-8: 2rem;
  --xvm-space-10: 2.5rem;
  --xvm-space-12: 3rem;
  --xvm-space-16: 4rem;
  --xvm-space-20: 5rem;
  --xvm-section-space: clamp(4rem, 8vw, 7rem);
  --xvm-container-reading: 750px;
  --xvm-container-content: 900px;
  --xvm-container-wide: 1180px;
  --xvm-container-max: 1280px;
  --xvm-gutter: clamp(14px, 3vw, 24px);
  --xvm-stack-space: var(--xvm-space-6);
  --xvm-cluster-space: var(--xvm-space-3);
  --xvm-grid-gap: var(--xvm-space-6);

  /* Shape, depth and motion. */
  --xvm-radius-sm: 8px;
  --xvm-radius-md: 12px;
  --xvm-radius-lg: 18px;
  --xvm-radius-xl: 28px;
  --xvm-radius-pill: 999px;
  --xvm-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --xvm-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);
  --xvm-shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.16);
  --xvm-shadow-brand: 0 16px 38px rgba(184, 50, 13, 0.25);
  --xvm-duration-fast: 160ms;
  --xvm-duration-normal: 240ms;
  --xvm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --xvm-focus-color: #0b57d0;
  --xvm-focus-ring: 3px solid var(--xvm-focus-color);

  /* Backward-compatible aliases used by content and template bundles. */
  --xvm-black: var(--xvm-color-ink-950);
  --xvm-black-soft: var(--xvm-color-ink-900);
  --xvm-charcoal: var(--xvm-color-ink-800);
  --xvm-primary: var(--xvm-color-ink-950);
  --xvm-accent: var(--xvm-color-brand-700);
  --xvm-accent-hover: var(--xvm-color-brand-800);
  --xvm-accent-dark: var(--xvm-color-brand-700);
  --xvm-accent-soft: var(--xvm-color-brand-50);
  --xvm-accent-light: var(--xvm-color-brand-500);
  --xvm-text-main: var(--xvm-color-text);
  --xvm-text-body: var(--xvm-color-text-soft);
  --xvm-text-muted: var(--xvm-color-text-muted);
  --xvm-text-light: var(--xvm-color-on-dark);
  --xvm-bg-white: var(--xvm-color-surface);
  --xvm-bg-light: var(--xvm-color-surface-soft);
  --xvm-bg-soft: var(--xvm-color-surface-muted);
  --xvm-bg-dark: var(--xvm-color-ink-950);
  --xvm-border: var(--xvm-color-border);
  --xvm-border-strong: var(--xvm-color-border-strong);
  --xvm-border-dark: rgba(255, 255, 255, 0.14);
  --space-sm: var(--xvm-space-3);
  --space-md: var(--xvm-space-4);
  --space-lg: var(--xvm-space-6);
  --space-xl: var(--xvm-space-8);
  --radius-md: var(--xvm-radius-md);
  --radius-lg: var(--xvm-radius-lg);
  --radius-xl: var(--xvm-radius-xl);
  --radius-pill: var(--xvm-radius-pill);
  --shadow-sm: var(--xvm-shadow-sm);
  --shadow-md: var(--xvm-shadow-md);
  --shadow-lg: var(--xvm-shadow-lg);
  --shadow-accent: var(--xvm-shadow-brand);
  --transition-fast: var(--xvm-duration-fast) var(--xvm-ease-standard);
  --transition-normal: var(--xvm-duration-normal) var(--xvm-ease-standard);
  --container-md: var(--xvm-container-content);
  --container-lg: var(--xvm-container-wide);
  --container-xl: var(--xvm-container-max);

  /* Home, Service and sticky-header aliases. */
  --xvmh-black: var(--xvm-color-ink-950);
  --xvmh-orange: var(--xvm-color-brand-500);
  --xvmh-orange-2: #ff7a1a;
  --xvmh-orange-dark: var(--xvm-color-brand-700);
  --xvmh-cream: #fff7ef;
  --xvmh-white: var(--xvm-color-surface);
  --xvmh-shadow-orange: var(--xvm-shadow-brand);
  --xvmh-shadow-dark: 0 28px 80px rgba(0, 0, 0, 0.18);
  --xvmh-container: var(--xvm-container-wide);
  --xvm-sticky-header-height: 70px;
  --xvm-sticky-logo-height: 50px;
  --xvm-sticky-bg: var(--xvm-color-surface);
  --xvm-sticky-bg-2: var(--xvm-color-surface);
  --xvm-sticky-border: rgba(15, 23, 42, 0.12);
  --xvm-sticky-text: var(--xvm-color-text);
  --xvm-sticky-text-strong: var(--xvm-color-ink-950);
  --xvm-sticky-muted: var(--xvm-color-text-muted);
  --xvm-sticky-accent: var(--xvm-color-brand-700);
  --xvm-sticky-accent-hover: var(--xvm-color-brand-800);
  --xvm-sticky-dropdown-bg: var(--xvm-color-surface);
  --xvm-sticky-dropdown-text: var(--xvm-color-text);
  --xvm-sticky-dropdown-hover-bg: var(--xvm-color-brand-50);
  --xvm-sticky-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--xvm-sticky-header-height) + var(--xvm-space-4));
}

body.xvm-design-system {
  color: var(--xvm-color-text-soft);
  font-family: var(--xvm-font-family);
  text-rendering: optimizeLegibility;
}

body.xvm-design-system :is(button, input, textarea, select) {
  font: inherit;
}

body.xvm-design-system iframe {
  border: 0;
}

:is(
  .xvm-page-container,
  .seo-chanh-niem-container,
  .xuyenviet-agency-container,
  .xv-container,
  .xv-guest-post-container,
  .xvm-home-section,
  .xvm-service-premium,
  .xvms-service-page,
  .xvm-blog-article,
  .xvm-project-content,
  .single-post .entry-content
) :is(img, svg, video, canvas, iframe) {
  max-width: 100%;
}

:is(
  .xvm-page-container,
  .seo-chanh-niem-container,
  .xuyenviet-agency-container,
  .xv-container,
  .xv-guest-post-container,
  .xvm-home-section,
  .xvm-service-premium,
  .xvms-service-page,
  .xvm-blog-article,
  .xvm-project-content,
  .single-post .entry-content
) img {
  height: auto;
}

body.xvm-design-system :is(a, button, input, textarea, select, summary):focus-visible {
  outline: var(--xvm-focus-ring);
  outline-offset: 3px;
}

body.xvm-design-system :is(a, button) {
  text-underline-offset: 0.16em;
}

/* Layout primitives. */
.xvm-ds-container {
  width: min(calc(100% - (2 * var(--xvm-gutter))), var(--xvm-container-wide));
  margin-inline: auto;
}

.xvm-ds-container.is-reading {
  max-width: var(--xvm-container-reading);
}

.xvm-ds-section {
  padding-block: var(--xvm-section-space);
}

.xvm-ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xvm-stack-space, var(--xvm-space-6));
}

.xvm-ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xvm-cluster-space, var(--xvm-space-3));
}

.xvm-ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--xvm-grid-columns, 3), minmax(0, 1fr));
  gap: var(--xvm-grid-gap, var(--xvm-space-6));
}

/* Typography primitives. */
.xvm-ds-kicker {
  margin: 0 0 var(--xvm-space-3);
  color: var(--xvm-color-brand-700);
  font-size: var(--xvm-font-size-xs);
  font-weight: var(--xvm-weight-heavy);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.xvm-ds-display,
.xvm-ds-heading {
  margin-top: 0;
  color: var(--xvm-color-text);
  font-weight: var(--xvm-weight-bold);
  text-wrap: balance;
}

.xvm-ds-display {
  font-size: var(--xvm-font-size-display);
  line-height: var(--xvm-line-tight);
  letter-spacing: -0.045em;
}

.xvm-ds-heading {
  font-size: var(--xvm-font-size-3xl);
  line-height: var(--xvm-line-heading);
  letter-spacing: -0.035em;
}

.xvm-ds-lead {
  max-width: 48rem;
  color: var(--xvm-color-text-soft);
  font-size: var(--xvm-font-size-lg);
  line-height: var(--xvm-line-body);
}

/* Reusable components. */
.xvm-ds-card {
  border: 1px solid var(--xvm-color-border);
  border-radius: var(--xvm-radius-xl);
  background: var(--xvm-color-surface);
  box-shadow: var(--xvm-shadow-sm);
}

.xvm-ds-card.is-dark {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--xvm-color-ink-900);
  color: var(--xvm-color-on-dark);
}

.xvm-ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xvm-space-2);
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--xvm-radius-pill);
  font-size: var(--xvm-font-size-sm);
  font-weight: var(--xvm-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--xvm-duration-fast) var(--xvm-ease-standard),
    background-color var(--xvm-duration-fast) var(--xvm-ease-standard),
    border-color var(--xvm-duration-fast) var(--xvm-ease-standard),
    color var(--xvm-duration-fast) var(--xvm-ease-standard),
    box-shadow var(--xvm-duration-fast) var(--xvm-ease-standard);
}

.xvm-ds-button.is-primary {
  border-color: var(--xvm-color-brand-700);
  background: var(--xvm-color-brand-700);
  color: var(--xvm-color-on-brand);
  box-shadow: var(--xvm-shadow-brand);
}

.xvm-ds-button.is-primary:hover {
  border-color: var(--xvm-color-brand-800);
  background: var(--xvm-color-brand-800);
  color: var(--xvm-color-on-brand);
  transform: translateY(-2px);
}

.xvm-ds-button.is-dark {
  border-color: var(--xvm-color-ink-950);
  background: var(--xvm-color-ink-950);
  color: var(--xvm-color-on-dark);
}

.xvm-ds-button.is-outline {
  border-color: var(--xvm-color-border-strong);
  background: transparent;
  color: var(--xvm-color-text);
}

.xvm-ds-button.is-outline:hover {
  border-color: var(--xvm-color-brand-700);
  color: var(--xvm-color-brand-700);
}

.xvm-ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--xvm-space-2);
  min-height: 32px;
  padding: 0.35rem 0.75rem;
  border: 1px solid #ffd2c2;
  border-radius: var(--xvm-radius-pill);
  background: var(--xvm-color-brand-50);
  color: var(--xvm-color-brand-700);
  font-size: var(--xvm-font-size-xs);
  font-weight: var(--xvm-weight-bold);
  line-height: 1.3;
}

.xvm-ds-divider {
  height: 1px;
  border: 0;
  background: var(--xvm-color-border);
}

.xvm-ds-surface-soft {
  background: var(--xvm-color-surface-soft);
}

.xvm-ds-surface-dark {
  background:
    radial-gradient(circle at 12% 12%, rgba(252, 76, 22, 0.16), transparent 34%),
    linear-gradient(135deg, var(--xvm-color-ink-950), var(--xvm-color-ink-900));
  color: var(--xvm-color-on-dark);
}

@media (max-width: 849px) {
  .xvm-ds-grid {
    --xvm-grid-columns: 2;
  }
}

@media (max-width: 549px) {
  .xvm-ds-grid {
    --xvm-grid-columns: 1;
  }

  .xvm-ds-button {
    width: 100%;
    border-radius: var(--xvm-radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.xvm-design-system *,
  body.xvm-design-system *::before,
  body.xvm-design-system *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .xvm-ds-button:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .xvm-ds-button,
  .xvm-ds-card,
  .xvm-ds-badge {
    border: 1px solid CanvasText;
  }
}

@media print {
  .xvm-design-system .header-wrapper,
  .xvm-design-system #footer,
  .xvm-design-system .xvm-home-actions,
  .xvm-design-system .xvms-actions,
  .xvm-design-system .xvm-project-cta,
  .xvm-design-system .xvm-portfolio-cta {
    display: none !important;
  }

  .xvm-design-system :is(a[href])::after {
    content: none;
  }
}

/* Shared breadcrumb primitive used by Service, Category and Author templates. */
.xvms-breadcrumb {
  margin: 0;
  padding: 14px 16px;
  background: #0b0b0d;
  color: rgba(255, 255, 255, 0.76);
}

.xvms-breadcrumb p {
  margin: 0;
}