/* CSS Variables from React App Design System */
:root {
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);
  --opaque-button-border-intensity: -8;
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);

  --background: 0 0% 98%;
  --foreground: 220 85% 15%;
  --border: 220 15% 85%;
  --card: 0 0% 96%;
  --card-foreground: 220 85% 15%;
  --card-border: 220 15% 82%;
  --primary: 220 85% 15%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 8% 88%;
  --secondary-foreground: 220 85% 15%;
  --muted: 220 6% 90%;
  --muted-foreground: 220 45% 35%;
  --accent: 220 8% 86%;
  --accent-foreground: 220 85% 15%;
  --destructive: 0 85% 55%;
  --destructive-foreground: 0 0% 98%;
  --input: 220 25% 75%;
  --ring: 220 85% 15%;
  --chart-1: 220 85% 15%;
  --chart-2: 25 95% 55%;
  --chart-3: 142 70% 45%;
  --chart-4: 280 75% 45%;
  --chart-5: 200 85% 50%;

  --primary-border: hsl(220 85% 15%);
  --secondary-border: hsl(220 8% 88%);
  --muted-border: hsl(220 6% 90%);
  --accent-border: hsl(220 8% 86%);
  --destructive-border: hsl(0 85% 55%);
}

.dark {
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);

  --background: 220 25% 8%;
  --foreground: 220 10% 85%;
  --border: 220 20% 18%;
  --card: 220 15% 12%;
  --card-foreground: 220 10% 85%;
  --card-border: 220 20% 20%;
  --primary: 220 85% 15%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 15% 20%;
  --secondary-foreground: 220 10% 85%;
  --muted: 220 12% 16%;
  --muted-foreground: 220 15% 65%;
  --accent: 220 12% 18%;
  --accent-foreground: 220 10% 85%;
  --destructive: 0 75% 45%;
  --destructive-foreground: 0 0% 98%;
  --input: 220 25% 25%;
  --ring: 220 85% 15%;
  --chart-1: 220 60% 75%;
  --chart-2: 25 85% 70%;
  --chart-3: 142 60% 65%;
  --chart-4: 280 65% 70%;
  --chart-5: 200 75% 70%;
}

/* Elevation System Utilities */
.hover-elevate {
  position: relative;
  z-index: 0;
}

.hover-elevate::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  z-index: 999;
  transition: background-color 0.2s ease;
}

.hover-elevate:hover::after {
  background-color: var(--elevate-1);
}

.border.hover-elevate::after {
  inset: -1px;
}

/* Custom Component Styles */
.btn-lg {
  min-height: 2.5rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.input-lg {
  height: 3rem;
  padding: 0.75rem 1rem;
}

.card-shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.badge-outline {
  border: 1px solid var(--badge-outline);
}