@import "react_crop";

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

@layer base {
  :root {
    /* Backgrounds */
    --bg-warm: #F3F1EC;
    --bg-white: #FFFFFF;
    --bg-cream: #E8E3D6;
    --bg-mist: #EDEAE2;
    --bg-photo: #F5F2EA;

    /* Brand */
    --brand-green: #182315;
    --brand-green-deep: #0F1A0D;
    --brand-green-light: #2D3A2A;

    /* Text */
    --text-primary: #0A0A0A;
    --text-secondary: #4A5752;
    --text-tertiary: #8B8170;
    --text-quaternary: #B8AE9A;

    /* Borders */
    --border-warm: #E5DFD0;
    --border-cream: #D6CFBC;
    --border-soft: #EDE7D8;

    /* Pink */
    --accent-pink: #DB5F97;
    --accent-pink-soft: #F7E0EC;
    --accent-pink-deep: #B8407A;

    /* Semantic */
    --accent-green-soft: #D9E5DD;
    --accent-green: #2C5F4F;
    --accent-amber-soft: #ECDFC8;
    --accent-amber: #8B6F3F;

    /* Typography */
    --font-display: 'Tinos', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }

  @font-face {
    font-family: "Inter";
    src: url(/fonts/Inter/Inter.ttf);
  }

  @font-face {
    font-family: "Montserrat";
    src: url(/fonts/Montserrat/Montserrat.ttf);
  }

  @font-face {
    font-family: "Tinos";
    font-weight: 400;
    src: url(/fonts/Tinos/Tinos-Regular.ttf);
  }

  @font-face {
    font-family: "Tinos-Bold";
    font-weight: 700;
    src: url(/fonts/Tinos/Tinos-Bold.ttf);
  }
}

/* === Admin redesign utility classes === */

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.page-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.button-primary {
  background: var(--accent-pink);
  color: var(--bg-white);
  border: 1px solid var(--accent-pink);
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.button-primary:hover {
  background: var(--accent-pink-deep);
  border-color: var(--accent-pink-deep);
}

.button-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-warm);
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.button-ghost:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.button-dark {
  background: var(--brand-green);
  color: var(--bg-white);
  border: none;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 100px;
  cursor: pointer;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-green-soft);
  color: var(--accent-green);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-cream);
  color: var(--text-secondary);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Modal form field label */
.field-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-label .required {
  color: var(--accent-pink);
}

/* Modal form field input */
.field-input {
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
}
.field-input:hover { border-color: var(--text-quaternary); }
.field-input:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(24, 35, 21, 0.06);
}
.field-input::placeholder { color: var(--text-quaternary); }

/* Textarea variant */
.field-textarea {
  min-height: 60px;
  resize: vertical;
}

/* Tiptap task list */
.prose ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}
.prose ul[data-type="taskList"] li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prose ul[data-type="taskList"] li > label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}
.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
  margin: 0;
}
.prose ul[data-type="taskList"] li > div {
  flex: 1;
  margin: 0;
}

/* Tiptap links */
.prose a {
  color: #2563eb;
  text-decoration: underline;
}

/* Lookbook card hover-reveal description */
.group:hover .card-hover-desc { max-height: 51px !important; opacity: 1 !important; }
.card-desc-scroll {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,129,112,0.4) transparent;
}
.card-desc-scroll::-webkit-scrollbar { width: 4px; -webkit-appearance: none; }
.card-desc-scroll::-webkit-scrollbar-track { background: rgba(139,129,112,0.1); border-radius: 4px; }
.card-desc-scroll::-webkit-scrollbar-thumb { background: rgba(139,129,112,0.4); border-radius: 4px; min-height: 20px; -webkit-appearance: none; }
@media (hover: none) {
  .card-hover-desc { max-height: 51px !important; opacity: 1 !important; transition: none !important; }
}