:root{
  /* ===========================
     ASR UI TOKENS (Bootstrap-first)
     Define ONLY variables here.
     No element selectors in :root.
     =========================== */

  /* Brand / Accent */
  --asr-primary: #ffa500;                 /* orange (true) */
  --asr-primary-600: #e69500;
  --asr-primary-700: #cc8200;
  --asr-primary-soft: rgba(255,165,0,.12);
  --asr-primary-soft-2: rgba(255,165,0,.18);
  --asr-primary-border: rgba(255,165,0,.35);

  /* Ink / Text */
  --asr-ink: #111827;                      /* near-black */
  --asr-ink-2: #1f2937;                    /* slate */
  --asr-muted: #6b7280;                    /* muted text */
  --asr-muted-2: #4b5563;                  /* stronger muted */
  --asr-link: #1f2937;
  --asr-link-hover: #111827;

  /* Backgrounds / Surfaces */
  --asr-bg: #f4f5f7;                       /* page background */
  --asr-surface: #ffffff;                  /* cards / navbar */
  --asr-surface-2: #fbfbfc;                /* subtle panel */
  --asr-surface-3: #f8fafc;                /* very light */
  --asr-soft: rgba(17,24,39,.04);          /* neutral soft bg */

  /* Borders */
  --asr-border: rgba(17,24,39,.14);
  --asr-border-2: rgba(17,24,39,.10);
  --asr-border-strong: rgba(17,24,39,.18);

  /* Shadows (very restrained) */
  --asr-shadow: 0 10px 28px rgba(17,24,39,.10);
  --asr-shadow-soft: 0 6px 16px rgba(17,24,39,.08);
  --asr-shadow-xs: 0 2px 8px rgba(17,24,39,.06);

  /* Radius */
  --asr-radius: 12px;                       /* base */
  --asr-radius-sm: 10px;
  --asr-radius-lg: 16px;
  --asr-pill: 999px;

  /* Spacing (optional tokens) */
  --asr-gap-1: .25rem;
  --asr-gap-2: .5rem;
  --asr-gap-3: .75rem;
  --asr-gap-4: 1rem;
  --asr-gap-5: 1.25rem;
  --asr-gap-6: 1.5rem;

  /* Typography */
  --asr-font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --asr-font-brand: Montserrat, Inter, system-ui, sans-serif;

  --asr-h1: clamp(2rem, 3.2vw, 2.6rem);
  --asr-h2: clamp(1.6rem, 2.4vw, 2.1rem);
  --asr-h3: 1.35rem;

  --asr-lead: 1.05rem;
  --asr-small: .92rem;

  /* Lines */
  --asr-line: 1.55;
  --asr-line-tight: 1.2;

  /* Focus ring */
  --asr-focus: 0 0 0 .20rem rgba(255,165,0,.28);

  /* Components tokens */
  --asr-nav-bg: rgba(255,255,255,.96);
  --asr-ribbon-bg: #ffffff;

  --asr-card-bg: var(--asr-surface);
  --asr-card-header-bg: #ffffff;

  --asr-form-bg: #ffffff;

  /* Buttons (Bootstrap overrides helpers) */
  --asr-btn-radius: 8px;
  --asr-btn-shadow: 0 8px 18px rgba(255,165,0,.18);

  /* Alerts */
  --asr-warning-bg: rgba(245,158,11,.10);
  --asr-warning-border: rgba(245,158,11,.25);
  --asr-info-bg: rgba(59,130,246,.08);
  --asr-info-border: rgba(59,130,246,.20);

  /* Pills */
  --asr-pill-bg: rgba(17,24,39,.06);
  --asr-pill-border: rgba(17,24,39,.12);
}

/* STOP HERE (next line in your file must be exactly this) */
html,body{height:100%;}

/* ===============================
   BASE
   =============================== */

body{
  font-family: var(--asr-font-sans);
  color: var(--asr-ink);
  background:
    linear-gradient(
      180deg,
      rgba(255,165,0,.06) 0%,
      rgba(255,165,0,.02) 180px,
      #f4f5f7 100%
    );
  overflow-x:hidden;
  line-height: var(--asr-line);
}

.brand-font{
  font-family: var(--asr-font-brand);
  letter-spacing:-.015em;
}

.text-muted-2{
  color: var(--asr-muted)!important;
}

a{
  color: var(--asr-link);
  text-decoration:none;
}
a:hover{
  color: var(--asr-link-hover);
}





/* ===============================
   CONTEXT GENERAL PUBLIC LAYOUT
   =============================== */

body.bg-body{
	background-color:#fdf6ee; /* portocaliu foarte deschis, serios */
	color:#111827;
}

