/* ============================================================
   Sinh Vũ — Logo & symbol sizing tokens
   Governs how the lockup and the mark (symbol) are sized across
   brand-identity placements. Never render the lockup below
   --logo-h-min or the symbol below --symbol-min.
   ============================================================ */

:root {
  /* ---- Full lockup (mark + wordmark) — measured by HEIGHT ---- */
  --logo-h-min: 22px;   /* absolute minimum — wordmark still legible */
  --logo-h-sm:  28px;   /* dense UI: app top bars, dashboards */
  --logo-h-md:  36px;   /* standard: site nav, headers */
  --logo-h-lg:  48px;   /* prominent: auth / hero / brand panels */
  --logo-h-xl:  72px;   /* feature moments: covers, splash */
  --logo-h-max: 120px;  /* do not exceed in screen UI */

  /* ---- Symbol / mark (the faceted “S”) — measured by SIZE (square) ---- */
  --symbol-min: 16px;   /* favicon / inline mark minimum */
  --symbol-sm:  24px;   /* avatar, list mark, tab */
  --symbol-md:  40px;   /* app icon, card mark */
  --symbol-lg:  64px;   /* watermark, section mark */
  --symbol-xl:  96px;   /* feature seal */

  /* ---- Clear space ---- expressed as a fraction of the mark height.
     Keep at least this much empty space on all four sides. */
  --logo-clearspace: 0.5; /* @kind other */
}