/* frontend/styles/base.css */

:root{
  --bg: #f7f8fa;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --blue: #2f6fed;

  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  --header-h: 56px;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Q141 (B) — card responsive */
  --card-w: 132px;
  --card-h: 176px;
}

@media (max-width: 520px){
  :root{
    /* ~2.2 cards visibles + gap */
    --card-w: min(42vw, 170px);
    --card-h: calc(var(--card-w) * 1.33);
  }
}

@media (min-width: 900px){
  :root{
    --card-w: 160px;
    --card-h: 212px;
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
img{ display:block; max-width:100%; }

.hidden{ display:none !important; }