@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --surface: #fef9f1;
  --surface-dim: #ded9d2;
  --surface-bright: #fef9f1;
  --surface-container-low: #f8f3eb;
  --surface-container: #f2ede5;
  --surface-container-high: #ece8e0;
  --surface-container-highest: #e7e2da;
  --on-surface: #1d1c17;
  --on-surface-variant: #554243;
  --inverse-surface: #32302b;
  --inverse-on-surface: #f5f0e8;
  --outline: #877273;
  --outline-variant: #dac0c1;
  --primary: #4d0516;
  --primary-container: #6b1d2a;
  --on-primary: #ffffff;
  --secondary: #755a24;
  --secondary-container: #fed896;
  --tertiary: #242425;
  --tertiary-container: #3a3a3a;
  --error: #ba1a1a;
  --error-container: #ffdad6;

  --aged-parchment: #F5F0E8;
  --deep-burgundy: #6B1D2A;
  --charcoal-black: #2C2C2C;
  --muted-gold: #C4A265;
  --darker-parchment: #E7E2DA;
  --ash-gray: #877273;

  --font-display: 'Playfair Display', serif;
  --font-body: 'EB Garamond', serif;

  --spacing-unit: 4px;
  --spacing-gutter: 24px;
  --spacing-margin-desktop: 64px;
  --spacing-margin-mobile: 20px;
  --border-thin: 1px;
  --border-thick: 2px;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--aged-parchment);
  color: var(--charcoal-black);
  font-size: 18px;
  line-height: 28px;
  min-height: 100vh;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 100px,
      rgba(139, 119, 101, 0.03) 100px,
      rgba(139, 119, 101, 0.03) 101px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 100px,
      rgba(139, 119, 101, 0.03) 100px,
      rgba(139, 119, 101, 0.03) 101px
    );
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--charcoal-black);
  letter-spacing: -0.02em;
}

a {
  color: var(--deep-burgundy);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.headline-lg {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.headline-md {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.label-caps {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-italic {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  font-style: italic;
}

.folio-card {
  background: var(--aged-parchment);
  border: 1px solid var(--charcoal-black);
  padding: var(--spacing-gutter);
}

.folio-card-header {
  border-bottom: 1px solid var(--charcoal-black);
  padding-bottom: var(--spacing-gutter);
  margin-bottom: var(--spacing-gutter);
}

.brass-plate {
  background: var(--muted-gold);
  color: var(--charcoal-black);
  padding: var(--spacing-gutter);
}

.btn-primary {
  background: var(--deep-burgundy);
  color: var(--aged-parchment);
  border: 1px solid var(--charcoal-black);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.btn-primary:hover {
  background: #5A1520;
  box-shadow: inset 0 0 0 1px var(--muted-gold);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal-black);
  border: 1px solid var(--charcoal-black);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.btn-secondary:hover {
  background: var(--muted-gold);
}

.btn-secondary:active {
  transform: scale(0.98);
}

.input-field {
  background: transparent;
  border: 1px solid var(--charcoal-black);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--charcoal-black);
  width: 100%;
  outline: none;
}

.input-field:focus {
  border-color: var(--muted-gold);
}

.input-field::placeholder {
  color: var(--ash-gray);
}

.textarea-lined {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--outline-variant) 31px,
    var(--outline-variant) 32px
  );
  background-attachment: local;
  padding-top: 8px;
}

.wax-seal {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--deep-burgundy);
  border: 2px solid var(--charcoal-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease-out;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.1);
}

.wax-seal:hover {
  transform: scale(1.02);
}

.wax-seal:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.wax-seal-icon {
  width: 32px;
  height: 32px;
  fill: var(--aged-parchment);
}

.brass-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: linear-gradient(180deg, #D4A843, #B8922F, #C4A265);
  border: 1px solid var(--charcoal-black);
  cursor: pointer;
}

.brass-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: linear-gradient(180deg, #D4A843, #B8922F, #C4A265);
  border: 1px solid var(--charcoal-black);
  transition: transform 150ms ease-in-out;
}

.brass-toggle.active .brass-toggle-knob {
  transform: translateX(30px);
}

.mechanical-toggle {
  display: flex;
  border: 1px solid var(--charcoal-black);
}

.mechanical-toggle button {
  flex: 1;
  padding: 8px 16px;
  background: var(--darker-parchment);
  border: none;
  border-right: 1px solid var(--charcoal-black);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.mechanical-toggle button:last-child {
  border-right: none;
}

.mechanical-toggle button.active-approve {
  background: #3D6B4F;
  color: var(--aged-parchment);
}

.mechanical-toggle button.active-hide {
  background: var(--ash-gray);
  color: var(--aged-parchment);
}

.mechanical-toggle button.active-delete {
  background: #8B2500;
  color: var(--aged-parchment);
}

.ornamental-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-gutter) 0;
  color: var(--muted-gold);
}

.ornamental-divider::before,
.ornamental-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--muted-gold);
}

.ornamental-divider span {
  padding: 0 16px;
  font-size: 20px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--darker-parchment);
  border-top-color: var(--deep-burgundy);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stamp {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 300ms ease-out;
}

.animate-slideDown {
  animation: slideDown 300ms ease-out;
}

.animate-stamp {
  animation: stamp 400ms ease-out;
}

.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--deep-burgundy);
  color: var(--aged-parchment);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1000;
  animation: slideDown 300ms ease-out;
}

.success-message {
  text-align: center;
  padding: 24px;
}

.success-message .checkmark {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--muted-gold);
}

.dropzone {
  border: 2px dashed var(--charcoal-black);
  padding: 48px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.dropzone:hover {
  border-color: var(--muted-gold);
}

.dropzone.drag-over {
  border-color: var(--muted-gold);
  background: var(--surface-container);
}

.dropzone-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ash-gray);
}

.dropzone-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.dropzone-subtext {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ash-gray);
}

.thumbnail-preview {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter: sepia(0.8) contrast(1.1) brightness(0.95);
  border: 1px solid var(--charcoal-black);
}

.change-photo-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--deep-burgundy);
  cursor: pointer;
}

.change-photo-link:hover {
  text-decoration: underline;
}

.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--ash-gray);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  opacity: 0.5;
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--darker-parchment) 25%,
    var(--surface-container-high) 50%,
    var(--darker-parchment) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

.image-sepia {
  filter: sepia(0.8) contrast(1.1) brightness(0.95);
}

.image-bw {
  filter: grayscale(1) contrast(1.2) brightness(0.9);
}

@media (max-width: 768px) {
  .display-lg {
    font-size: 28px;
    line-height: 36px;
  }

  .headline-lg {
    font-size: 24px;
    line-height: 32px;
  }

  body {
    font-size: 16px;
    line-height: 24px;
  }
}