/* === RESET & BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

/* === GLASSMORPHISM === */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-elevated {
  background: var(--color-surface-elevated);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
  box-shadow: var(--shadow-xl), var(--glass-shadow);
}

.liquid-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* === GRADIENTS === */
.gradient-primary { background: var(--color-primary); }
.gradient-secondary { background: var(--color-secondary); }
.gradient-accent { background: var(--color-accent); }

.gradient-text {
  background: var(--color-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === INTERACTIVE === */
.interactive {
  cursor: pointer;
  transition: var(--transition-all);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.interactive:active {
  transform: translateY(0) scale(0.98);
}

/* === RIPPLE EFFECT === */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* === SKELETON LOADING === */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-elevated) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === FOCUS === */
.focus-ring:focus-visible {
  outline: 3px solid var(--color-primary-start);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* === SPACING === */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }

/* === TEXT === */
.text-display { font-size: var(--text-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.text-title { font-size: var(--text-title); font-weight: var(--weight-semibold); }
.text-heading { font-size: var(--text-heading); font-weight: var(--weight-semibold); }
.text-body { font-size: var(--text-body); }
.text-caption { font-size: var(--text-caption); }
.text-small { font-size: var(--text-small); }

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

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-start);
  color: white;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-4);
}