/**
 * TSCC Component Distribution Site
 * Design tokens and global styles
 */

:root {
  /* Category colors */
  --cat-dotnet: #512BD4;              /* .NET purple */
  --cat-dotnet-subtle: #512BD410;
  --cat-webcomp: #F16529;             /* Web orange */
  --cat-webcomp-subtle: #F1652910;

  /* Surface hierarchy */
  --surface-base: var(--wa-color-neutral-0);
  --surface-raised: var(--wa-color-neutral-0);
  --surface-sunken: var(--wa-color-neutral-50);

  /* Text hierarchy */
  --text-primary: var(--wa-color-neutral-900);
  --text-secondary: var(--wa-color-neutral-600);
  --text-muted: var(--wa-color-neutral-400);

  /* Spacing */
  --gap-xs: var(--wa-space-2xs);
  --gap-sm: var(--wa-space-xs);
  --gap-md: var(--wa-space-m);
  --gap-lg: var(--wa-space-l);
  --gap-xl: var(--wa-space-xl);

  /* Typography */
  --font-family: var(--wa-font-sans);
  --font-size-sm: var(--wa-font-size-small);
  --font-size-base: var(--wa-font-size-medium);
  --font-size-lg: var(--wa-font-size-large);
  --font-size-xl: var(--wa-font-size-x-large);

  /* Borders */
  --border-radius-sm: var(--wa-border-radius-small);
  --border-radius-md: var(--wa-border-radius-medium);
  --border-radius-lg: var(--wa-border-radius-large);

  /* Shadows */
  --shadow-sm: var(--wa-shadow-small);
  --shadow-md: var(--wa-shadow-medium);
  --shadow-lg: var(--wa-shadow-large);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

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

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-family);
  background-color: var(--surface-sunken);
  color: var(--text-primary);
  line-height: 1.5;
}

/* Utility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

/* Card hover effect */
.card-hover {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.1);
}

/* Loading skeleton animation */
@keyframes skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.skeleton {
  animation: skeleton 1.5s ease-in-out infinite;
  background: var(--surface-sunken);
}

/* Category badges */
.badge-dotnet {
  background-color: var(--cat-dotnet-subtle);
  color: var(--cat-dotnet);
  padding: var(--gap-xs) var(--gap-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.badge-webcomp {
  background-color: var(--cat-webcomp-subtle);
  color: var(--cat-webcomp);
  padding: var(--gap-xs) var(--gap-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Frosted glass effect */
.frosted {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--wa-color-primary-600);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wa-color-primary-600);
  color: white;
  padding: var(--gap-sm) var(--gap-md);
  z-index: 10001;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0 0 var(--border-radius-sm) 0;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --surface-sunken: #f0f0f0;
    --text-muted: #444;
  }
}

/* Interactive element focus within shadow DOM */
wa-button:focus-visible,
wa-input:focus-visible,
wa-select:focus-visible {
  outline: 2px solid var(--wa-color-primary-600);
  outline-offset: 2px;
}

/* Form layouts */
.form-group {
  margin-bottom: var(--gap-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--gap-xs);
  font-weight: 500;
  color: var(--text-primary);
}

/* Centered container */
.container-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--gap-md);
}