/* ============================================================
   Sinh Vũ — Iconography
   PRIMARY: Phosphor Icons (refined line icons — calm, crafted,
   precise). Regular is the default weight; Light is used for large
   editorial moments; Bold/Fill for active & status accents.
   SECONDARY: Font Awesome 6 — common utility & social glyphs only.
   OPTIONAL: Material Symbols — functional UI states if needed
   (opt-in: add its <link> per page; the Icon component supports it).

   Loaded once here (via styles.css) so every card, component and UI
   kit inherits the system. Use the <Icon> component, or directly:
     <i class="sv-icon ph ph-compass"></i>          (Phosphor regular)
     <i class="sv-icon ph-light ph-compass"></i>    (Phosphor light)
     <i class="sv-icon fa-brands fa-instagram"></i> (social, via FA)
   ============================================================ */

/* Phosphor — primary (regular + light + bold + fill) */
@import url('../vendor/phosphor-2.1.1/regular/style.css');
@import url('../vendor/phosphor-2.1.1/light/style.css');
@import url('../vendor/phosphor-2.1.1/bold/style.css');
@import url('../vendor/phosphor-2.1.1/fill/style.css');
/* Font Awesome: gỡ 21/10/2026, 0 trang công khai dùng (103 KB chặn vẽ từ cdnjs). Trang mẫu nội bộ design-system-v3 vẫn giữ bản riêng. */

:root {
  --icon-sm: 16px;  /* @kind other */
  --icon-md: 20px;  /* @kind other */
  --icon-lg: 26px;  /* @kind other */
  --icon-xl: 34px;  /* @kind other */
}

.sv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit;
  font-size: var(--icon-md);
  vertical-align: -0.12em;
}
.sv-icon--sm { font-size: var(--icon-sm); }
.sv-icon--md { font-size: var(--icon-md); }
.sv-icon--lg { font-size: var(--icon-lg); }
.sv-icon--xl { font-size: var(--icon-xl); }

/* Refined bordered icon chip used across cards (services, dashboard, etc.) */
.sv-iconchip {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong);
  color: var(--text-brand);
  background: var(--surface-card);
  position: relative;
}
.sv-iconchip .sv-icon { font-size: 24px; }
.sv-iconchip::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-bottom-right-radius: var(--radius-md);
}
[data-theme="dark"] .sv-iconchip { color: var(--color-warm-cream); }