/* The DigitalCandy lockup: `dc`, then `DigitalCandy®` with the lime pixel as the dot of the i.
 * Spec, colours and the do/don't list: docs/brand.md. Every length here is in em of the monogram
 * (`.dc-logo`) or of the wordmark (`.dc-logo__word`, 0.62 of the monogram), as the spec gives them.
 *
 * The faces are subsets of Sora, carried with this stylesheet so the logo does not depend on a page
 * loading Sora itself: two for the mark (the glyphs of "dc DigitalCandy" only) and one for the
 * product's name beside it (.dc-product-name, the Latin letters). Generated by
 * tools/brand/build_brand_assets.py; copied here by tools/brand/sync.sh. */
@font-face {
  font-family: "DC Logo Sora";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/dc-logo-sora-800.woff2") format("woff2");
}
@font-face {
  font-family: "DC Logo Sora";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/dc-logo-sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "DC Label Sora";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/dc-label-sora-600.woff2") format("woff2");
}

.dc-logo {
  --dc-logo-lime: oklch(84% 0.26 132);
  --dc-logo-lime-hi: oklch(92% 0.19 128);
  --dc-logo-lime-lo: oklch(62% 0.21 133);
  /* light surfaces, "ink on paper": the primary expression */
  --dc-logo-ink: oklch(20% 0.02 155);
  --dc-logo-candy: oklch(56% 0.2 133);
  display: inline-flex;
  align-items: baseline;
  flex: none;
  /* The mark never mirrors. On a right-to-left page (the registrar offers Arabic) an inline-flex row
     reverses and the physical margins land on the wrong side: the R before the D, the pixel over the g. */
  direction: ltr;
  unicode-bidi: isolate;
  /* The text holds a dotless i; it is a drawing, not copy to select. */
  -webkit-user-select: none;
  user-select: none;
  font-family: "DC Logo Sora", "Sora", system-ui, sans-serif;
  font-style: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--dc-logo-ink);
  -webkit-font-smoothing: antialiased;
}

/* dark surfaces */
.dc-logo[data-dc-logo-theme="dark"] {
  --dc-logo-ink: oklch(96% 0.01 120);
  --dc-logo-candy: oklch(84% 0.26 132);
}
/* auto: the page's own theme when it declares one on the root element, otherwise the reader's
   system setting. An app with a single fixed ground passes "light" or "dark" instead. */
:root[data-theme="dark"] .dc-logo[data-dc-logo-theme="auto"] {
  --dc-logo-ink: oklch(96% 0.01 120);
  --dc-logo-candy: oklch(84% 0.26 132);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dc-logo[data-dc-logo-theme="auto"] {
    --dc-logo-ink: oklch(96% 0.01 120);
    --dc-logo-candy: oklch(84% 0.26 132);
  }
}

