/* Neobrutalism Design System - Matching Mobile App */

:root {
  /* Colors from mobile app */
  --neo-primary: #007AFF;
  --neo-secondary: #5856D6;
  --neo-success: #34C759;
  --neo-danger: #FF3B30;
  --neo-warning: #FF9500;
  --neo-yellow: #FFCC00;
  --neo-black: #000000;
  --neo-white: #FFFFFF;
  --neo-light-gray: #E5E5EA;

  /* Border widths */
  --neo-border-sm: 2px;
  --neo-border: 3px;
  --neo-border-lg: 4px;

  /* Shadow offsets */
  --neo-shadow-sm: 3px;
  --neo-shadow: 4px;
  --neo-shadow-lg: 6px;
}

/* Reset border radius globally for neobrutalist aesthetic */
* {
  border-radius: 0 !important;
}

/* Base shadows */
.shadow-neo-sm {
  box-shadow: var(--neo-shadow-sm) var(--neo-shadow-sm) 0 var(--neo-black);
}

.shadow-neo {
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

.shadow-neo-lg {
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
}

/* Hover effects - increase shadow */
.hover\:shadow-neo-lg:hover {
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
  transform: translate(-2px, -2px);
  transition: all 0.1s ease;
}

.hover\:shadow-neo:hover {
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

/* Active state - pressed effect */
.active\:shadow-sm:active,
.hover\:shadow-neo-lg:active {
  box-shadow: 1px 1px 0 var(--neo-black);
  transform: translate(2px, 2px);
}

/* Button Base */
.neo-btn {
  display: inline-block;
  padding: 12px 24px;
  border: var(--neo-border) solid var(--neo-black);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

.neo-btn:hover {
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-btn:active {
  box-shadow: 1px 1px 0 var(--neo-black);
  transform: translate(2px, 2px);
}

/* Button Sizes */
.neo-btn-sm {
  padding: 8px 16px;
  border-width: var(--neo-border-sm);
  font-size: 0.875rem;
  box-shadow: var(--neo-shadow-sm) var(--neo-shadow-sm) 0 var(--neo-black);
}

.neo-btn-lg {
  padding: 16px 32px;
  border-width: var(--neo-border-lg);
  font-size: 1.125rem;
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
  font-weight: 900;
}

/* Button Variants */
.neo-btn-primary {
  background-color: var(--neo-primary);
  color: var(--neo-white);
}

.neo-btn-secondary {
  background-color: var(--neo-white);
  color: var(--neo-black);
}

.neo-btn-success {
  background-color: var(--neo-success);
  color: var(--neo-white);
}

.neo-btn-danger {
  background-color: var(--neo-danger);
  color: var(--neo-white);
}

.neo-btn-warning {
  background-color: var(--neo-warning);
  color: var(--neo-white);
}

.neo-btn-yellow {
  background-color: var(--neo-yellow);
  color: var(--neo-black);
}

.neo-btn-disabled {
  background-color: var(--neo-light-gray);
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.neo-btn-disabled:hover {
  transform: none;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

/* Input Fields */
.neo-input {
  width: 100%;
  padding: 12px;
  border: var(--neo-border) solid var(--neo-black);
  background-color: var(--neo-white);
  font-size: 1rem;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
  transition: all 0.1s ease;
}

.neo-input:focus {
  outline: none;
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
  transform: translate(-1px, -1px);
}

.neo-input::placeholder {
  color: #999;
}

/* Textarea */
.neo-textarea {
  width: 100%;
  padding: 12px;
  border: var(--neo-border) solid var(--neo-black);
  background-color: var(--neo-white);
  font-size: 1rem;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

.neo-textarea:focus {
  outline: none;
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
  transform: translate(-1px, -1px);
}

/* Select */
.neo-select {
  width: 100%;
  padding: 12px;
  border: var(--neo-border) solid var(--neo-black);
  background-color: var(--neo-white);
  font-size: 1rem;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
  cursor: pointer;
}

.neo-select:focus {
  outline: none;
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
}

/* Cards */
.neo-card {
  background-color: var(--neo-white);
  border: var(--neo-border) solid var(--neo-black);
  padding: 16px;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

.neo-card-lg {
  background-color: var(--neo-white);
  border: var(--neo-border-lg) solid var(--neo-black);
  padding: 24px;
  box-shadow: var(--neo-shadow-lg) var(--neo-shadow-lg) 0 var(--neo-black);
}

/* Badge/Pill */
.neo-badge {
  display: inline-block;
  padding: 4px 12px;
  border: var(--neo-border-sm) solid var(--neo-black);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.neo-badge-primary {
  background-color: var(--neo-primary);
  color: var(--neo-white);
}

.neo-badge-success {
  background-color: var(--neo-success);
  color: var(--neo-white);
}

.neo-badge-danger {
  background-color: var(--neo-danger);
  color: var(--neo-white);
}

.neo-badge-warning {
  background-color: var(--neo-warning);
  color: var(--neo-white);
}

.neo-badge-secondary {
  background-color: var(--neo-light-gray);
  color: var(--neo-black);
}

/* Tables */
.neo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--neo-border) solid var(--neo-black);
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
}

.neo-table th {
  background-color: var(--neo-black);
  color: var(--neo-white);
  padding: 12px;
  text-align: left;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: var(--neo-border) solid var(--neo-black);
}

.neo-table td {
  padding: 12px;
  border-bottom: var(--neo-border) solid var(--neo-black);
  background-color: var(--neo-white);
}

.neo-table tr:last-child td {
  border-bottom: none;
}

.neo-table tbody tr:hover {
  background-color: var(--neo-yellow);
}

/* Alerts */
.neo-alert {
  padding: 16px;
  border: var(--neo-border) solid var(--neo-black);
  font-weight: 700;
  box-shadow: var(--neo-shadow) var(--neo-shadow) 0 var(--neo-black);
  margin-bottom: 16px;
}

.neo-alert-success {
  background-color: var(--neo-success);
  color: var(--neo-white);
}

.neo-alert-danger {
  background-color: var(--neo-danger);
  color: var(--neo-white);
}

.neo-alert-warning {
  background-color: var(--neo-warning);
  color: var(--neo-white);
}

.neo-alert-info {
  background-color: var(--neo-primary);
  color: var(--neo-white);
}

/* Links */
.neo-link {
  color: var(--neo-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--neo-primary);
  transition: all 0.1s ease;
}

.neo-link:hover {
  border-bottom-width: 4px;
  padding-bottom: 2px;
}

/* Container */
.neo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.neo-header {
  border-bottom: var(--neo-border-lg) solid var(--neo-black);
  padding: 16px 0;
  box-shadow: 0 var(--neo-shadow) 0 var(--neo-black);
  margin-bottom: 24px;
}

/* Typography */
.neo-heading-1 {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.neo-heading-2 {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin-bottom: 20px;
}

.neo-heading-3 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

/* Form Groups */
.neo-form-group {
  margin-bottom: 20px;
}

.neo-label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-size: 0.875rem;
}

/* Divider */
.neo-divider {
  border: none;
  border-top: var(--neo-border) solid var(--neo-black);
  margin: 24px 0;
}

/* Grid */
.neo-grid {
  display: grid;
  gap: 20px;
}

.neo-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.neo-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.neo-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .neo-grid-2,
  .neo-grid-3,
  .neo-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Utility Classes */
.neo-border {
  border: var(--neo-border) solid var(--neo-black);
}

.neo-border-lg {
  border: var(--neo-border-lg) solid var(--neo-black);
}

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

.neo-bg-secondary {
  background-color: var(--neo-light-gray);
}

.neo-bg-white {
  background-color: var(--neo-white);
}

.neo-bg-black {
  background-color: var(--neo-black);
}

.neo-text-white {
  color: var(--neo-white);
}

.neo-text-black {
  color: var(--neo-black);
}

.neo-text-bold {
  font-weight: 700;
}

.neo-text-heavy {
  font-weight: 900;
}

.neo-text-upper {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}