/*
 * BASE STYLES
 *
 * AUDIT RULES:
 * - No hex colors allowed. Use var(--colors-*)
 * - No px values for spacing. Use var(--spacing-*)
 * - No raw font sizes. Use var(--typography-size-*)
 *
 * VERIFY: grep -nE '#[0-9A-Fa-f]{3,6}' styles/*.css
 *         Should return 0 matches
 */

/* ════════════════════════════════════════════════════════════════════════════
   IMPORTS
   ════════════════════════════════════════════════════════════════════════════ */

@import url('./keyframes.css');
@import url('./breakpoints.css');
@import url('./components/index.css');

/* ════════════════════════════════════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--typography-font-body);
  font-size: var(--typography-size-base);
  line-height: var(--typography-leading-normal);
  color: var(--colors-text-body);
  background: var(--colors-surface);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--colors-primary);
  text-decoration: none;
  transition: color var(--transitions-duration-fast);
}

a:hover {
  color: var(--colors-primary-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--typography-font-heading);
  color: var(--colors-text-heading);
  line-height: var(--typography-leading-tight);
  letter-spacing: var(--typography-tracking-tight);
}

h1 { font-size: var(--typography-size-5xl); font-weight: var(--typography-weight-extrabold); }
h2 { font-size: var(--typography-size-4xl); font-weight: var(--typography-weight-bold); }
h3 { font-size: var(--typography-size-3xl); font-weight: var(--typography-weight-bold); }
h4 { font-size: var(--typography-size-2xl); font-weight: var(--typography-weight-semibold); }
h5 { font-size: var(--typography-size-xl); font-weight: var(--typography-weight-semibold); }
h6 { font-size: var(--typography-size-lg); font-weight: var(--typography-weight-semibold); }

p {
  line-height: var(--typography-leading-relaxed);
}

small {
  font-size: var(--typography-size-sm);
}

strong {
  font-weight: var(--typography-weight-semibold);
}

/* ════════════════════════════════════════════════════════════════════════════
   FORM INPUTS (base - extended by components/forms.css)
   ════════════════════════════════════════════════════════════════════════════ */

.form-input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: inherit;
  font-size: 16px; /* Prevents iOS zoom on focus */
  color: var(--colors-text-heading);
  background: var(--colors-surface-card);
  border: 2px solid var(--colors-border);
  border-radius: var(--radius-lg);
  transition: all var(--transitions-duration-fast) var(--transitions-ease-out);
  /* Touch-friendly minimum height */
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 768px) {
  .form-input {
    font-size: var(--typography-size-base);
  }
}

.form-input::placeholder {
  color: var(--colors-text-muted);
}

.form-input:hover {
  border-color: var(--colors-primary-light);
}

.form-input:focus {
  outline: none;
  border-color: var(--colors-primary);
  box-shadow: var(--shadows-glow-primary);
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--colors-surface-alt);
}

/* Input sizes */
.form-input-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--typography-size-sm);
}

.form-input-lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--typography-size-lg);
}

/* ════════════════════════════════════════════════════════════════════════════
   TEXT UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.text-primary { color: var(--colors-primary); }
.text-accent { color: var(--colors-accent); }
.text-success { color: var(--colors-success); }
.text-warning { color: var(--colors-warning); }
.text-error { color: var(--colors-error); }
.text-muted { color: var(--colors-text-muted); }
.text-heading { color: var(--colors-text-heading); }
.text-body { color: var(--colors-text-body); }
.text-inverse { color: var(--colors-text-inverse); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Font weight */
.font-normal { font-weight: var(--typography-weight-normal); }
.font-medium { font-weight: var(--typography-weight-medium); }
.font-semibold { font-weight: var(--typography-weight-semibold); }
.font-bold { font-weight: var(--typography-weight-bold); }

/* Font size utilities */
.text-xs { font-size: var(--typography-size-xs); }
.text-sm { font-size: var(--typography-size-sm); }
.text-base { font-size: var(--typography-size-base); }
.text-lg { font-size: var(--typography-size-lg); }
.text-xl { font-size: var(--typography-size-xl); }
.text-2xl { font-size: var(--typography-size-2xl); }
.text-3xl { font-size: var(--typography-size-3xl); }

