/* ================================================================
   SOFTGEO — Дизайн-система «Полевой журнал геолога»
   Основано на geo-mobile.ru · Next.js 16 + Tailwind CSS v4
   Адаптировано для softgeo.dkvstudio.ru
   ================================================================ */

/* ===== 1. ШРИФТЫ ===== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Шрифты */
  --font-spectral: 'Spectral', Georgia, serif;
  --font-public-sans: 'Inter', system-ui, sans-serif;

  /* ===== 2. ПАЛИТРА ===== */

  /* Бумага и чернила */
  --paper: #f6f1e7;
  --paper-2: #fbf8f1;
  --paper-3: #efe7d6;
  --ink: #2b2622;
  --ink-soft: #5c544b;
  --ink-faint: #8a7f72;
  --rule: #d8ccb4;
  --rule-strong: #c3b393;

  /* Земля / глина (акценты) */
  --terracotta: #b06a3b;
  --ochre: #c98a52;
  --loam: #6e5440;
  --slate-core: #2f4a47;
  --slate-core-2: #355c56;

  /* Стратиграфия (слои грунта) */
  --strata-sand: #e3c98b;
  --strata-sandyloam: #cdae7a;
  --strata-clay: #9c7a5b;
  --strata-loam: #6e5440;
  --strata-rock: #4a4640;
  --strata-water: #3e7ca6;
}

/* ===== 3. БАЗА ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  color: var(--ink);
  font-family: var(--font-public-sans), system-ui, sans-serif;
  background-color: var(--paper);
  background-image:
    /* топо-контуры сверху-слева */
    radial-gradient(circle at 12% 8%,
      transparent 0, transparent 58px,
      rgba(110,84,64,0.05) 59px, rgba(110,84,64,0.05) 60px,
      transparent 61px, transparent 118px,
      rgba(110,84,64,0.045) 119px, rgba(110,84,64,0.045) 120px,
      transparent 121px, transparent 178px,
      rgba(110,84,64,0.04) 179px, rgba(110,84,64,0.04) 180px,
      transparent 181px),
    /* топо-контуры снизу-справа */
    radial-gradient(circle at 88% 92%,
      transparent 0, transparent 78px,
      rgba(47,74,71,0.045) 79px, rgba(47,74,71,0.045) 80px,
      transparent 81px, transparent 158px,
      rgba(47,74,71,0.04) 159px, rgba(47,74,71,0.04) 160px,
      transparent 161px),
    /* тёплая виньетка */
    radial-gradient(ellipse at 50% 0%, rgba(201,138,82,0.06), transparent 60%);
  background-attachment: fixed;
  line-height: 1.5;
  min-height: 100vh;
}

::selection { background: rgba(176,106,59,0.22); color: var(--ink); }

/* Бумажное зерно */
.paper-grain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(110,84,64,0.012) 0px, rgba(110,84,64,0.012) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(110,84,64,0.01) 0px, rgba(110,84,64,0.01) 1px,
      transparent 1px, transparent 4px);
}

/* ===== 4. ТИПОГРАФИКА ===== */
h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--font-spectral), Georgia, serif;
  color: var(--ink);
}

h1 { font-size: 2.75rem; font-weight: 700; line-height: 1.15; }
h2 { font-size: 2.125rem; font-weight: 600; line-height: 1.2; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }

p { margin-bottom: 1rem; }

a { color: var(--terracotta); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ochre); }

/* Journal-стиль подпись */
.journal-caption {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-faint);
}

/* ===== 5. КАРТОЧКИ («образец керна») ===== */
.core-card {
  position: relative;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 0 rgba(195,179,147,0.35),
    0 10px 24px -16px rgba(43,38,34,0.4);
}

.core-card-hover {
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              box-shadow .18s ease, border-color .18s ease;
}
.core-card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--terracotta);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 0 rgba(176,106,59,0.3),
    0 18px 36px -20px rgba(43,38,34,0.5);
}

