/* UI Kit shared — extends colors_and_type.css with component-level utilities */
@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px/1 var(--font-sans); padding: 0 14px; height: 36px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: all 160ms var(--ease-out); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.btn-primary { background: var(--indigo-950); color: #fff; }
.btn-primary:hover { background: var(--indigo-800); }
.btn-secondary { background: #fff; color: var(--fg); border-color: #D8D6CE; }
.btn-secondary:hover { background: var(--neutral-100); }
.btn-tertiary { background: transparent; color: var(--fg); }
.btn-tertiary:hover { background: var(--neutral-100); }
.btn-success { background: var(--forest-700); color: #fff; }
.btn-success:hover { background: var(--forest-800); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 8px; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* ---------- Inputs ---------- */
.input { height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid #D8D6CE; background: #fff; font: 400 14px var(--font-sans); color: var(--fg); outline: none; width: 100%; transition: all 140ms; }
.input:focus { border-color: var(--indigo-700); box-shadow: var(--shadow-focus); }
.label { font-size: 12px; font-weight: 500; color: var(--fg-muted); }

/* ---------- Card ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-xs); }
.card-pad { padding: 18px 20px; }

/* ---------- Badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: -0.003em; }
.badge-success { background: var(--forest-100); color: var(--forest-800); }
.badge-info    { background: var(--indigo-100); color: var(--indigo-800); }
.badge-warn    { background: var(--amber-100); color: var(--amber-500); }
.badge-neutral { background: var(--neutral-200); color: var(--neutral-800); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- Bracket motif ---------- */
.brackets { position: relative; }
.brackets::before, .brackets::after, .brackets > .bl-brk, .brackets > .br-brk { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--indigo-950); pointer-events: none; }
.brackets::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.brackets::after  { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.brackets > .bl-brk { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }
.brackets > .br-brk { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

/* Caption label */
.caps { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); font-weight: 500; }
.metric-val { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; font-weight: 600; }

/* ---------- Map visuals ---------- */
.map-canvas {
  background:
    radial-gradient(circle at 30% 20%, #5C6B4E 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, #6E7A5A 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, #4B5840 0%, transparent 40%),
    linear-gradient(135deg, #3E4A35 0%, #4B5840 50%, #5C6B4E 100%);
  position: relative; overflow: hidden;
}
.map-canvas::before { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 14px 14px; pointer-events:none; }

/* ---------- Scroll reset ---------- */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }