/* Humanized UI layer — adds subtle, handcrafted touches */
:root{
  --human-bg:#fbfaf7;
  --human-paper:#ffffff;
  --human-accent:#2563eb;
  --human-warm:#f7ecd6;
  --human-muted:#6b7280;
}

/* gentle paper texture using gradients for a less 'perfect' flat look */
body{
  background-color:var(--human-bg);
  background-image:radial-gradient(circle at 10% 10%, rgba(34,197,94,0.02), transparent 10%),
                   radial-gradient(circle at 90% 90%, rgba(59,130,246,0.02), transparent 12%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #0f172a;
}

/* Cards and panels */
.panel, .card, .cv-container, .cv-preview {
  background: var(--human-paper);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.04);
  box-shadow: 0 18px 50px rgba(15,23,42,0.06);
}

/* Headings feel more crafted */
h1, h2, h3 { color:#0b1220; font-weight:700; }
h1 { font-family: 'Playfair Display', serif; font-size:2.6rem; }
h2 { font-family: 'Playfair Display', serif; font-size:1.6rem; }

/* Subtle underline flourish for headings */
.title-flourish{position:relative;display:inline-block}
.title-flourish::after{content:'';position:absolute;left:0;right:30%;bottom:-8px;height:3px;background:linear-gradient(90deg,var(--human-accent),#06b6d4);border-radius:2px;opacity:0.95}

/* Buttons with soft, tactile feel */
.btn-human{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid rgba(15,23,42,0.06);background:linear-gradient(180deg,#ffffff,#fbfbfd);box-shadow:0 10px 30px rgba(15,23,42,0.06);cursor:pointer;transition:transform 160ms ease,box-shadow 160ms ease}
.btn-human:active{transform:translateY(1px);box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.btn-human.primary{background:linear-gradient(135deg,var(--human-accent),#06b6d4);color:#fff;border:none;box-shadow:0 14px 40px rgba(37,99,235,0.14)}

/* Forms — rounded with softer focus */
input[type="text"], input[type="email"], textarea, select {
  border-radius:10px;border:1px solid rgba(15,23,42,0.06);padding:10px 12px;background:linear-gradient(180deg,#fff,#fbfbff);transition:box-shadow 180ms ease,border-color 180ms ease
}
input:focus, textarea:focus, select:focus{outline:none;border-color:var(--human-accent);box-shadow:0 8px 28px rgba(56,189,248,0.08)}

/* Micro-interactions */
.tmpl-btn:hover, .btn-human:hover{transform:translateY(-3px)}

/* Hand-crafted separators */
.sep-hand{height:1px;background:linear-gradient(90deg,rgba(15,23,42,0.03),rgba(15,23,42,0.06),rgba(15,23,42,0.03));margin:12px 0;border-radius:2px}

/* Slightly imperfect list bullets to feel human */
ul.human-list{list-style:none;padding-left:0}
ul.human-list li{position:relative;padding-left:22px;margin-bottom:10px}
ul.human-list li::before{content:'';position:absolute;left:6px;top:8px;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--human-accent),#06b6d4);box-shadow:0 1px 0 rgba(255,255,255,0.2)}

/* Footer text warm tone */
.site-footer{color:var(--human-muted);font-size:0.95rem}

/* Reduce over-use of harsh gradients used by AI templates */
.soft-bg{background:linear-gradient(180deg,#ffffff,#fbfbff)}

/* Print friendliness */
@media print{body{background:#fff} .panel,.card{box-shadow:none;border:none}}

/* Small utilities */
.muted{color:var(--human-muted)}
.rounded-lg{border-radius:12px}

/* Enhanced component tweaks: buttons, headings, modals */
.btn-human.large{padding:14px 20px;border-radius:14px;font-size:1rem}
.btn-human.small{padding:8px 12px;border-radius:10px;font-size:0.875rem}
.btn-human.secondary{background:linear-gradient(180deg,#f3f4f6,#f8fafc);color:var(--human-accent);border:1px solid rgba(15,23,42,0.06)}

/* Stronger, elegant heading rhythm */
h1{letter-spacing:-0.02em;margin-bottom:0.4rem}
h2{letter-spacing:-0.01em;margin-bottom:0.35rem}

/* Modal patterns (overlay + centered panel) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,12,15,0.45);backdrop-filter:blur(3px);z-index:10050;padding:20px}
.modal.show{display:flex}
.modal-content{max-width:720px;width:100%;background:var(--human-paper);border-radius:14px;padding:22px;box-shadow:0 30px 80px rgba(2,6,23,0.45);border:1px solid rgba(15,23,42,0.06)}
.modal-close{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--human-muted);font-size:1.1rem;cursor:pointer}
.modal-header{margin-bottom:12px}
.modal-body{margin-bottom:16px}
.modal-footer{display:flex;gap:12px;justify-content:flex-end}

/* Accessible focus ring for interactive elements */
.btn-human:focus, .modal-close:focus, a:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,0.12);border-radius:12px}