/* Product Docs design system
   Foundation tokens shared by the landing page and docs portal. */
:root {
  /* Typography */
  --ds-font-family-base: "Poppins", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-family-heading: var(--ds-font-family-base);
  --ds-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ds-font-size-xs: 12px;
  --ds-font-size-sm: 13px;
  --ds-font-size-md: 15px;
  --ds-font-size-lg: 16px;
  --ds-font-size-xl: 18px;
  --ds-font-size-2xl: 20px;
  --ds-font-size-3xl: 22px;
  --ds-font-size-4xl: 36px;

  /* Brand and semantic color tokens */
  --ds-color-brand-300: #d8c9ff;
  --ds-color-brand-400: #b98ad3;
  --ds-color-brand-500: #903ea0;
  --ds-color-brand-600: #7a3388;
  --ds-color-brand-700: #5f2b69;
  --ds-color-accent-400: #12b4b2;
  --ds-color-accent-500: #02b1b0;
  --ds-color-accent-600: #0b9190;
  --ds-color-action-500: #5f72c7;
  --ds-color-action-600: #4e61b4;
  --ds-color-text-strong: #1f2937;
  --ds-color-text: #374151;
  --ds-color-text-muted: #6b7280;
  --ds-color-text-subtle: #7b879c;
  --ds-color-code-bg: #f9f7e1;
  --ds-color-code-text: #bc5e25;
  --ds-color-border-soft: #e5eaf4;
  --ds-color-border-strong: #d7deea;
  --ds-color-surface-base: #ffffff;
  --ds-color-surface-subtle: #f7f9fd;
  --ds-color-surface-muted: #f3f6fb;
  --ds-color-canvas: #eef3f9;
  --ds-color-canvas-alt: #f8fafc;
  --ds-color-glass: rgba(255, 255, 255, 0.78);
  --ds-color-glass-strong: rgba(249, 246, 255, 0.62);
  --ds-color-brand-tint: rgba(144, 62, 160, 0.08);
  --ds-color-brand-tint-strong: rgba(144, 62, 160, 0.16);
  --ds-color-action-tint: rgba(95, 114, 199, 0.12);
  --ds-color-link: #4059c7;
  --ds-color-link-hover: #903ea0;
  --ds-color-hover-bg: rgba(144, 62, 160, 0.10);
  --ds-color-hover-bg-strong: rgba(144, 62, 160, 0.14);
  --ds-color-hover-border: rgba(144, 62, 160, 0.22);
  --ds-color-hover-text: #5f2b69;
  --ds-color-info: #3b82f6;
  --ds-color-info-bg: #eff6ff;
  --ds-color-warning: #f59e0b;
  --ds-color-warning-bg: #fffbeb;
  --ds-color-danger: #ef4444;
  --ds-color-danger-bg: #fef2f2;
  --ds-color-success: #10b981;
  --ds-color-success-bg: #ecfdf5;
  --ds-color-overlay: rgba(15, 23, 42, 0.14);
  --ds-color-overlay-strong: rgba(15, 23, 42, 0.85);
  --ds-grain-texture-soft: url("../images/grain-soft.svg");
  --ds-grain-texture-strong: url("../images/grain-strong.svg");
  --ds-grain-texture: var(--ds-grain-texture-soft);
  --ds-grain-texture-overlay: var(--ds-grain-texture-strong);
  --ds-grain-size: 180px 180px;
  --ds-grain-header-opacity: 0.22;
  --ds-grain-animation-duration: 14s;
  --ds-icon-document-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23903ea0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.75h7.5L19.25 8.5v11.75a1.5 1.5 0 0 1-1.5 1.5h-10.5a1.5 1.5 0 0 1-1.5-1.5V5.25a1.5 1.5 0 0 1 1.5-1.5Z'/%3E%3Cpath d='M14 3.75v4.5h4.5'/%3E%3C/svg%3E");
  --ds-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.25 4.25'/%3E%3C/svg%3E");
  --ds-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  --ds-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 6-6 6 6 6'/%3E%3C/svg%3E");
  --ds-icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='m21 3-7 7'/%3E%3Cpath d='m3 21 7-7'/%3E%3Cpath d='M9 3H3v6'/%3E%3Cpath d='M15 21h6v-6'/%3E%3Cpath d='m3 3 7 7'/%3E%3Cpath d='m21 21-7-7'/%3E%3C/svg%3E");
  --ds-icon-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9H3V3'/%3E%3Cpath d='M15 9h6V3'/%3E%3Cpath d='M9 15H3v6'/%3E%3Cpath d='M15 15h6v6'/%3E%3Cpath d='m3 3 7 7'/%3E%3Cpath d='m21 3-7 7'/%3E%3Cpath d='m3 21 7-7'/%3E%3Cpath d='m21 21-7-7'/%3E%3C/svg%3E");

  /* Gradients */
  --ds-gradient-hero: linear-gradient(135deg, var(--ds-color-accent-500) 0%, #485fbf 52%, var(--ds-color-brand-500) 100%);
  --ds-gradient-brand: linear-gradient(135deg, var(--ds-color-brand-600) 0%, var(--ds-color-brand-500) 100%);
  --ds-gradient-surface: linear-gradient(180deg, var(--ds-color-canvas-alt) 0%, var(--ds-color-canvas) 100%);

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* Radius */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-2xl: 28px;
  --ds-radius-pill: 999px;

  /* Shadows */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ds-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
  --ds-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg: 0 24px 64px rgba(104, 92, 151, 0.18);
  --ds-shadow-focus: 0 0 0 3px rgba(144, 62, 160, 0.16);
  --ds-shadow-hover-soft: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 10px 22px rgba(144, 62, 160, 0.08);

  /* Scrollbars */
  --ds-scrollbar-track: rgba(255, 255, 255, 0.22);
  --ds-scrollbar-thumb: linear-gradient(180deg, rgba(159, 147, 204, 0.95) 0%, rgba(121, 107, 178, 0.95) 100%);
  --ds-scrollbar-thumb-hover: linear-gradient(180deg, rgba(139, 126, 192, 0.98) 0%, rgba(101, 88, 159, 0.98) 100%);

  /* Backwards-compatible aliases */
  --primary-color: var(--ds-color-brand-500);
  --primary-hover: var(--ds-color-brand-600);
  --text-main: var(--ds-color-text-strong);
  --text-muted: var(--ds-color-text-subtle);
  --header-bg: var(--ds-gradient-hero);
  --card-shadow: var(--ds-shadow-sm);
  --radius-control: var(--ds-radius-md);
  --radius-card: var(--ds-radius-lg);
  --radius-panel: var(--ds-radius-xl);
  --radius-shell: var(--ds-radius-2xl);
  --radius-pill: var(--ds-radius-pill);
  --scrollbar-track: var(--ds-scrollbar-track);
  --scrollbar-thumb: var(--ds-scrollbar-thumb);
  --scrollbar-thumb-hover: var(--ds-scrollbar-thumb-hover);
}

html {
  color-scheme: light;
}

body {
  font-family: var(--ds-font-family-base);
}

:where(button, input, textarea, select) {
  font: inherit;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

::selection {
  background: var(--ds-color-brand-tint-strong);
  color: var(--ds-color-text-strong);
}

.ds-surface-card {
  background: var(--ds-color-surface-base);
  border: 1px solid var(--ds-color-border-soft);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-brand-tint);
  color: var(--ds-color-brand-500);
  font-size: var(--ds-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes dsGrainDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1.12);
  }

  25% {
    transform: translate3d(-2%, -3%, 0) scale(1.16);
  }

  50% {
    transform: translate3d(2%, 2%, 0) scale(1.14);
  }

  75% {
    transform: translate3d(-1%, 3%, 0) scale(1.18);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1.12);
  }
}