/* =========================================
   GuideGuru — variables.css
   Global design tokens + responsive vars
   ========================================= */

/* ===== Color System ===== */
:root{
  --bg:#0a0a0a;            /* page background */
  --card:#121212;          /* card/background surfaces */
  --ink:#ffffff;           /* primary text */
  --muted:#b7b7b7;         /* secondary text */
  --line:#1f1f1f;          /* subtle borders/separators */

  --brand:#2cd38d;         /* accent (green) */
  --ink-inv:#0a0a0a;       /* inverted text on brand */

  --chip:#161616;          /* pill background */
  --chip-active:#2cd38d;   /* active pill */

  --star-filled:#f4c20d;   /* ratings */
  --star-empty:#3a3a3a;

  --toolbar:#0e0e0e;       /* tool/nav bars */
}

/* ===== Typography ===== */
:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
}

/* ===== Spacing ===== */
:root{
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
}

/* ===== Card sizing (mobile-first) ===== */
:root{
  --gg-card-w: 300px;   /* very small phones (≤360px) */
  --gg-card-h: 200px;
  --gg-gap: 12px;
}

/* Responsive steps for cards */
@media (min-width: 375px){
  :root{ --gg-card-w: 320px; --gg-card-h: 210px; }
}
@media (min-width: 414px){
  :root{ --gg-card-w: 340px; --gg-card-h: 220px; }
}
@media (min-width: 600px){
  :root{ --gg-card-w: 320px; --gg-card-h: 210px; } /* allows 2-up with gutters */
}
@media (min-width: 768px){
  :root{ --gg-card-w: 340px; --gg-card-h: 220px; }
}
@media (min-width: 1024px){
  :root{ --gg-card-w: 360px; --gg-card-h: 230px; } /* desktop */
}