/* CourtOracle Component Library — Matches iOS exactly */

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

/* Form-control font inheritance. Browsers default <button>, <input>, <select>,
   <textarea> to a UA font-family (Arial/system). When we wrap body text inside
   a <button> (e.g. .tj-goal-content for tap-to-expand), the inner <p class="tj-body">
   inherits from the button and renders in Arial instead of EB Garamond.
   Fix: make all form controls inherit page typography. Site-wide, one rule.
   Kaden 2026-04-22: goal card title/desc wrong font. */
button, input, select, textarea {
  font-family: inherit;
  letter-spacing: inherit;
}

/* ─── Base ─── */
html, body {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  color: var(--tj-foreground);
  background: var(--tj-background) !important;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography Classes ─── */
.tj-display-lg { font-size: var(--text-display-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.tj-display-md { font-size: var(--text-display-md); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.tj-display-stats { font-size: var(--text-display-stats); font-weight: var(--weight-regular); font-family: var(--font-mono); }
.tj-heading-lg { font-size: var(--text-heading-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.tj-heading-md { font-size: var(--text-heading-md); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.tj-heading-sm { font-size: var(--text-heading-sm); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.tj-body { font-size: var(--text-body); font-weight: var(--weight-regular); }
.tj-body-sm { font-size: var(--text-body-sm); font-weight: var(--weight-regular); }
.tj-body-bold { font-size: var(--text-body); font-weight: var(--weight-bold); }
.tj-body-italic { font-size: var(--text-body); font-style: italic; }
.tj-label { font-size: var(--text-label); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--tj-muted-foreground); }
.tj-label-tiny { font-size: var(--text-label-tiny); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--tj-muted-foreground); }

/* ─── Section Labels (iOS: TJSectionHeader pattern) ─── */
.tj-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-section);
  color: var(--tj-muted-foreground);
  font-weight: var(--weight-regular);
}
.tj-section-label::after {
  content: '';
  flex: 1;
  border-top: 1px dashed rgba(102, 102, 102, 0.3);
}
.tj-section-label svg { width: 16px; height: 16px; stroke: var(--tj-primary); }

/* ─── Cards ─── */
.tj-card {
  background: var(--tj-card);
  border: 1px solid var(--tj-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.tj-card-hover:hover {
  border-color: var(--tj-primary);
  cursor: pointer;
}

/* ─── Buttons ─── */
/* Paddings now reference tokens so they scale with the rest of the design
   system. Kaden 2026-04-23: "every element needs to be larger; no fixed
   sizes, only the variable size." */
.tj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}
.tj-btn:active { transform: scale(0.97); }
.tj-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tj-btn-primary { background: var(--tj-primary); color: var(--tj-primary-foreground); }
.tj-btn-primary:hover { background: var(--tj-primary-dark); }

.tj-btn-secondary { background: transparent; border: 2px solid var(--tj-primary); color: var(--tj-primary); }
.tj-btn-secondary:hover { background: rgba(217, 119, 6, 0.05); }

.tj-btn-ghost { background: transparent; color: var(--tj-primary); padding: var(--space-2) var(--space-4); }
.tj-btn-ghost:hover { background: rgba(217, 119, 6, 0.05); }

.tj-btn-destructive { background: var(--tj-destructive); color: var(--tj-destructive-foreground); }
.tj-btn-destructive:hover { background: #B91C1C; }

.tj-btn-icon {
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--radius-full);
  background: var(--tj-secondary);
  color: var(--tj-muted-foreground);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tj-btn-icon:hover { background: var(--tj-muted); }
.tj-btn-icon svg { width: 20px; height: 20px; }

/* ─── Inputs ─── */
.tj-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--tj-border);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--tj-foreground);
  background: white;
  transition: border-color var(--transition-fast);
}
.tj-input:focus { border-color: var(--tj-primary); outline: none; }
.tj-input::placeholder { color: var(--tj-muted-foreground); }

.tj-textarea {
  width: 100%;
  min-height: 132px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--tj-border);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--tj-foreground);
  background: white;
  resize: vertical;
  transition: border-color var(--transition-fast);
}
.tj-textarea:focus { border-color: var(--tj-primary); outline: none; }

.tj-form-group { margin-bottom: var(--space-6); }
.tj-form-label {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--tj-muted-foreground);
  margin-bottom: var(--space-2);
}
.tj-form-error { font-size: var(--text-body-sm); color: var(--tj-destructive); margin-top: var(--space-1); }

/* ─── Dividers ─── */
.tj-divider { border: none; border-top: 1px solid var(--tj-border); margin: var(--space-6) 0; }
.tj-divider-dashed { border: none; border-top: 1px dashed rgba(102, 102, 102, 0.3); margin: var(--space-6) 0; }

/* ─── Page Header Pattern (iOS: display-lg + 64×2px underline) ─── */
.tj-page-header {
  margin-bottom: var(--space-8);
}
.tj-page-header h1 {
  font-size: var(--text-display-lg);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  color: var(--tj-foreground);
  margin-bottom: var(--space-3);
}
.tj-page-header .underline {
  width: 64px;
  height: 2px;
  background: var(--tj-primary);
  border-radius: 1px;
}
.tj-page-header .subtitle {
  font-size: var(--text-body);
  color: var(--tj-muted-foreground);
  margin-top: var(--space-2);
}

/* ─── Badges & Pills ─── */
.tj-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-label-tiny);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-category);
}
.tj-badge-primary { background: rgba(217, 119, 6, 0.1); color: var(--tj-primary); }
.tj-badge-muted { background: var(--tj-muted); color: var(--tj-muted-foreground); }
.tj-badge-success { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.tj-badge-destructive { background: rgba(217, 53, 48, 0.1); color: var(--tj-destructive); }

/* ─── Progress Bar ─── */
.tj-progress {
  height: 6px;
  background: rgba(102, 102, 102, 0.15);
  border-radius: 3px;
  overflow: hidden;
}
.tj-progress-fill {
  height: 100%;
  background: var(--tj-primary);
  border-radius: 3px;
  transition: width var(--transition-normal);
}

/* ─── Toast Notifications ─── */
.tj-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: white;
  z-index: 10000;
  animation: slideUp 0.3s ease;
}
.tj-toast-success { background: #16a34a; }
.tj-toast-error { background: var(--tj-destructive); }
.tj-toast-info { background: var(--tj-foreground); }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ─── Loading Skeleton ─── */
.tj-skeleton {
  background: linear-gradient(90deg, var(--tj-muted) 25%, var(--tj-secondary) 50%, var(--tj-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Empty State ─── */
.tj-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--tj-muted-foreground);
}
.tj-empty-state svg { width: 48px; height: 48px; margin-bottom: var(--space-4); opacity: 0.4; }
.tj-empty-state p { margin-top: var(--space-2); }

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