/* ===== Tabellini Basket — sistema visivo (bianco-rosso, pulito) ===== */

:root {
  /* Brand */
  --red:       #D7202C;
  --red-700:   #A8121C;
  --red-600:   #C01824;
  --red-tint:  #FCE9EA;
  --red-tint2: #F7D4D7;

  /* Neutrals */
  --ink:    #1A1815;
  --ink-2:  #45413B;
  --muted:  #8C877E;
  --muted-2:#B6B1A8;
  --line:   #E7E4DF;
  --line-2: #D8D4CD;
  --surface:#FFFFFF;
  --bg:     #F5F3EF;
  --bg-2:   #ECE9E3;

  /* Accents (usati con parsimonia) */
  --ok:     #1E9E6A;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(26,24,21,.06), 0 1px 3px rgba(26,24,21,.05);
  --shadow-md: 0 4px 16px rgba(26,24,21,.10), 0 2px 6px rgba(26,24,21,.06);
  --shadow-lg: 0 18px 50px rgba(26,24,21,.18), 0 6px 18px rgba(26,24,21,.10);

  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-num: "Barlow Condensed", var(--font-ui);
}

* { box-sizing: border-box; }

.st-app {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

.st-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Tap feedback — niente outline blu, ma scala viva */
.st-tap { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform .08s ease; }
.st-tap:active { transform: scale(.94); }

/* Floating points (+2 etc.) */
@keyframes st-pop {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
}
.st-float {
  position: absolute;
  left: 50%;
  font-family: var(--font-num);
  font-weight: 700;
  pointer-events: none;
  animation: st-pop 900ms cubic-bezier(.2,.8,.2,1) forwards;
  z-index: 60;
}

@keyframes st-flash { 0%{ box-shadow: 0 0 0 0 var(--red);} 100%{ box-shadow: 0 0 0 14px rgba(215,32,44,0);} }
.st-flash { animation: st-flash 480ms ease-out; }

@keyframes st-ring { 0%{ opacity:.5; transform: scale(.6);} 100%{ opacity:0; transform: scale(1.5);} }

@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-bloom { from { opacity: 0; transform: scale(0); } 70% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes st-hub { from { opacity: 0; transform: translate(-50%,-50%) scale(.5); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes st-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }