/* Thushara Builds — global primitives ported from the static design.
   WordPress ships none of these; every value resolves to a theme.json token. */

/* 1. Box-sizing. Scoped to the tb- prefix so core/plugin styles are untouched. */
[class*="tb-"],
[class*="tb-"]::before,
[class*="tb-"]::after,
[class*="tb-"] * {
  box-sizing: border-box;
}

/* 2. Focus — keyboard only, on brand tokens. */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--xs);
}

/* 3. Body rendering hints from the design. */
body {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--contrast);
}

/* 4. header / main / footer own their vertical rhythm — remove the root blockGap
      stripe core adds between root siblings. */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* 5. Icon masks — the shape is a mask, the colour comes from `color`. */
.tb-icon {
  display: inline-block;
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tb-icon--terminal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='4' width='18.5' height='16' rx='3'/%3E%3Cpath d='m7.5 10 2.5 2.4-2.5 2.4M13 15h3.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='4' width='18.5' height='16' rx='3'/%3E%3Cpath d='m7.5 10 2.5 2.4-2.5 2.4M13 15h3.5'/%3E%3C/svg%3E");
}

.tb-icon--copy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M6.5 15H5.5A1.5 1.5 0 0 1 4 13.5v-8A1.5 1.5 0 0 1 5.5 4h8A1.5 1.5 0 0 1 15 5.5v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M6.5 15H5.5A1.5 1.5 0 0 1 4 13.5v-8A1.5 1.5 0 0 1 5.5 4h8A1.5 1.5 0 0 1 15 5.5v1'/%3E%3C/svg%3E");
}

.tb-icon--check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  [class*="tb-"],
  [class*="tb-"]::before,
  [class*="tb-"]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}