/* Line height */
.leading-tight { line-height: var(--typography-leading-tight); }
.leading-snug { line-height: var(--typography-leading-snug); }
.leading-normal { line-height: var(--typography-leading-normal); }
.leading-relaxed { line-height: var(--typography-leading-relaxed); }

/* ════════════════════════════════════════════════════════════════════════════
   BACKGROUND UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.bg-surface { background: var(--colors-surface); }
.bg-surface-alt { background: var(--colors-surface-alt); }
.bg-surface-card { background: var(--colors-surface-card); }
.bg-primary { background: var(--colors-primary); }
.bg-primary-pale { background: var(--colors-primary-pale); }
.bg-primary-light { background: var(--colors-primary-light); }
.bg-accent { background: var(--colors-accent); }
.bg-accent-pale { background: var(--colors-accent-pale); }
.bg-accent-light { background: var(--colors-accent-light); }
.bg-success { background: var(--colors-success); }
.bg-success-light { background: var(--colors-success-light); }
.bg-warning { background: var(--colors-warning); }
.bg-warning-light { background: var(--colors-warning-light); }
.bg-error { background: var(--colors-error); }
.bg-error-light { background: var(--colors-error-light); }

/* Gradient backgrounds */
.bg-gradient-primary { background: var(--gradients-primary); }
.bg-gradient-accent { background: var(--gradients-accent); }
.bg-gradient-hero { background: var(--gradients-hero); }
.bg-gradient-warm { background: var(--gradients-warm); }
.bg-gradient-cool { background: var(--gradients-cool); }

/* ════════════════════════════════════════════════════════════════════════════
   BORDER UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.border { border: 1px solid var(--colors-border); }
.border-light { border: 1px solid var(--colors-border-light); }
.border-primary { border: 1px solid var(--colors-primary); }

.border-t { border-top: 1px solid var(--colors-border); }
.border-b { border-bottom: 1px solid var(--colors-border); }
.border-l { border-left: 1px solid var(--colors-border); }
.border-r { border-right: 1px solid var(--colors-border); }

.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ════════════════════════════════════════════════════════════════════════════
   SHADOW UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadows-xs); }
.shadow-sm { box-shadow: var(--shadows-sm); }
.shadow-md { box-shadow: var(--shadows-md); }
.shadow-lg { box-shadow: var(--shadows-lg); }
.shadow-xl { box-shadow: var(--shadows-xl); }

/* ════════════════════════════════════════════════════════════════════════════
   OPACITY UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.opacity-0 { opacity: var(--opacity-0); }
.opacity-25 { opacity: var(--opacity-25); }
.opacity-50 { opacity: var(--opacity-50); }
.opacity-75 { opacity: var(--opacity-75); }
.opacity-100 { opacity: var(--opacity-100); }

/* ════════════════════════════════════════════════════════════════════════════
   DISPLAY UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Screen reader only */
.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;
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATION UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.animate-fade-in { animation: var(--animations-fade-in); }
.animate-fade-out { animation: var(--animations-fade-out); }
.animate-slide-up { animation: var(--animations-slide-up); }
.animate-slide-down { animation: var(--animations-slide-down); }
.animate-scale-in { animation: var(--animations-scale-in); }
.animate-spin { animation: var(--animations-spin); }
.animate-pulse { animation: var(--animations-pulse); }
.animate-bounce { animation: var(--animations-bounce); }

/* Transition utilities */
.transition-none { transition: none; }
.transition-fast { transition: all var(--transitions-duration-fast) var(--transitions-ease-out); }
.transition { transition: all var(--transitions-duration-normal) var(--transitions-ease-out); }
.transition-slow { transition: all var(--transitions-duration-slow) var(--transitions-ease-out); }

/* ════════════════════════════════════════════════════════════════════════════
   CURSOR UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }

/* ════════════════════════════════════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════════════════════════════════════ */

.divider {
  height: 1px;
  background: var(--colors-border-light);
  margin: var(--spacing-lg) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--colors-border-light);
  margin: 0 var(--spacing-lg);
}