/* [project]/styles/website-design-system.css [app-client] (css) */
:root {
  --color-bg-primary: #000;
  --color-bg-secondary: #0a0a0a;
  --color-bg-tertiary: #141414;
  --color-bg-elevated: #1a1a1a;
  --color-text-primary: #fff;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #666;
  --color-border-primary: #2a2a2a;
  --color-border-hover: #3a3a3a;
  --color-border-active: #fff;
  --color-accent-white: #fff;
  --color-accent-gray: #e5e5e5;
  --font-logo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo-size-xs: 1.5rem;
  --font-logo-size-sm: 2rem;
  --font-logo-size-md: 3rem;
  --font-logo-size-lg: 5rem;
  --font-logo-size-xl: 7.5rem;
  --font-logo-weight: 300;
  --font-logo-spacing: -.05em;
  --font-h1-size: 3rem;
  --font-h1-size-md: 3.75rem;
  --font-h1-size-lg: 4.5rem;
  --font-h1-weight: 600;
  --font-h1-spacing: -.02em;
  --font-h2-size: 2.25rem;
  --font-h2-size-md: 3rem;
  --font-h2-weight: 600;
  --font-h2-spacing: -.01em;
  --font-h3-size: 1.5rem;
  --font-h3-size-md: 1.875rem;
  --font-h3-weight: 600;
  --font-h4-size: 1.25rem;
  --font-h4-weight: 600;
  --font-body-size: 1rem;
  --font-body-size-md: 1.125rem;
  --font-body-weight: 400;
  --font-body-line-height: 1.6;
  --font-body-sm-size: .875rem;
  --font-body-sm-weight: 400;
  --spacing-xs: .5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 1px 2px 0 #0000000d;
  --shadow-md: 0 4px 6px -1px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a;
  --transition-fast: .15s ease;
  --transition-base: .2s ease;
  --transition-slow: .3s ease;
}

.website-bg-primary {
  background-color: var(--color-bg-primary);
}

.website-bg-secondary {
  background-color: var(--color-bg-secondary);
}

.website-bg-tertiary {
  background-color: var(--color-bg-tertiary);
}

.website-bg-elevated {
  background-color: var(--color-bg-elevated);
}

.website-text-primary {
  color: var(--color-text-primary);
}

.website-text-secondary {
  color: var(--color-text-secondary);
}

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

.website-border-primary {
  border-color: var(--color-border-primary);
}

.website-border-hover {
  border-color: var(--color-border-hover);
}

.website-logo {
  font-family: var(--font-logo);
  font-weight: var(--font-logo-weight);
  letter-spacing: var(--font-logo-spacing);
  color: var(--color-text-primary);
}

.website-logo-xs {
  font-size: var(--font-logo-size-xs);
}

.website-logo-sm {
  font-size: var(--font-logo-size-sm);
}

.website-logo-md {
  font-size: var(--font-logo-size-md);
}

.website-logo-lg {
  font-size: var(--font-logo-size-lg);
}

.website-logo-xl {
  font-size: var(--font-logo-size-xl);
}

.website-h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--font-h1-spacing);
  color: var(--color-text-primary);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .website-h1 {
    font-size: var(--font-h1-size-md);
  }
}

@media (min-width: 1024px) {
  .website-h1 {
    font-size: var(--font-h1-size-lg);
  }
}

.website-h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  letter-spacing: var(--font-h2-spacing);
  color: var(--color-text-primary);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .website-h2 {
    font-size: var(--font-h2-size-md);
  }
}

.website-h3 {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  color: var(--color-text-primary);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .website-h3 {
    font-size: var(--font-h3-size-md);
  }
}

.website-h4 {
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.website-body {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .website-body {
    font-size: var(--font-body-size-md);
  }
}

.website-body-sm {
  font-size: var(--font-body-sm-size);
  font-weight: var(--font-body-sm-weight);
  color: var(--color-text-secondary);
}

.website-card {
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all var(--transition-base);
}

.website-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
}

.website-btn-primary {
  background-color: var(--color-accent-white);
  color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  align-items: center;
  gap: .5rem;
  padding: .75rem 3rem;
  font-size: 1.125rem;
  font-weight: 500;
  display: inline-flex;
}

.website-btn-primary:hover {
  background-color: var(--color-accent-gray);
  transform: scale(1.02);
}

.website-btn-secondary {
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  background-color: #0000;
  align-items: center;
  gap: .5rem;
  padding: .75rem 3rem;
  font-size: 1.125rem;
  font-weight: 500;
  display: inline-flex;
}

.website-btn-secondary:hover {
  border-color: var(--color-text-primary);
  background-color: #ffffff0d;
}

/*# sourceMappingURL=styles_website-design-system_fbf6f437.css.map*/