/*
  KokoroFlow Flow Palette
  Visual-only override: preserves the existing document structure, grid,
  spacing, dimensions, breakpoints, and tool behavior.
*/
:root {
  --bg: #fbfaf4 !important;
  --surface: #ffffff !important;
  --surface-2: #e7f5ee !important;
  --text: #15332e !important;
  --muted: #667d76 !important;
  --line: #d8e6de !important;
  --accent: #1d705f !important;
  --accent-2: #e66f55 !important;
  --accent-soft: #dff2e8 !important;
  --shadow: 0 18px 48px rgba(24, 74, 62, .11) !important;

  --flow-paper: #fbfaf4;
  --flow-white: #ffffff;
  --flow-ink: #15332e;
  --flow-muted: #667d76;
  --flow-green: #1d705f;
  --flow-mint: #cbeadd;
  --flow-mint-soft: #edf8f2;
  --flow-coral: #e66f55;
  --flow-coral-soft: #ffe0d7;
  --flow-blue: #4b728e;
  --flow-blue-soft: #deedf5;
  --flow-gold-soft: #f6e1ad;
  --flow-line: #d8e6de;
  --flow-shadow: 0 18px 48px rgba(24, 74, 62, .11);
}

body {
  color: var(--flow-ink) !important;
  background:
    radial-gradient(circle at 3% 12%, rgba(203,234,221,.55), transparent 25rem),
    radial-gradient(circle at 97% 38%, rgba(255,224,215,.48), transparent 28rem),
    var(--flow-paper) !important;
}

.site-header {
  border-color: rgba(216,230,222,.9) !important;
  background: rgba(251,250,244,.91) !important;
  backdrop-filter: blur(15px) saturate(120%);
  box-shadow: 0 8px 30px rgba(24,74,62,.04);
}

.nav-links a { color: var(--flow-muted) !important; }
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--flow-ink) !important;
  background: var(--flow-mint-soft) !important;
}
.nav-links a.lang-link {
  color: var(--flow-green) !important;
  background: var(--flow-mint-soft) !important;
}

h1, h2, h3, h4 { color: var(--flow-ink) !important; }
.eyebrow { color: var(--flow-coral) !important; }
.lead,
.fine-print,
.muted { color: var(--flow-muted) !important; }

/* Existing hero keeps its original size and position; only its backdrop changes. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26px -34px;
  border-radius: 38% 62% 52% 48% / 50% 42% 58% 50%;
  background:
    radial-gradient(circle at 12% 22%, rgba(203,234,221,.68), transparent 46%),
    radial-gradient(circle at 88% 82%, rgba(255,224,215,.46), transparent 38%);
  pointer-events: none;
}

/* Tool links and homepage cards: same dimensions/layout, richer surfaces. */
.option-card,
.tool-card,
.card,
.feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--flow-line) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,248,242,.82)) !important;
  box-shadow: var(--flow-shadow) !important;
}
.option-card:nth-child(even),
.tool-card:nth-child(3n+2),
.card:nth-child(even) {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,224,215,.48)) !important;
}
.tool-card:nth-child(3n),
.card:nth-child(3n) {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(222,237,245,.62)) !important;
}
.option-card::after,
.tool-card::after,
.card::after,
.feature-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 118px;
  height: 118px;
  right: -55px;
  bottom: -58px;
  border-radius: 48% 52% 38% 62% / 58% 45% 55% 42%;
  background: rgba(203,234,221,.72);
  pointer-events: none;
}
.option-card:nth-child(even)::after,
.tool-card:nth-child(3n+2)::after,
.card:nth-child(even)::after { background: rgba(255,224,215,.82); }
.tool-card:nth-child(3n)::after,
.card:nth-child(3n)::after { background: rgba(222,237,245,.86); }
.option-card:hover,
.tool-card:hover,
.card:hover { border-color: rgba(29,112,95,.38) !important; box-shadow: 0 22px 58px rgba(24,74,62,.15) !important; }
.card-link,
.tool-card a,
.related-links a { color: var(--flow-green) !important; }

/* Introduction, privacy, limits, examples, FAQ and related-tool blocks. */
.section,
.panel,
.info-card,
.guide-block,
.article,
.related,
.result-card,
details {
  border-color: var(--flow-line) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--flow-shadow) !important;
}
.info-card:nth-child(odd),
.guide-block:nth-child(3n+1),
.section:nth-of-type(odd) {
  background: linear-gradient(145deg, #fff, var(--flow-mint-soft)) !important;
}
.info-card:nth-child(even),
.guide-block:nth-child(3n+2) {
  background: linear-gradient(145deg, #fff, rgba(255,224,215,.48)) !important;
}
.example-box,
.guide-block.example-box {
  border-color: rgba(75,114,142,.22) !important;
  background: linear-gradient(145deg, #fff, var(--flow-blue-soft)) !important;
}
.related-links a {
  border-color: var(--flow-line) !important;
  background: var(--flow-mint-soft) !important;
}
.related-links a:hover { background: var(--flow-mint) !important; }

.badge,
.tag {
  border-color: transparent !important;
  color: var(--flow-green) !important;
  background: var(--flow-mint-soft) !important;
}

.dropzone {
  border-color: rgba(29,112,95,.24) !important;
  background:
    linear-gradient(135deg, rgba(237,248,242,.95), rgba(255,255,255,.95) 56%, rgba(255,224,215,.45)) !important;
}
input,
select,
textarea { border-color: var(--flow-line) !important; background-color: #fff !important; }
input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(29,112,95,.2) !important;
  border-color: var(--flow-green) !important;
}
button,
.button,
.btn,
input[type="submit"] {
  border-color: var(--flow-green) !important;
  color: #fff !important;
  background: var(--flow-green) !important;
  box-shadow: 0 10px 24px rgba(29,112,95,.18) !important;
}
button.secondary,
.secondary {
  color: var(--flow-ink) !important;
  border-color: var(--flow-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.site-footer {
  border-color: var(--flow-line) !important;
  color: var(--flow-muted) !important;
  background: rgba(237,248,242,.58) !important;
}

@media (max-width: 720px) {
  .hero::before { inset: -18px -12px; }
  .option-card::after,
  .tool-card::after,
  .card::after,
  .feature-card::after { width: 90px; height: 90px; }
}