/*
 * Assemblinators Design System
 *
 * Global tokens and reusable primitives live here.
 * Existing styles keep working through the legacy alias layer.
 */
:root {
  /* Typography */
  --ds-font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-display: 'Montserrat Alternates', var(--ds-font-sans);
  --ds-font-condensed: 'Roboto Condensed', var(--ds-font-sans);

  /* Neutral + semantic colors */
  --ds-color-neutral-0: #ffffff;
  --ds-color-neutral-50: #f8f9fa;
  --ds-color-neutral-100: #f3f4f6;
  --ds-color-neutral-200: #e5e7eb;
  --ds-color-neutral-300: #d1d5db;
  --ds-color-neutral-500: #6b7280;
  --ds-color-neutral-700: #374151;
  --ds-color-neutral-900: #111827;

  --ds-color-text-default: #2c3e50;
  --ds-color-text-muted: #6b7280;
  --ds-color-primary-500: #2a2a2a;
  --ds-color-primary-600: #1f1f1f;
  --ds-color-primary-700: #2d4a3e;
  --ds-color-accent-500: #c27455;
  --ds-color-accent-600: #b06545;

  --ds-color-support-success-500: #7fa87a;
  --ds-color-support-success-700: #2d4a3e;
  --ds-color-support-success-bg: #d4edda;
  --ds-color-support-success-fg: #155724;
  --ds-color-support-warning-bg: #fff3cd;
  --ds-color-support-warning-fg: #856404;
  --ds-color-support-danger-bg: #fee2e2;
  --ds-color-support-danger-fg: #991b1b;

  --ds-color-surface-default: #ffffff;
  --ds-color-surface-muted: #f9fafb;
  --ds-color-border-subtle: #e5e7eb;

  /* Reviews semantic tokens */
  --ds-color-review-primary: #234132;
  --ds-color-review-secondary: #6b6f6b;
  --ds-color-review-tertiary: #a5a5a5;
  --ds-color-review-sage: #6a8f64;
  --ds-color-review-sage-soft: #eef4ec;
  --ds-color-review-coral: #e47d59;
  --ds-color-review-coral-light: #f4a484;
  --ds-color-review-star-gold: #f7a928;
  --ds-color-review-star-track: #e5e5e5;
  --ds-color-review-bg: #fafaf7;
  --ds-color-review-card-bg: #ffffff;
  --ds-color-review-search-bg: #f3f5f0;

  /* Spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;

  /* Radius scale */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-2xl: 1.5rem;
  --ds-radius-pill: 999px;

  /* Elevation */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ds-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
  --ds-shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.12);

  /* Motion */
  --ds-duration-fast: 120ms;
  --ds-duration-normal: 200ms;
  --ds-ease-standard: ease;

  /* Layout */
  --ds-size-container-max: 1500px;
  --ds-size-reading-max: 40rem;

  /* Legacy alias layer for current codebase */
  --brand-green: var(--ds-color-primary-500);
  --brand-green-dark: var(--ds-color-primary-700);
  --brand-green-light: var(--ds-color-primary-500);
  --brand-graphite: var(--ds-color-primary-500);
  --brand-background: var(--ds-color-neutral-0);
  --brand-text: var(--ds-color-text-default);
  --brand-accent: var(--ds-color-accent-500);
  --font-family-brand: var(--ds-font-sans);
  --shadow-sm: var(--ds-shadow-sm);
  --shadow-md: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);
  --radius-md: var(--ds-radius-lg);
  --radius-lg: var(--ds-radius-2xl);

  --reviews-primary: var(--ds-color-review-primary);
  --reviews-secondary: var(--ds-color-review-secondary);
  --reviews-tertiary: var(--ds-color-review-tertiary);
  --reviews-sage: var(--ds-color-review-sage);
  --reviews-sage-soft: var(--ds-color-review-sage-soft);
  --reviews-coral: var(--ds-color-review-coral);
  --reviews-coral-light: var(--ds-color-review-coral-light);
  --reviews-star-gold: var(--ds-color-review-star-gold);
  --reviews-star-track: var(--ds-color-review-star-track);
  --reviews-bg: var(--ds-color-review-bg);
  --reviews-card-bg: var(--ds-color-review-card-bg);
  --reviews-search-bg: var(--ds-color-review-search-bg);

  --header-height-mobile: 56px;
  --search-height-mobile: 48px;
  --category-nav-height: 52px;
  --drawer-width: 320px;
}

