/*
  ----------------------------------------
  Impeccable Plate Custom Styles
  ----------------------------------------
*/
/* Add Prewind style utility classes that's specific to Impeccable Plate styling
prewind: https://unpkg.com/prewindcss@1.2.5/prewind.css
ip styleguide: https://www.figma.com/design/y2zRG99qxnkDDtvok1xl7e/Impeccable-Plate?node-id=50-300&t=otOKwSs5kNGhw3zH-0
- for ex: border-subtle is a common style for inputs,
so we can add it here as a utility class.
- If you find yourself repeating a combo of utility classes,
consider adding a new class here to abstract it away as well.
- Note do not use the same name as existing Prewind utility classes,
they will be overridden.
*/
@layer styles {
  /* Typography */
  .text-meta {
    font-size: var(--text-xs);
  }

  .text-eyebrow {
    font-size: var(--text-2xs);
  }

  .font-semibold {
    font-weight: var(--font-semibold);
  }

  /* Colors */

  .border-subtle {
    border-color: var(--subtle-border);
  }

  .border-brand-1-darker {
    border-color: var(--brand-1-darker) !important;
  }

  .bg-brand-1-dark {
    background-color: var(--brand-1-darker) !important;
  }

  .bg-neutral-100 {
    background-color: var(--neutral-100);
  }

  .bg-brand-1-darker {
    background-color: var(--brand-1-darker);
  }

  .text-primary {
    color: var(--text-primary);
  }

  .text-secondary {
    color: var(--text-secondary);
  }

  .text-muted {
    color: var(--neutral-500);
  }

  /* Other Styles */

  .ip-cart-icon-white {
    path {
      fill: var(--white);
    }
  }

  /* Hides increase/decrease arrows in number input fields in WebKit browsers (e.g., Chrome, Safari) */
  .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  .no-spin {
      -moz-appearance:textfield !important;
  }
}