/* ===== 6. КНОПКИ ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-public-sans), system-ui, sans-serif;
  font-weight: 600; font-size: 0.875rem;
  border-radius: 6px; padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  transition: transform .1s ease, background .15s ease,
              box-shadow .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

.btn-primary {
  background: linear-gradient(180deg, var(--slate-core-2) 0%, var(--slate-core) 100%);
  color: #f3efe6; border-color: rgba(20,35,33,0.5);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset,
              0 6px 16px -10px rgba(47,74,71,0.9);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #3c6760 0%, #345450 100%);
}

.btn-accent {
  background: linear-gradient(180deg, var(--ochre) 0%, var(--terracotta) 100%);
  color: #fff6ec; border-color: rgba(120,65,30,0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 6px 16px -10px rgba(176,106,59,0.8);
}
.btn-accent:hover:not(:disabled) {
  background: linear-gradient(180deg, #d2965d 0%, #b97342 100%);
}

.btn-secondary {
  background: var(--paper-2); color: var(--ink); border-color: var(--rule-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.btn-secondary:hover:not(:disabled) { background: #fff; border-color: var(--loam); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) {
  background: rgba(110,84,64,0.08); color: var(--ink);
}

.btn-danger {
  background: linear-gradient(180deg, #b5503e 0%, #9a3f30 100%);
  color: #fdeee9; border-color: rgba(90,35,25,0.5);
}
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(180deg, #c25a47 0%, #a84635 100%);
}

/* ===== 7. БЕЙДЖИ / ТЕГИ ===== */
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px; padding: 0.2rem 0.6rem; border: 1px solid;
}
.tag-slate { background: rgba(47,74,71,0.1); color: var(--slate-core); border-color: rgba(47,74,71,0.3); }
.tag-ochre { background: rgba(201,138,82,0.16); color: #9a5e2c; border-color: rgba(201,138,82,0.45); }
.tag-loam { background: rgba(110,84,64,0.14); color: var(--loam); border-color: rgba(110,84,64,0.35); }
.tag-water { background: rgba(62,124,166,0.14); color: #2f6488; border-color: rgba(62,124,166,0.4); }
.tag-red { background: rgba(154,63,48,0.12); color: #9a3f30; border-color: rgba(154,63,48,0.35); }

/* ===== 8. ФОРМЫ / ИНПУТЫ ===== */
.field-input {
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: 5px;
  color: var(--ink); padding: 0.5rem 0.75rem;
  font-family: var(--font-public-sans), system-ui, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-input::placeholder { color: var(--ink-faint); opacity: 0.7; }
.field-input:focus {
  outline: none; background: #fff; border-color: var(--slate-core-2);
  box-shadow: 0 0 0 3px rgba(53,92,86,0.16);
}

.example-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; line-height: 1.35; text-align: left;
  background: linear-gradient(180deg, #fbf3e3 0%, #f6ead2 100%);
  color: var(--loam); border: 1px dashed var(--ochre); border-radius: 5px;
  padding: 0.4rem 0.6rem; cursor: pointer;
  transition: transform .12s ease, border-color .15s ease,
              background .15s ease, box-shadow .15s ease;
}
.example-chip:hover {
  border-color: var(--terracotta);
  background: linear-gradient(180deg, #fcefdb 0%, #f4e2c4 100%);
  box-shadow: 0 4px 12px -8px rgba(176,106,59,0.6);
}
.example-chip:active { transform: scale(0.98); }

/* ===== 9. РАЗДЕЛИТЕЛИ ===== */
.journal-rule {
  height: 0; border: 0; border-top: 1.5px solid var(--rule); position: relative;
}
.journal-rule--dotted { border-top: 1.5px dashed var(--rule-strong); }

.contour-divider {
  display: flex; align-items: center; gap: 0.75rem; color: var(--ink-faint);
}
.contour-divider::before, .contour-divider::after {
  content: ""; flex: 1; height: 6px; opacity: 0.7;
  background-image: repeating-linear-gradient(90deg,
    var(--rule-strong) 0 1px, transparent 1px 6px);
}

/* ===== 10. СПЕЦ-ЭЛЕМЕНТЫ (геология) ===== */

/* Глубинный гейдж */
.depth-gauge {
  position: relative; height: 10px; border-radius: 3px;
  background: var(--paper-3); border: 1px solid var(--rule-strong); overflow: hidden;
}
.depth-gauge__fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(180deg, var(--ochre) 0%, var(--terracotta) 60%, var(--loam) 100%);
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.depth-gauge__ticks {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 calc(20% - 1px),
    rgba(43,38,34,0.25) calc(20% - 1px) 20%);
}

/* Геологические текстуры */
.hatch-dots {
  background-image: radial-gradient(rgba(43,38,34,0.35) 1px, transparent 1.4px);
  background-size: 9px 9px;
}
.hatch-diag {
  background-image: repeating-linear-gradient(45deg,
    rgba(43,38,34,0.3) 0 1px, transparent 1px 7px);
}
.hatch-cross {
  background-image:
    repeating-linear-gradient(45deg, rgba(43,38,34,0.28) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, rgba(43,38,34,0.28) 0 1px, transparent 1px 8px);
}
.hatch-brick {
  background-image:
    linear-gradient(rgba(43,38,34,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,38,34,0.3) 1px, transparent 1px);
  background-size: 14px 8px;
}
.hatch-wave {
  background-image: repeating-linear-gradient(0deg,
    rgba(255,255,255,0.35) 0 2px, transparent 2px 6px);
}

/* ===== 11. АНИМАЦИИ ===== */
@keyframes drill-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }
.drill-bit { animation: drill-bob 1.2s ease-in-out infinite; }

@keyframes auger-spin { to { transform: rotate(360deg) } }
.auger-spin { animation: auger-spin 1.4s linear infinite; }

@keyframes fade-in-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.animate-fade-in { animation: fade-in-up .22s ease-out both; }

@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:0.45} }
.animate-pulse-soft { animation: pulse-soft 1.5s ease-in-out infinite; }

@keyframes paper-shimmer { 0%{background-position:-180% 0} 100%{background-position:180% 0} }
.skeleton {
  background: linear-gradient(90deg, var(--paper-3) 25%, #f3ecdd 37%, var(--paper-3) 63%);
  background-size: 200% 100%;
  animation: paper-shimmer 1.6s ease-in-out infinite; border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 12. СКРОЛЛБАР ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(110,84,64,0.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(110,84,64,0.35); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(110,84,64,0.55); }

/* ===== 13. LAYOUT ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  position: relative;
  z-index: 1;
  padding: 4rem 0;
}

/* ===== 14. УТИЛИТЫ ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }