/* ====== Vespedia Base Styles (style.css) ====== */

/* CSS Reset (lightweight) */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

/* Design Tokens */
:root{
  --bg: #f6f7f9;
  --card: #ffffff;
  --card-dark: #1a2530;
  --text: #0f172a;
  --muted: #475569;
  --primary: #0d7ff2;
  --primary-700: #0760b8;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(2, 8, 23, 0.06);
  --radius: 16px;
}

/* Base */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

h1{ font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; margin: 0 0 12px; }
h2{ font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; margin: 0 0 10px; }
h3{ font-size: clamp(18px, 2vw, 22px); line-height: 1.3; margin: 0 0 8px; }

/* Layout */
.container{ max-width: 1100px; margin: 0 auto; padding: 20px; }
.wrap{ max-width: 720px; margin: 0 auto; padding: 24px; }

.site-shell{ min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.site-header{ background: var(--card); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; }
.site-header .inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.brand{ font-weight: 800; letter-spacing: 0.4px; color: var(--text); }
.brand mark{ background: linear-gradient(90deg, var(--primary), #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav a{ color: var(--muted); margin-left: 16px; }
.nav a.active, .nav a:hover{ color: var(--text); }

.site-main{ padding: 24px 20px; }
.site-footer{ background: var(--card); border-top: 1px solid var(--border); padding: 24px 20px; color: var(--muted); }

/* Card */
.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card.headline{ padding: 28px; }

/* Forms */
.form-grid{ display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .form-grid.cols-2{ grid-template-columns: 1fr 1fr; } }

label{ font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea, select{
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(13,127,242,0.12); }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease, background .2s, color .2s;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-700); }

/* Utilities */
.center{ text-align: center; }
.muted{ color: var(--muted); }
.spacer-16{ height: 16px; }
.spacer-24{ height: 24px; }
.spacer-32{ height: 32px; }

/* Tables (for search results) */
.table{ width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.table thead th{ background: #f1f5f9; font-weight: 700; }
.table tbody tr:hover{ background: #f8fafc; }

/* Notices */
.notice{ padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.notice.success{ border-color: #16a34a33; background: #16a34a0d; }
.notice.warn{ border-color: #f59e0b33; background: #f59e0b0d; }
.notice.error{ border-color: #ef444433; background: #ef44440d; }

/* Search bar */
.searchbar{ display: flex; gap: 10px; }
.searchbar input[type="search"]{ flex: 1; }

/* Footer small print */
.smallprint{ font-size: 13px; color: var(--muted); }