/* ============================================================
   HARTA PUTERII — civic transparency platform
   Visual system: modern civic-tech · neutral institutional
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Ink & neutrals */
  /* Editorial neutrals — true greys, no blue tint */
  --ink:        #18191b;   /* near-black */
  --ink-2:      #3c3f44;   /* secondary text */
  --muted:      #74777d;   /* tertiary / captions */
  --faint:      #a2a5ab;
  --line:       #e3e3e4;   /* hairline borders */
  --line-2:     #efefef;
  --bg:         #f5f5f3;   /* paper */
  --bg-2:       #eaeae8;
  --surface:    #ffffff;
  --surface-2:  #fafaf9;

  /* Sole accent — Romanian flag red */
  --accent:     #c1121f;
  --accent-ink: #9c0e18;
  --accent-soft:#fbe9eb;
  --accent-line:#f0cdd1;

  /* Branch palette — calm categorical (for the power map) */
  --c-civic:    #5b6776;   /* Cetățeni — neutral slate */
  --c-legis:    #1f5f8b;   /* Parlament / legislativ — accent blue */
  --c-exec:     #b07d3a;   /* Guvern / Președinte — calm ochre */
  --c-justice:  #2f7d6b;   /* Justiție / control — muted teal-green */
  --c-local:    #6a5a93;   /* Local — soft violet */
  --c-impact:   #41506a;   /* Impact — deep slate-blue */

  --c-civic-soft:   #eceef1;
  --c-legis-soft:   #e8f0f6;
  --c-exec-soft:    #f5ede0;
  --c-justice-soft: #e6f1ee;
  --c-local-soft:   #eeeaf4;
  --c-impact-soft:  #e9edf3;

  /* Legal-status semantics — muted, never tabloid */
  --st-neutral: #6a7585;
  --st-watch:   #b07d3a;   /* anchetat / în verificare */
  --st-process: #b8612e;   /* trimis în judecată / proces */
  --st-grave:   #a23b3b;   /* condamnat definitiv */
  --st-clear:   #2f7d6b;   /* achitat / clasat */

  /* Radii — squared editorial */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 7px;
  --r-xl: 10px;
  /* Shadows — flat; rely on hairline borders */
  --sh-1: 0 1px 1px rgba(0,0,0,.03);
  --sh-2: 0 1px 3px rgba(0,0,0,.05);
  --sh-3: 0 10px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --sh-pop: 0 14px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10);

  --ff-sans: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
#root{ min-height: 100vh; }

::selection{ background: var(--accent-soft); color: var(--accent-ink); }

/* Scrollbars (calm) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: #d6dce4; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: #c3cbd6; background-clip: content-box; }

/* ---------- Typographic helpers ---------- */
.eyebrow{
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.num{ font-family: var(--ff-mono); font-feature-settings: "tnum" 1; }

h1,h2,h3,h4{ margin:0; font-weight: 700; letter-spacing: -.018em; line-height: 1.08; }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .08s;
  white-space: nowrap;
}
.btn:hover{ background: var(--bg-2); border-color: #cfcfcf; }
.btn:active{ transform: translateY(.5px); }
.btn--primary{ background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover{ background: #000; border-color: #000; }
.btn--accent{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover{ background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost{ background: transparent; border-color: transparent; }
.btn--ghost:hover{ background: var(--bg-2); }
.btn--sm{ padding: 6px 12px; font-size: 13px; }

/* ---------- Generic card ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

/* ---------- Chips & badges ---------- */
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.chip:hover{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

.badge{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 5px;
  text-transform: uppercase;
}
.badge .dot{ width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.badge--official{ background: var(--accent-soft); color: var(--accent-ink); }
.badge--media{ background: #f1ece4; color: #8a6a35; }
.badge--legal{ background: var(--c-justice-soft); color: #265f51; }
.badge--unverified{ background: #f0e7e7; color: #8e4a4a; }
.badge--fresh{ background: var(--c-justice-soft); color: #265f51; }
.badge--historic{ background: var(--bg-2); color: var(--muted); }

/* Legal-status chips */
.status{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status .dot{ width:7px; height:7px; border-radius: 999px; background: currentColor; }
.status--neutral{ color: var(--st-neutral); background: var(--bg-2); }
.status--watch{ color: var(--st-watch); background: #f7efe2; }
.status--process{ color: var(--st-process); background: #f7ebe3; }
.status--grave{ color: var(--st-grave); background: #f6e9e9; }
.status--clear{ color: var(--st-clear); background: var(--c-justice-soft); }

/* Confidence badges */
.conf{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.conf .bars{ display:inline-flex; gap:2px; align-items:flex-end; height:13px; }
.conf .bars i{ width:4px; background: currentColor; border-radius:1px; opacity:.25; }
.conf .bars i:nth-child(1){ height:5px; } .conf .bars i:nth-child(2){ height:9px; } .conf .bars i:nth-child(3){ height:13px; }
.conf--high{ color: var(--st-clear); } .conf--high .bars i{ opacity:1; }
.conf--med{ color: var(--st-watch); } .conf--med .bars i:nth-child(1),.conf--med .bars i:nth-child(2){ opacity:1; }
.conf--low{ color: var(--st-process); } .conf--low .bars i:nth-child(1){ opacity:1; }

/* ---------- Layout containers ---------- */
.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* utility */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-20{ gap:20px; } .gap-24{ gap:24px; }
.grow{ flex:1; } .center{ align-items:center; justify-content:center; }
.muted{ color: var(--muted); } .ink2{ color: var(--ink-2); }

/* fade/slide entrance */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes drawerIn{ from{ opacity:0; transform: translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform: translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }