/* Palette (vicine tra loro)
   --olive:    #6B7F4A
   --sage:     #D4E3C1
   --khaki:    #C9BE6C
   --taupe:    #7A695A
   --brown:    #5A3B33
   --paper:    #F7F5EA  (neutro caldo per lo sfondo)
   --ink:      #2F2A25  (testo scuro)
*/

:root{
  --olive:#6B7F4A;
  --sage:#D4E3C1;
  --khaki:#C9BE6C;
  --taupe:#7A695A;
  --brown:#5A3B33;
  --paper:#F7F5EA;
  --ink:#2F2A25;
  --khaki-a88: rgba(201,190,108,.88); /* khaki 88% */
  --brown-a92: rgba(90,59,51,.92);    /* brown 92% */
}

/* Base */
*{ box-sizing:border-box; }
body{
  font-family: Arial, sans-serif;
  margin:0; padding:0;
  background-color: var(--paper);
  color: var(--ink);
}
main{ padding:1rem; }

/* Header (khaki, vicino al verde della navbar) */
header{
  background-color: var(--khaki-a88);
  color: var(--paper);
  padding: 2rem 0 1.25rem;
  text-align: center;
  border-bottom: 2px solid var(--khaki);
  /* opzionale: leggerissimo glass per pulire il tono */
  -webkit-backdrop-filter: blur(1px) saturate(110%);
  backdrop-filter: blur(1px) saturate(110%);
}

/* Footer (marrone scuro, vicino al taupe dei bordi) */
footer{
  background-color: var(--brown);
  color: var(--paper);
  text-align:center;
  padding:1rem 0;
  bottom:0; width:100%;
}

/* Titoli: olive per h2, marrone per h1 per gerarchia e contrasto */
h1, h2{ margin:0 0 .5rem; }
h1{ color: var(--brown); }
h2{ color: var(--olive); }

/* Navbar (olive) con link chiari; hover vicino: khaki */
/* NAV: come il footer, con accenti verdi */
nav.navbar{
  background-color: var(--brown-a92);
  border-bottom: 3px solid var(--olive);
}

/* link invariati */
nav .nav-link{
  color: var(--paper) !important;
  text-decoration: none;
  padding: .9rem 0;
  font-weight: 500;
}
nav .nav-link:hover{ color: var(--khaki) !important; }
nav .nav-link.active{ box-shadow: inset 0 -3px 0 var(--khaki); }


/* Form */
label{ display:block; margin:.5rem 0; }
input, textarea{
  width:100%;
  padding:.5rem;
  margin:.5rem 0;
  border:1px solid var(--taupe);
  border-radius:0; /* niente bordi arrotondati */
  background:#fff;
  color: var(--ink);
}
input:focus, textarea:focus{
  outline:2px solid #6b7f4a55; /* olive trasparente */
}

/* Submit / Primary button */
input[type="submit"], .btn-primary{
  background-color: var(--olive) !important;
  color: var(--paper) !important;
  border:1px solid var(--olive) !important;
  padding:.75rem;
  cursor:pointer;
  border-radius:0; /* no radius */
}
input[type="submit"]:hover, .btn-primary:hover{
  background-color: var(--taupe) !important;   /* vicino al brown */
  border-color: var(--taupe) !important;
}

/* Cards: salvia come base, bordi taupe; hover verso khaki */
.card{ display:flex; flex-direction:column; height:100%; border:none; }
.card-body{
  background-color: var(--sage);
  border:1px solid var(--taupe);
  flex:1;
  transition: background-color .15s ease;
  border-radius:0;
}
.card-body:hover{
  background-color: var(--khaki);
}
.card-title{ color: var(--brown); }
.card-text{
  color: var(--ink);
  margin-top:auto;
}

/* Evidenze GitHub */
.github-highlight{
  background-color:#24292e;
  opacity:.9;
  color:#ffffff;
  padding:15px;
  border-radius:0;
}
.github-highlight a{
  color: var(--khaki);
  font-weight:bold;
}
