/* ============================================================================
   Snippet-only glue — NOT product CSS.
   Adapts the verbatim LWC stylesheets (dc-brand.css / dc-shell.css /
   dc-home.css) to a plain HTML page:

   1. body stands in for the LWC :host (font, color, app canvas).
   2. The icon rules below are copied verbatim from SLDS
      (salesforce-lightning-design-system.min.css) so the <lightning-icon>
      markup in these snippets renders exactly like the base component does
      in Lightning Experience — including the --slds-c-icon-* styling-hook
      overrides that the product CSS already sets (dc-nav-tab, dc-fav-icon,
      dc-home-groups-pill, dc-row-icon-tile, …).
   Icons reference the official SLDS SVG sprites in assets/icons/ (downloaded
   from @salesforce-ux/design-system). Serve these pages over HTTP — <use>
   sprite references do not resolve from file://.

   NOTE on fonts: in the org, Ledger inherits Salesforce Sans from LEX. The
   token stack in dc-brand.css falls back to system fonts outside Salesforce;
   Salesforce Sans is licensed and not redistributable here.
   ============================================================================ */

body {
  margin: 0;
  font-family: var(--dc-font-sans);
  /* LEX/SLDS base font-size — rules like `font: inherit` (dc-home-groups-pill)
     resolve against this in the org, not the browser's 16px default. */
  font-size: 0.8125rem;
  color: var(--dc-fg-1);
  background: var(--dc-bg-app);
}

/* Snippet pages add breathing room around isolated fragments. */
.snippet-stage {
  padding: 24px;
}
.snippet-caption {
  margin: 14px 0 0;
  font: 400 12px/1.4 var(--dc-font-sans);
  color: var(--dc-fg-3);
}

/* ---- lightning-icon equivalents (rules lifted from SLDS) ----------------- */
lightning-icon {
  display: inline-flex;
  line-height: 1;
}

.slds-icon_container {
  display: inline-block;
  border-radius: var(--slds-c-icon-radius-border, var(--sds-c-icon-radius-border, 0.25rem));
  line-height: 1;
  background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, transparent));
}

.slds-icon {
  width: var(--slds-c-icon-sizing-width, 2rem);
  height: var(--slds-c-icon-sizing-height, 2rem);
  fill: var(
    --slds-c-icon-color-foreground,
    var(--sds-c-icon-color-foreground, var(--slds-g-color-neutral-base-100, #fff))
  );
}

/* Utility icons (no variant) — default gray, overridable per container via
   --slds-c-icon-color-foreground-default, exactly as in LEX. */
.slds-icon-text-default {
  --slds-c-icon-color-foreground: var(
    --slds-c-icon-color-foreground-default,
    var(--sds-c-icon-color-foreground-default, var(--slds-g-color-neutral-base-50, rgb(116, 116, 116)))
  );
}

.slds-current-color .slds-icon {
  --slds-c-icon-color-foreground: currentColor;
}

.slds-icon_xx-small {
  width: var(--slds-c-icon-sizing-width, 0.875rem);
  height: var(--slds-c-icon-sizing-height, 0.875rem);
  line-height: 1;
}
.slds-icon_x-small {
  width: var(--slds-c-icon-sizing-width, 1rem);
  height: var(--slds-c-icon-sizing-height, 1rem);
  line-height: 1;
}
.slds-icon_small {
  width: var(--slds-c-icon-sizing-width, 1.5rem);
  height: var(--slds-c-icon-sizing-height, 1.5rem);
  line-height: 1;
}

/* Standard-object icon tiles (colors from SLDS) */
.slds-icon-standard-lead {
  background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, #1b96ff));
}
.slds-icon-standard-contact {
  background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, #9602c7));
}
.slds-icon-standard-account {
  background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, #5867e8));
}