/* ── BTPoggi.it — Global Styles ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap&font-display=swap');

:root {
  --bg:       #faf8f4;
  --surface:  #ffffff;
  --surface2: #f3f0ea;
  --ink:      #1c1a17;
  --ink2:     #3d3a34;
  --muted:    #8c8880;
  --border:   #e8e4db;
  --border2:  #d8d3c8;
  --green:    #1e6b42;
  --green2:   #2d9456;
  --green-bg: #eaf4ee;
  --amber:    #a85e0a;
  --amber-bg: #fef4e0;
  --red:      #b83a24;
  --red-bg:   #fdf0ed;
  --blue:     #1a3d8a;
  --blue-bg:  #eef3fc;
  --serif:    'Fraunces', Georgia, serif;
  --sans:     'DM Sans', sans-serif;
  --mono:     'DM Mono', monospace;
  --r:        12px;
  --r-sm:     7px;
  --sh:       0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --sh-lg:    0 2px 8px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.09);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--sans); cursor: pointer; border: none; }
input, select { font-family: var(--sans); }

/* ── TAGS ── */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.t-g  { background: var(--green-bg); color: var(--green); }
.t-r  { background: var(--red-bg);   color: var(--red);   }
.t-a  { background: var(--amber-bg); color: var(--amber); }
.t-b  { background: var(--blue-bg);  color: var(--blue);  }
.t-m  { background: var(--surface2); color: var(--muted); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; transition: all .2s; border: none; cursor: pointer; }
.btn-ink    { background: var(--ink);    color: #fff; }
.btn-ink:hover    { background: var(--ink2); transform: translateY(-1px); }
.btn-green  { background: var(--green);  color: #fff; }
.btn-green:hover  { background: var(--green2); transform: translateY(-1px); }
.btn-ghost  { background: transparent; border: 1.5px solid var(--border2); color: var(--ink); }
.btn-ghost:hover  { border-color: var(--ink); }
.btn-sm { padding: 5px 12px; font-size: 11px; }
.btn-full { width: 100%; justify-content: center; }

/* ── INPUTS ── */
.inp { width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; font-size: 14px; color: var(--ink); outline: none; transition: all .2s; -webkit-appearance: none; appearance: none; }
.inp:focus { border-color: var(--green2); background: var(--surface); box-shadow: 0 0 0 3px rgba(45,148,86,.1); }

/* ── CARDS ── */
.card { background: var(--surface); border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh); }
.card-hd { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-hd h3 { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.card-bd { padding: 20px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }