/*
 * Digital Solution Foundry design system
 * --------------------------------------
 * Stable tokens and low-specificity primitives for all new site work.
 * Legacy Webflow class names remain in the compatibility stylesheet only;
 * application behavior targets semantic data attributes instead.
 */

:root {
  color-scheme: light;

  /* Brand and interface colours */
  --ds-color-ink: #371400;
  --ds-color-brand: #ff7a00;
  --ds-color-accent: #83cbff;
  --ds-color-surface: #ffffff;
  --ds-color-surface-muted: #f6f6f6;
  --ds-color-surface-blue: #ecf7ff;
  --ds-color-surface-blue-highlight: #fbfdff;
  --ds-color-text-muted: #787878;
  --ds-color-text-subtle: #afafaf;
  --ds-color-border: #dcdcdc;
  --ds-color-border-strong: #b1b1b1;
  --ds-color-error: #ff5a65;
  --ds-color-black: #000000;
  --ds-color-brand-deep: #ff5500;
  --ds-color-brand-shade: rgb(245 117 0 / 96%);
  --ds-color-ink-14: rgb(55 20 0 / 14%);
  --ds-color-ink-16: rgb(55 20 0 / 16%);
  --ds-color-ink-20: rgb(55 20 0 / 20%);
  --ds-color-ink-82: rgb(55 20 0 / 82%);
  --ds-color-black-15: rgb(0 0 0 / 15%);
  --ds-color-black-50: rgb(0 0 0 / 50%);

  /* Type */
  --ds-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-bold: 700;
  --ds-font-size-2xs: 12px;
  --ds-font-size-xs: 14px;
  --ds-font-size-sm: 16px;
  --ds-font-size-body: 18px;
  --ds-font-size-lg: 20px;
  --ds-font-size-xl: 24px;
  --ds-font-size-2xl: 32px;
  --ds-font-size-3xl: 38px;
  --ds-font-size-display-sm: 48px;
  --ds-font-size-display-md: 64px;
  --ds-font-size-display-lg: 72px;
  --ds-font-size-icon: var(--ds-font-size-xl);
  --ds-line-height-body: 1.667;
  --ds-line-height-heading: 1.2;

  /* Spacing: 4px base scale */
  --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-15: 60px;
  --ds-space-18: 74px;
  --ds-space-20: 80px;

  /* Layout */
  --ds-content-max: 1268px;
  --ds-site-gutter: var(--ds-space-10);

  /* Shape, motion and elevation */
  --ds-radius-xs: 5px;
  --ds-radius-sm: 8px;
  --ds-duration-fast: 160ms;
  --ds-duration-normal: 450ms;
  --ds-duration-slow: 600ms;
  --ds-ease-standard: ease;
  --ds-focus-ring: 3px solid var(--ds-color-accent);

  /* Compatibility aliases for established markup. New CSS uses ds-* tokens. */
  --brown: var(--ds-color-ink);
  --orange: var(--ds-color-brand);
  --blue: var(--ds-color-accent);
  --background-blue: var(--ds-color-surface-blue);
  --neutral--100: var(--ds-color-surface);
  --neutral--200: var(--ds-color-surface-muted);
  --neutral--300: var(--ds-color-border);
  --neutral--400: var(--ds-color-border-strong);
  --neutral--500: var(--ds-color-text-subtle);
  --neutral--600: var(--ds-color-text-muted);
  --neutral--800: var(--ds-color-ink);
  --system--300: var(--ds-color-error);
  --site-gutter: var(--ds-site-gutter);
}

@media (max-width: 479px) {
  :root {
    --ds-site-gutter: var(--ds-space-5);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ds-color-surface);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: 3px;
}

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

:where(img, svg, video) {
  max-width: 100%;
}

/* Reusable layout primitives for future sections. */
.ds-container {
  width: min(100%, var(--ds-content-max));
  margin-inline: auto;
  padding-inline: var(--ds-site-gutter);
}

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

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

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ds-grid-min, 260px)), 1fr));
  gap: var(--ds-grid-gap, var(--ds-space-5));
}

.ds-flow > * + * {
  margin-block-start: var(--ds-flow-space, 1em);
}

/* Stable semantic component hooks. Existing classes preserve exact visuals. */
.site-header,
.site-footer,
.site-brand,
.site-navigation,
.site-navigation__links,
.site-navigation__toggle {
  box-sizing: border-box;
}

.site-navigation__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--ds-font-size-icon);
}

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