/* MAIN content – zonă clară */
main{
	min-height:60vh;
	background:transparent;
}

/* Secțiuni publice */
main > section{
	background:transparent;
}

/* Footer – sobru, instituțional */
footer{
	background:#fff;
}

/* Ribbon – separare mai clară */
.ribbon{
	background:linear-gradient(
		90deg,
		rgba(255,165,0,.18),
		rgba(255,165,0,.08)
	);
}






/* =====================================================
   TOP BAR / RIBBON – INSTITUȚIONAL
   DOAR pentru layouts.public.top_bar
   ===================================================== */

.ribbon{
  background: #f8f9fb;
  border-bottom: 1px solid rgba(17,24,39,.12);
  font-size: .9rem;
}

/* containerul rămâne Bootstrap */

/* pill – bază */
.ribbon .pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  padding:.35rem .75rem;
  border-radius: 6px;            /* 🔴 NU pill rotund */
  font-weight: 600;

  background: #ffffff;
  border: 1px solid rgba(17,24,39,.18);
  color: #111827;
}

/* icon */
.ribbon .pill i{
  font-size:.9rem;
  opacity:.8;
}

/* pill principal (partid) */
.ribbon .pill-primary{
  background: rgba(255,165,0,.10);   /* portocaliu discret */
  border-color: rgba(255,165,0,.35);
  color: #111827;
}

/* pill informativ */
.ribbon .pill-muted{
  background: #ffffff;
  border-color: rgba(17,24,39,.14);
  color: #374151;
}

/* pe ecrane mici – aerisire */
@media (max-width: 576px){
  .ribbon .pill{
    font-size:.85rem;
    padding:.3rem .6rem;
  }
}





/* ===============================
   NAVBAR – RAFINARE VIZUALĂ
   =============================== */

.navbar-brand img{
	opacity:.92;
}

.navbar-brand:hover img{
	opacity:1;
}

.navbar-asr{
	background:rgba(255,255,255,.94);
	border-bottom:1px solid rgba(17,24,39,.12);
}

/* CTA din navbar */
.navbar .btn-asr{
	font-size:.95rem;
	letter-spacing:.02em;
}

/* Pe mobil – CTA clar separat */
@media (max-width: 991px){
	.navbar-nav{
		padding-top:.75rem;
	}
}










/* ===============================
   HERO – INSTITUȚIONAL
   =============================== */

.hero-card{
	background:#fff;
	border:1px solid rgba(17,24,39,.14);
	border-radius: 22px;
	box-shadow: 0 20px 50px rgba(17,24,39,.10);
}

.badge-soft{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	padding:.35rem .7rem;
	border-radius:999px;
	font-weight:700;
	font-size:.85rem;
	background:rgba(255,165,0,.12);
	border:1px solid rgba(255,165,0,.28);
	color:#111827;
}

.hero-meta{
	display:flex;
	align-items:center;
	gap:.6rem;
	padding:.6rem .75rem;
	border-radius:14px;
	border:1px solid rgba(17,24,39,.14);
	background:#fff;
	font-size:.88rem;
}

.hero-meta i{
	font-size:1.25rem;
	color:orange;
}

.hero-panel{
	background:#fff;
	border:1px solid rgba(17,24,39,.14);
	border-radius:18px;
	padding:1rem;
}

.hero-placeholder{
	background:rgba(17,24,39,.04);
	border-radius:14px;
	color:rgba(17,24,39,.75);
}

.hero-placeholder i{
	color:orange;
}










/* ===============================
   FOOTER – TON INSTITUȚIONAL
   =============================== */

footer{
	background:#fff;
	border-top:1px solid rgba(17,24,39,.14);
}

footer img{
	transition: opacity .18s ease;
}

footer img:hover{
	opacity:1;
}

.footer-link{
	color: rgba(17,24,39,.72);
	font-weight:700;
	text-decoration:none;
	position:relative;
}

.footer-link:hover{
	color: orange;
}

/* Linie discretă pe hover */
.footer-link::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-2px;
	width:0;
	height:1px;
	background: orange;
	transition: width .18s ease;
}

.footer-link:hover::after{
	width:100%;
}














/* ===============================
   CARDURI – PRINCIPII POLITICE
   =============================== */

.card-principiu{
	background:#fff;
	border:1px solid rgba(17,24,39,.14);
	box-shadow:0 10px 24px rgba(17,24,39,.06);
}

.card-principiu:hover{
	box-shadow:0 16px 40px rgba(17,24,39,.10);
}

.principiu-icon{
	width:40px;
	height:40px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,165,0,.12);
	border:1px solid rgba(255,165,0,.30);
	color:orange;
}

.principiu-icon i{
	font-size:1.2rem;
}