/* Base element defaults used by all pages */
body {
  font-family: var(--font-family-brand);
  color: var(--brand-text);
  background-color: var(--brand-background);
}

:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 2px;
}

/* Layout primitives */
.ds-container {
  width: min(calc(100% - 3rem), var(--ds-size-container-max));
  margin-inline: auto;
}

.ds-page-shell {
  min-height: calc(100vh - 200px);
  padding: var(--ds-space-8) var(--ds-space-4);
}

.ds-page-shell--centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.ds-inline-actions {
  display: flex;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.ds-card {
  background: var(--ds-color-surface-default);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-8);
}

.ds-card--interactive {
  cursor: pointer;
  transition: transform var(--ds-duration-normal) var(--ds-ease-standard),
    box-shadow var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds-card--build,
.ds-card--product {
  background: var(--ds-color-surface-default);
}

.ds-surface-muted {
  background: var(--ds-color-surface-muted);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-lg);
}

/* Typography primitives */
.ds-heading-xl {
  font-size: clamp(1.75rem, 4vw, 2.2rem);
  line-height: 1.2;
  margin: 0;
  color: var(--brand-green-dark);
}

.ds-text-muted {
  color: var(--ds-color-text-muted);
}

/* Button primitives */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ds-radius-md);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-duration-normal) var(--ds-ease-standard),
    border-color var(--ds-duration-normal) var(--ds-ease-standard),
    color var(--ds-duration-normal) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-btn:hover {
  transform: translateY(-1px);
}

.ds-btn--primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}

.ds-btn--primary:hover {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}

.ds-btn--secondary {
  background: transparent;
  border-color: var(--brand-green);
  color: var(--brand-green-dark);
}

.ds-btn--secondary:hover {
  background: var(--brand-green);
  color: #fff;
}

.ds-btn--accent {
  background: var(--ds-color-accent-500);
  border-color: var(--ds-color-accent-500);
  color: #fff;
}

.ds-btn--accent:hover {
  background: var(--ds-color-accent-600);
  border-color: var(--ds-color-accent-600);
  color: #fff;
}

.ds-btn--ghost {
  background: transparent;
  border-color: var(--ds-color-border-subtle);
  color: var(--brand-text);
}

.ds-btn--ghost:hover {
  background: var(--ds-color-neutral-100);
  border-color: var(--ds-color-neutral-300);
  color: var(--brand-green-dark);
}

.ds-btn--icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: var(--ds-radius-pill);
}

/* Input primitives */
.ds-input-shell {
  display: flex;
  align-items: center;
  background: var(--ds-color-surface-default);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-pill);
}

.ds-input {
  width: 100%;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-md);
  padding: 0.65rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--brand-text);
  background: var(--ds-color-surface-default);
  transition: border-color var(--ds-duration-normal) var(--ds-ease-standard),
    box-shadow var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds-input:focus {
  border-color: var(--brand-green-dark);
  box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.15);
  outline: none;
}

/* Status icon primitive */
.ds-status-icon {
  width: 5rem;
  height: 5rem;
  border-radius: var(--ds-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.ds-status-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.ds-status-icon--success {
  background: var(--ds-color-support-success-bg);
  color: var(--ds-color-support-success-fg);
}

.ds-status-icon--warning {
  background: var(--ds-color-support-warning-bg);
  color: var(--ds-color-support-warning-fg);
}

.ds-status-icon--danger {
  background: var(--ds-color-support-danger-bg);
  color: var(--ds-color-support-danger-fg);
}

.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .ds-container {
    width: calc(100% - 2rem);
  }

  .ds-page-shell {
    padding: var(--ds-space-6) var(--ds-space-3);
  }

  .ds-card {
    padding: var(--ds-space-6);
  }
}