.dc-logo__mono {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Same baseline as the monogram (the parent aligns on it). The gap from the c to the D is 0.5em of
   the wordmark; the monogram's own trailing letter-spacing (0.03em of the monogram = 0.0484em here)
   is given back so the gap is measured from the c, not from its tightened box. */
.dc-logo__word {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: 0.5484em;
}

.dc-logo__candy {
  color: var(--dc-logo-candy);
}

/* The dotless i carries the pixel. */
.dc-logo__i {
  display: inline-block;
  position: relative;
}
/* An empty inline-block sits with its bottom edge on the text baseline in any font. It takes the
   width of the i and is pulled back over it, so the pixel is centred on the stem and its height is
   measured from the baseline, not from the line box (which moves with the font's metrics). */
.dc-logo__dot {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
  margin-right: -100%;
  vertical-align: baseline;
}
.dc-logo__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.6em;
  width: 0.22em;
  height: 0.22em;
  /* Centred on the STEM, not on the letter's box. Sora's dotless i has a flag at its top left: the
     stem runs 0.0985 to 0.259em of a 0.334em advance (tools/brand/dist/brand-tokens.json,
     metrics.wordmark.dotlessIStem), centre 0.17875em. The box here is the advance less the 0.01em
     letter-spacing, centre 0.162em: the stem is 0.01675em to its right. */
  transform: translateX(calc(-50% + 0.01675em));
  background: conic-gradient(
    from 90deg at 50% 50%,
    var(--dc-logo-lime-hi) 25%,
    var(--dc-logo-lime) 0 50%,
    var(--dc-logo-lime-lo) 0 75%,
    var(--dc-logo-lime) 0
  );
  /* Browsers drop backgrounds when printing; without this the printed wordmark reads "Dıgital". */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The drawn ring-R: 0.1em after the y (plus the y's own trailing letter-spacing), 0.46em square,
   its centre at Sora's cap height (0.73em): bottom edge 0.5em above the baseline.
   `display` and `max-width` are stated because host pages reset them for every svg
   (`svg { display: block; max-width: 100% }` in the registrar's base.css and in Tailwind's preflight),
   which dropped the R onto a line of its own. */
.dc-logo__reg {
  display: inline-block;
  width: 0.46em;
  height: 0.46em;
  max-width: none;
  margin-left: 0.11em;
  vertical-align: 0.5em;
  overflow: visible;
}

/* The product's name beside the lockup: REGISTRAR, ESCROW DOMAINS, MARKETPLACE, in an app's top
   bar and on its sign-in cards (docs/brand.md, "The product name beside the logo"). A label next
   to the mark, not part of it: it starts behind a hairline, one clear space (0.592 of the logo's
   size) from the mark on each side of the rule. The default gap clears the 24px navigation logo
   (14.2px); a host with a larger logo sets --dc-product-name-gap.
   Its type is set here and nowhere else, so it is the same in every app at every width: Sora
   SemiBold from this stylesheet's own face (not whatever "Sora" or "Inter" a page loads), 22px, in
   capitals. The capitals are drawn by text-transform, so the page's text stays "Escrow Domains";
   browsers hand the capitals to screen readers, so the label is aria-hidden (or the pair is one
   role="img") and the readable name is in an aria-label. A host gives the label only its ink and
   the rule's colour (`.host .dc-product-name { color; border-inline-start-color }`), puts the mark
   and the label together in an element with the class dc-product-lockup (or
   dc-product-lockup--stacked, below), and leaves no gap of its own between the two. */
.dc-product-name {
  flex: none;
  /* Logical sides: on a right-to-left page the label follows the mark on its left. */
  margin-inline-start: var(--dc-product-name-gap, 16px);
  padding-inline-start: var(--dc-product-name-gap, 16px);
  border-inline-start: 1px solid currentColor;
  font-family: "DC Label Sora", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The mark and the name side by side, laid out here for every app: one row, the name centred on the
   mark, no gap of the host's (the label brings its own clear space and rule). The host adds only
   its own sizing and ink. The doubled class lifts these rules above a host's own class whichever
   stylesheet loads last, in every browser (:has() would too, but not before Firefox 121 or
   Safari 15.4). */
.dc-product-lockup.dc-product-lockup {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Where there is no room for both on one line the name goes under the mark, at the same size,
   without the rule. A sign-in card or the marketplace footer is always too narrow (a 32-36px logo
   and ESCROW DOMAINS need about 460px beside each other): its pair is dc-product-lockup--stacked
   (ProductLockup in Logo.ts), and the host places it (align-items). A bar's pair
   (dc-product-lockup) stacks on a phone, where no bar has the room; the bar is tall enough for the
   two lines (24px mark, 4px, the 26.4px label). */
.dc-product-lockup--stacked.dc-product-lockup--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dc-product-lockup--stacked > .dc-product-name {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
}
@media (max-width: 767px) {
  .dc-product-lockup.dc-product-lockup {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .dc-product-lockup > .dc-product-name {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
  }
}