/* ════════ SPACING · RADII · SHADOWS · LAYOUT TOKENS ════════
 * Calm, even rhythm. Pill controls (999px), 12–20px cards, layered
 * low-contrast shadows tinted green on the CTA. Page is capped at
 * 1280px with a responsive edge gutter.
 */
:root {
  /* ── Spacing scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --pad: 1.5rem;      /* default card padding */
  --gutter: 1.25rem;  /* default grid gap */

  /* ── Padding logic ──────────────────────────────────────────────
   * A single rhythm governs every padded surface in SNQ.
   *
   * CONTROLS (buttons, pills, search submit): horizontal padding is
   * ~1.7× the vertical, so pill controls read wide and calm. Vertical
   * scales with size; icon-only controls collapse to a square (pad-y
   * on all four sides) so the glyph sits centered in a circle.
   *
   * CARDS (項目卡片 / item cards): 18px on the sides, a slightly tighter
   * top (12–14px) than bottom (16px) so the media meets the body
   * cleanly and the last metric row breathes. Media wells are full
   * bleed (zero padding). Never pad a card body less than 12px.
   */
  --btn-pad-y-sm: 0.45rem;  --btn-pad-x-sm: 0.85rem;  /* 7.2 × 13.6 */
  --btn-pad-y-md: 0.65rem;  --btn-pad-x-md: 1.1rem;   /* 10.4 × 17.6  (matches nav CTA) */
  --btn-pad-y-lg: 0.8rem;   --btn-pad-x-lg: 1.5rem;   /* 12.8 × 24    (matches search submit) */

  --card-pad-x: 18px;         /* item-card side padding */
  --card-pad-top: 14px;       /* item-card body top */
  --card-pad-bottom: 16px;    /* item-card body bottom */
  --card-pad: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);

  /* ── Radii ── */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ── Shadows (low-contrast, layered) ── */
  --shadow-1: 0 1px 2px rgba(12,31,23,.04), 0 2px 8px rgba(12,31,23,.04);
  --shadow-2: 0 2px 6px rgba(12,31,23,.05), 0 12px 32px rgba(12,31,23,.07);
  --shadow-cta: 0 1px 2px rgba(4,104,56,.22), 0 8px 20px rgba(24,133,76,.28);

  /* ── Layout ── */
  --maxw: 1280px;
  --edge: 34px;       /* page horizontal gutter — steps down responsively */

  /* ── Motion (low animation, high clarity) ── */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur: .15s;      /* @kind other */
  --dur-slow: .25s; /* @kind other */
}

@media (max-width: 1024px) { :root { --edge: 28px; } }
@media (max-width: 600px)  { :root { --edge: 20px; } }
@media (max-width: 400px)  { :root { --edge: 16px; } }