@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    /* Brand color palette */
    /* https://www.figma.com/file/HsqOqJHIQiMp6udEzwzxdW/Sprout-%E2%80%94-Admin-Area-v.2?type=design&node-id=298-2769&mode=design&t=v19YsyNfn5DVqC73-4 */

    --color-dark-army-green-700: 62 70 49; /* #3E4631 */
    --color-dark-army-green-800: 47 53 37; /* #2F3525 */
    --color-dark-army-green-900: 32 36 25; /* #202419 */

    --color-dark-yellow-50: 247 215 122; /* #F7D77A */
    --color-dark-yellow-100: 243 199 68; /* #F3C744 */
    --color-dark-yellow-200: 208 172 61; /* #D0AC3D */

    --color-light-taupe-50: 223 220 212; /* #DFDCD4 */
    --color-light-taupe-100: 215 211 201; /* #D7D3C9 */
    --color-light-taupe-200: 186 182 171; /* #BAB6AB */
    --color-light-taupe-300: 157 152 141; /* #9D988D */
    --color-light-taupe-400: 127 123 111; /* #7F7B6F */
    --color-light-taupe-500: 113 108 96; /* #716C60 */

    --color-light-grey-50: 250 249 248; /* #FAF9F8 */
    --color-light-grey-100: 248 246 245; /* #F8F6F5 */
    --color-light-grey-200: 245 243 241; /* #F5F3F1 */
    --color-light-grey-300: 243 240 238; /* #F3F0EE */

    --color-mercury-50: 247 192 184; /* #F7C0B8 */
    --color-mercury-100: 236 102 81; /* #EC6651 */
    --color-mercury-200: 233 79 55; /* #E94F37 */
    --color-mercury-300: 192 59 39; /* #C03B27 */

    /* Admin color palette, based on Tailwind default */
    /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
    --color-gray-50: 249 250 251; /* #f9fafb */
    --color-gray-100: 243 244 246; /* #f3f4f6 */
    --color-gray-200: 229 231 235; /* #e5e7eb */
    --color-gray-300: 209 213 219; /* #d1d5db */
    --color-gray-400: 156 163 175; /* #9ca3af */
    --color-gray-500: 107 114 128; /* #6b7280 */
    --color-gray-600: 75 85 99; /* #4b5563 */
    --color-gray-700: 55 65 81; /* #374151 */
    --color-gray-800: 31 41 55; /* #1f2937 */

    --color-slate-50: 248 250 252; /* #f8fafc */
    --color-slate-100: 241 245 249; /* #F1F5F9 */
    --color-slate-200: 226 232 240; /* #e2e8f0 */
    --color-slate-300: 203 213 225; /* #cbd5e1 */
    --color-slate-400: 148 163 184; /* #94a3b8 */
    --color-slate-500: 100 116 139; /* #64748b */
    --color-slate-700: 51 65 85; /* #334155 */
    --color-slate-800: 30 41 59; /* #1e293b */

    --color-green-100: 220 252 231; /* #dcfce7 */
    --color-green-200: 187 247 208; /* #bbf7d0 */
    --color-green-900: 20 83 45; /* #14532d */

    --color-blue-100: 219 234 254; /* #DBEAFE */
    --color-blue-400: 97 166 250; /* #60a5fa */
    --color-blue-500: 59 130 246; /* #3b82f6 */
    --color-blue-600: 37 99 235; /* #2563eb */
    --color-blue-700: 29 78 216; /* #1d4ed8 */
    --color-blue-800: 30 64 175; /* #1E40AF */

    --color-teal-100: 204 251 241; /* #ccfbf1 */

    --color-purple-500: 168 85 247; /* #a855f7 */
    --color-purple-700: 126 34 206; /* #7e22ce */

    --color-red-50: 254 242 242; /* #FEF2F2 */
    --color-red-300: 252 165 165; /* #FCA5A5 */
    --color-red-800: 153 27 27; /* #991B1B */

    --color-yellow-200: 254 240 138; /* #FEF08A */
    --color-yellow-900: 113 63 18; /* #713F12 */

    /* Utility Colors */
    --color-u-yellow-100: 254 252 232; /* #fefce8 */
    --color-u-yellow-200: 250 204 21; /* #facc15 */
    --color-u-yellow-300: 161 98 7; /* #a16207 */
    --color-u-yellow-400: 133 77 14; /* #854d0e */

    --color-u-red-50: 228 46 32; /* #E42E20 */
    --color-u-red-100: 254 242 242; /* #fef2f2 */
    --color-u-red-200: 248 113 113; /* #f87171 */
    --color-u-red-300: 185 28 28; /* #b91c1c */
    --color-u-red-400: 153 27 27; /* #991b1b */

    --color-u-green-100: 240 253 244; /* #f0fdf4 */
    --color-u-green-200: 74 222 128; /* #4ade80 */
    --color-u-green-300: 21 128 61; /* #15803d */
    --color-u-green-400: 22 101 52; /* #166534 */

    --color-u-blue-100: 239 246 255; /* #eff6ff */
    --color-u-blue-200: 96 165 250; /* #60a5fa */
    --color-u-blue-300: 39 91 238; /* #275bee */
    --color-u-blue-400: 29 78 216; /* #1d4ed8 */

    /* Utilities */
    --navbar-content-right: calc(100% - 50px);
  }
}

@layer components {
  .admin-layout {
    @apply font-admin;
  }

  .admin-layout input[type="text"],
  .admin-layout input[type="password"],
  .admin-layout input[type="email"],
  .admin-layout input[type="number"],
  .admin-layout input[type="tel"] {
    @apply bg-white border border-light-taupe-300 h-12 rounded-md focus:ring-dark-yellow-50 focus:border-light-taupe-100 focus:ring-offset-2 focus:ring-2 block w-full leading-tight font-admin placeholder:text-gray-500;
  }

  .admin-layout input[type="checkbox"] {
    @apply w-4 h-4 border-light-taupe-300 focus:ring-dark-army-green-700 focus:border-dark-army-green-900 focus:ring-offset-2 focus:ring-2 rounded;
  }

  .admin-layout select {
    @apply rounded-md border bg-white border-light-taupe-300 h-12 focus:ring-dark-yellow-50 focus:border-light-taupe-100 focus:ring-offset-2 focus:ring-2 leading-tight font-admin;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .admin-layout label {
    @apply text-base font-medium text-dark-army-green-900 font-admin;
  }

  .admin-layout textarea {
    @apply bg-white border border-light-taupe-300 rounded-md focus:ring-dark-yellow-50 focus:border-light-taupe-100 focus:ring-offset-2 focus:ring-2 block w-full leading-tight font-admin;
  }

  .gift-creation .add-item select {
    @apply w-full;
  }
  /* Remove item button */
  .gift-creation .add-item button {
    @apply p-4 cursor-pointer overflow-hidden relative w-12 inline-block indent-[-9999px];

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.5 5h15M15.8 5v11.7c0 .8-.8 1.6-1.6 1.6H5.8c-.8 0-1.6-.8-1.6-1.6V5M6.7 5V3.3c0-.8.8-1.6 1.6-1.6h3.4c.8 0 1.6.8 1.6 1.6V5M8.3 9.2v5M11.7 9.2v5' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }

  .gift-creation .add-item button:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.5 5h15M15.8 5v11.7c0 .8-.8 1.6-1.6 1.6H5.8c-.8 0-1.6-.8-1.6-1.6V5M6.7 5V3.3c0-.8.8-1.6 1.6-1.6h3.4c.8 0 1.6.8 1.6 1.6V5M8.3 9.2v5M11.7 9.2v5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  }

  .navbar-content .content-right {
    @apply w-full md:w-[var(--navbar-content-right)];
  }

  .status-label {
    @apply rounded-3xl py-0.5 px-2 text-xs leading-5 inline-block font-medium w-fit;
  }

  .status-label.label-active {
    @apply bg-green-200 text-green-900;
  }

  .status-label.label-disabled {
    @apply bg-slate-200 text-slate-700;
  }

  .status-label.label-expired {
    @apply bg-yellow-200 text-yellow-900;
  }

  .status-label.label-redemptions-left {
    @apply bg-blue-100 text-blue-800;
  }

  /* Buttons */
  .admin-layout .btn-primary {
    @apply rounded-md bg-dark-yellow-100 text-dark-army-green-900 text-sm font-medium py-2 px-4 hover:bg-dark-yellow-200 text-center disabled:bg-light-taupe-50 disabled:text-light-taupe-400 cursor-pointer;
  }

  .admin-layout .btn-secondary {
    @apply rounded-md bg-dark-army-green-900 text-white text-sm font-medium py-2 px-4 hover:bg-dark-army-green-700 text-center disabled:bg-light-taupe-50 disabled:text-light-taupe-400 cursor-pointer;
  }

  .admin-layout .btn-destructive {
    @apply rounded-md text-mercury-300 border border-mercury-300 text-sm font-medium py-2 px-4 hover:bg-mercury-50 text-center disabled:border-light-taupe-50 disabled:text-light-taupe-400 cursor-pointer;
  }

  .admin-layout .btn-outline {
    @apply rounded-md text-dark-army-green-900 bg-white border border-light-taupe-50 text-sm font-medium py-2 px-4 hover:text-dark-army-green-700 hover:border-dark-army-green-700 text-center disabled:bg-light-taupe-50 disabled:text-light-taupe-400 disabled:border-light-taupe-100 cursor-pointer;
  }

  .admin-layout .btn-ghost {
    @apply rounded-md text-dark-army-green-900 text-sm font-medium py-2 px-4 hover:bg-light-taupe-50 text-center disabled:text-light-taupe-400 cursor-pointer;
  }

  .admin-layout .btn-link {
    @apply rounded-md text-dark-army-green-900 text-sm font-medium py-2 px-4 hover:bg-dark-yellow-100 text-center disabled:text-light-taupe-400 cursor-pointer;
  }
}
@import './admin.css';
@import './starter_layout.css';
@import './salt_and_straw.css';
@import './skinny_dipped.css';
@import './liquid_death.css';
@import './rarebird.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tokens */
:root {
  --color-white: 255 255 255; /* #ffffff */
  --color-black: 0 0 0; /* #000000 */
}

@layer base {
  * {
    font-variant-ligatures: none;
  }

  body {
    @apply antialiased;
  }
}

@layer utilities {
  .animation-delay-75 {
    animation-delay: 75ms;
  }
  .animation-delay-500 {
    animation-delay: 500ms;
  }
  .animation-delay-1000 {
    animation-delay: 1s;
  }

  .aspect-square {
    aspect-ratio: 1/1;
  }

  .contain-paint {
    contain: paint;
  }
}

@layer components {
  .ts-wrapper:not(.form-control):not(.form-select) {
    @apply rounded-md border bg-white h-12 leading-tight font-admin w-full;
  }

  .ts-wrapper .ts-control {
    @apply border-light-taupe-300;
  }

  .ts-wrapper.focus .ts-control {
    @apply border-light-taupe-100 shadow-none ring-dark-yellow-50 border-light-taupe-100 ring-offset-2 ring-2;
  }
}
@layer base {
  :root {
    --color-white: 255 255 255; /* #ffffff */
    --color-black: 0 0 0; /* #000000 */

    /* Liquid Death colors */
    --color-liquid-death-gold-100: 203 161 79; /* #CBA14F */
    --color-liquid-death-cyan-300: 103 232 249; /* #67e8f9 */
    --color-liquid-death-gray-400: 156 163 175; /* #9CA3AF */
    --color-liquid-death-gray-500: 107 114 128; /* #6B7280 */
  }

  /* Custom Fonts */
  /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 30, 2023 */
  @font-face {
    font-family: 'acumin_pro_condensedbold';
    src: url(/fonts/liquid_death/acumin-pro-condensed-bold-webfont.woff2) format('woff2'),
         url(/fonts/liquid_death/acumin-pro-condensed-bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'acumin_pro_condensedregular';
    src: url(/fonts/liquid_death/acumin-pro-condensed-webfont.woff2) format('woff2'),
         url(/fonts/liquid_death/acumin-pro-condensed-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
  }
}

@layer components {
  .liquid-death input[type="text"],
  .liquid-death input[type="password"],
  .liquid-death input[type="email"],
  .liquid-death input[type="number"],
  .liquid-death input[type="tel"] {
    @apply bg-black border-2 border-white text-white text-base h-12 focus:ring-liquid-death-gold-100 focus:border-liquid-death-gold-100 block w-full leading-tight font-liquid-death-condensed;
  }

  .liquid-death input[type="checkbox"] {
    @apply w-4 h-4 bg-black border-white border-2 focus:ring-liquid-death-gold-100 focus:border-liquid-death-gold-100 focus:ring-offset-0;
  }

  .liquid-death select {
    @apply border-2 border-white text-white bg-black h-12 focus:ring-liquid-death-gold-100 focus:border-liquid-death-gold-100 leading-tight font-liquid-death-condensed pl-5 py-2;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .liquid-death .gift-selected select {
    @apply bg-white text-black font-liquid-death-condensed-bold;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
  }

  .liquid-death label {
    @apply text-lg font-liquid-death-condensed text-white;
  }

  .liquid-death textarea {
    @apply bg-black text-white border border-white border-2 focus:ring-liquid-death-gold-100 block w-full leading-tight font-liquid-death-condensed text-base;
  }

  .liquid-death .btn-primary {
    @apply uppercase font-bold font-liquid-death-condensed-bold text-lg text-white bg-liquid-death-gold-100 enabled:hover:text-black py-3 px-7 w-full lg:w-96 cursor-pointer disabled:bg-liquid-death-gray-400 disabled:text-liquid-death-gray-500 disabled:cursor-not-allowed;
  }

  .liquid-death .btn-large {
    @apply xl:text-xl xl:h-16 w-fit;
  }

  .liquid-death .home-bg {
    @apply z-0 w-full h-full absolute bg-cover top-0 left-0;
  }

  .liquid-death .gift-redeem-form > div {
    @apply flex flex-col gap-1;
  }

  .liquid-death .minus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' class='icon-selector' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.60156 10H16.2682' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 21px;
    height: 20px;
  }

  .liquid-death .plus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' class='icon-selector' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5652 4.16666V15.8333' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M4.73193 10H16.3986' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 21px;
    height: 20px;
  }

  .liquid-death article.gift-selected {
    border-color: white;
  }

  .liquid-death article.gift-selected button {
    display: none;
  }
}
@layer base {
  :root {
    /* Rarebird brand colors */
    --color-rarebird-blue-light-100: 237 242 255; /* #edf2ff */
    --color-rarebird-blue-light-900: 88 123 230; /* #587be6 */

    --color-rarebird-blue-500: 52 94 255; /* #345eff */
    --color-rarebird-blue-600: 34 64 255; /* #2240ff */

    --color-rarebird-gray-200: 251 251 250; /* #fbfbfa */
    --color-rarebird-gray-400: 246 246 244; /* #f6f6f4 */
    --color-rarebird-gray-500: 209 209 207; /* #D1D1CF */
    --color-rarebird-gray-600: 68 68 68; /* #444444 */
    --color-rarebird-gray-800: 92 92 92; /* #5C5C5C */

    --color-rarebird-cyan-600: 122 216 255; /* #7ad8ff */

    --color-rarebird-yellow-50: 254 252 232; /* #FEFCE8 */
    --color-rarebird-yellow-500: 248 236 135; /* #F8EC87 */
    --color-rarebird-yellow-700: 161 98 7; /* #A16207 */
    --color-rarebird-yellow-800: 133 77 14; /* #854D0E */
  }

  /* Custom Fonts */
  @font-face {
    font-family: 'brown';
    src: url(/fonts/rarebird/BrownLLWeb-Regular.woff2) format('woff2'),
    url(/fonts/rarebird/BrownLLWeb-Regular.woff) format('woff');
    font-display: swap;
    font-weight: normal;
  }

  @font-face {
    font-family: 'brown_bold';
    src: url(/fonts/rarebird/BrownLLWeb-Bold.woff2) format('woff2'),
    url(/fonts/rarebird/BrownLLWeb-Bold.woff) format('woff');
    font-display: swap;
    font-weight: bold;
  }

  @font-face {
    font-family: 'mcbungalow_bold';
    src: url(/fonts/rarebird/mc-bungalow-bold.woff2) format('woff2'),
    url(/fonts/rarebird/mc-bungalow-bold.woff) format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  }
}

@layer components {
  .rarebird {
    @apply font-rarebird-serif;
  }

  .btn-primary-rarebird {
    @apply rounded-full bg-rarebird-blue-600 font-bold text-2xl lg:text-3xl text-rarebird-blue-light-100 uppercase transition ease-in-out delay-150 enabled:hover:bg-gradient-to-b from-rarebird-blue-600 to-rarebird-cyan-600 duration-300 disabled:text-rarebird-gray-800 disabled:bg-rarebird-gray-500 disabled:cursor-not-allowed py-3 px-7 lg:py-4 w-full lg:w-96 cursor-pointer font-rarebird-serif-condensed text-center;
  }

  .btn-rarebird-inner-shadow {
    box-shadow: inset 0 0 5px #edf2ff;
  }

  .btn-secondary-rarebird {
    @apply rounded-full bg-rarebird-blue-600 font-bold text-rarebird-blue-light-100 uppercase transition ease-in-out delay-150 enabled:hover:bg-gradient-to-b from-rarebird-blue-600 to-rarebird-cyan-600 duration-300 disabled:text-rarebird-gray-800 disabled:bg-rarebird-gray-500 disabled:cursor-not-allowed py-3 px-7 lg:py-4 w-full lg:w-56 cursor-pointer font-rarebird-serif-bold text-center tracking-widest text-sm;
  }

  .rarebird .gift-redeem-form > .form-field-group {
    @apply flex flex-col gap-1;
  }

  .rarebird input[type="text"],
  .rarebird input[type="password"],
  .rarebird input[type="email"],
  .rarebird input[type="number"],
  .rarebird input[type="tel"] {
    @apply bg-white border border-gray-400 h-12 rounded-md focus:ring-rarebird-blue-600 focus:border-rarebird-blue-600 block w-full font-rarebird-serif;
  }
  .rarebird input[type="checkbox"] {
    @apply w-4 h-4 text-black bg-white border-gray-400 focus:ring-gray-400 focus:border-rarebird-blue-600 focus:ring-offset-2 focus:ring-2 rounded checked:bg-black;
  }

  .rarebird select {
    @apply rounded-md border border-gray-400 h-12 focus:ring-rarebird-blue-600 focus:border-rarebird-blue-600 font-rarebird-serif;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .rarebird label {
    @apply text-sm text-rarebird-gray-600 font-rarebird-serif;
  }
}

@layer utilities {
  .rarebird .text-blue-gradient-to-b {
    @apply bg-gradient-to-b text-transparent bg-clip-text from-rarebird-blue-500 via-rarebird-blue-500 to-rarebird-cyan-600;
  }

  .rarebird .hero-background::before {
    content: '';
    @apply z-[-1] content-[''] w-full h-full absolute inset-0;
  }

  .rarebird .hero-background::after {
    content: '';
    @apply z-[-1] opacity-30 content-[''] block w-[120%] md:w-[110%] mx-auto h-[100%] absolute -bottom-1/2 rounded-[50%] blur-2xl px-10 left-1/2 -translate-x-1/2 bg-gradient-to-r from-rarebird-blue-600 to-rarebird-cyan-600;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


@layer base {
  :root {
    /* Salt & Straw color palette, based on Tailwind default */
    --color-salt-and-straw-red-500: 249 66 58; /* #F9423A */
    --color-salt-and-straw-red-600: 209 38 47; /* #D22630 */

    --color-salt-and-straw-blue-500: 20 111 248; /* #146ff8 */

    --color-salt-and-straw-cream-100: 253 247 235; /* #FDF7EB */
    --color-salt-and-straw-cream-300: 221 213 205; /* #DDD5CD */
  }

  @font-face {
    font-family: 'moretregular';
    src: url(/fonts/salt_and_straw/moret-regular-webfont.woff2) format('woff2'),
    url(/fonts/salt_and_straw/moret-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
  }
}

@layer components {
  .salt-and-straw {
    @apply font-salt-and-straw-sans;
  }

  .btn-salt-and-straw {
    @apply rounded-full font-salt-and-straw-sans text-white bg-salt-and-straw-red-500 hover:bg-salt-and-straw-red-600 py-4 px-6 cursor-pointer min-w-full md:min-w-[290px] uppercase font-bold text-center;
  }

  .btn-large-salt-and-straw {
    @apply rounded-full font-salt-and-straw-sans text-white bg-salt-and-straw-red-500 hover:bg-salt-and-straw-red-600 py-4 px-6 cursor-pointer min-w-full md:min-w-[290px] uppercase font-bold xl:text-xl text-center;
  }

  .btn-add-salt-and-straw {
    @apply rounded-full font-salt-and-straw-sans text-white bg-salt-and-straw-red-500 hover:bg-salt-and-straw-red-600 py-3.5 px-6 cursor-pointer min-w-full uppercase font-bold text-center;
  }

  .salt-and-straw .gift-redeem-form > div {
    @apply flex flex-col gap-1;
  }

  .salt-and-straw input[type="text"],
  .salt-and-straw input[type="password"],
  .salt-and-straw input[type="email"],
  .salt-and-straw input[type="number"],
  .salt-and-straw input[type="tel"] {
    @apply bg-white border border-gray-400 h-12 rounded-md focus:ring-salt-and-straw-blue-500 focus:border-salt-and-straw-blue-500 block w-full leading-tight font-salt-and-straw-condensed;
  }

  .salt-and-straw select {
    @apply rounded-md border border-gray-400 h-12 focus:ring-salt-and-straw-blue-500 focus:border-salt-and-straw-blue-500 leading-tight font-salt-and-straw-condensed;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .salt-and-straw label {
    @apply font-salt-and-straw-condensed text-sm;
  }

  .salt-and-straw .minus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' class='icon-selector' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.60156 10H16.2682' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 21px;
    height: 20px;
  }

  .salt-and-straw .plus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='20' viewBox='0 0 21 20' fill='none' class='icon-selector' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5652 4.16666V15.8333' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M4.73193 10H16.3986' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 21px;
    height: 20px;
  }

  .salt-and-straw .gift-selected {
    @apply bg-salt-and-straw-cream-100;
  }
}
@layer base {
  :root {
    /* Skinny Dipped brand colors */
    --color-skinny-dipped-blue-50: 239 246 255; /* #EFF6FF */
    --color-skinny-dipped-blue-100: 219 234 254; /* #DBEAFE */
    --color-skinny-dipped-blue-300: 47 128 237; /* #2F80ED */
    --color-skinny-dipped-blue-400: 46 124 246; /* #2E7CF6 */
    --color-skinny-dipped-blue-500: 36 78 226; /* #244EE2 */
    --color-skinny-dipped-blue-600: 0 47 216; /* #002FD8 */

    --color-skinny-dipped-cyan-300: 0 215 255; /* #00D7FF */
    --color-skinny-dipped-cyan-400: 113 203 204; /* #71CBCC */
    --color-skinny-dipped-cyan-500: 0 201 234; /* #00C9EA */

    --color-skinny-dipped-orange-300: 255 239 0; /* #FFEF00 */
    --color-skinny-dipped-orange-400: 255 176 15; /* #FFB00F */
    --color-skinny-dipped-orange-500: 255 108 1; /* #FF6C01 */
    --color-skinny-dipped-orange-600: 255 69 0; /* #FF4500 */
    --color-skinny-dipped-orange-700: 252 52 68; /* #FC3444 */

    --color-skinny-dipped-gray-400: 156 163 175; /* #9ca3af */

    --color-skinny-dipped-slate-300: 203 213 225; /* #CBD5E1 */
    --color-skinny-dipped-slate-400: 148 163 184; /* #94A3B8 */

    --color-skinny-dipped-yellow-50: 254 252 232; /* #FEFCE8 */
    --color-skinny-dipped-yellow-700: 161 98 7; /* #A16207 */
    --color-skinny-dipped-yellow-800: 133 77 14; /* #854D0E */
  }

  /* Custom Fonts */
  /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 13, 2023 */
  @font-face {
    font-family: 'proxima_novabold';
    src: url(/fonts/skinny_dipped/proxima_nova_bold-webfont.woff2) format('woff2'),
        url(/fonts/skinny_dipped/proxima_nova_bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

  }

  @font-face {
    font-family: 'chartwellbarsregular';
    src: url(/fonts/skinny_dipped/chartwellbars-webfont.woff2) format('woff2'),
         url(/fonts/skinny_dipped/chartwellbars-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'League Gothic';
    src: url(/fonts/skinny_dipped/LeagueGothic-Regular.woff2) format('woff2'),
        url(/fonts/skinny_dipped/LeagueGothic-Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
}

@layer components {
  .skinny-dipped {
    @apply font-skinny-dipped-sans;
  }

  .btn-primary-skinny-dipped {
    @apply rounded-full bg-skinny-dipped-orange-300 font-bold text-2xl lg:text-3xl text-skinny-dipped-blue-600 transition ease-in-out delay-150 enabled:hover:bg-skinny-dipped-blue-500 enabled:hover:text-skinny-dipped-orange-300 duration-300 disabled:text-skinny-dipped-slate-400 disabled:bg-skinny-dipped-slate-300 disabled:cursor-not-allowed py-3 px-7 lg:py-4 w-full lg:w-96 cursor-pointer font-skinny-dipped-sans text-center;
  }

  .btn-secondary-skinny-dipped {
    @apply rounded-full bg-skinny-dipped-orange-300 font-bold text-2xl lg:text-3xl text-[#ff00a6] transition ease-in-out delay-150 enabled:hover:bg-skinny-dipped-blue-500 enabled:hover:text-skinny-dipped-orange-300 duration-300 disabled:text-skinny-dipped-slate-400 disabled:bg-skinny-dipped-slate-300 disabled:cursor-not-allowed py-3 px-7 lg:py-4 cursor-pointer font-skinny-dipped-sans min-w-full md:min-w-[340px] text-center;
  }

  .skinny-dipped .gift-redeem-form > .form-field-group {
    @apply flex flex-col gap-1;
  }

  .skinny-dipped input[type="text"],
  .skinny-dipped input[type="password"],
  .skinny-dipped input[type="email"],
  .skinny-dipped input[type="number"],
  .skinny-dipped input[type="tel"] {
    @apply bg-white border border-gray-400 h-12 rounded-md focus:ring-skinny-dipped-cyan-300 focus:border-skinny-dipped-cyan-300 block w-full font-skinny-dipped-sans;
  }
  .skinny-dipped input[type="checkbox"] {
    @apply w-4 h-4 text-black bg-white border-gray-400 focus:ring-skinny-dipped-blue-400 focus:border-skinny-dipped-cyan-300 focus:ring-offset-2 focus:ring-2 rounded checked:bg-black;
  }

  .skinny-dipped select {
    @apply rounded-md border border-gray-400 h-12 focus:ring-skinny-dipped-cyan-300 focus:border-skinny-dipped-cyan-300 font-skinny-dipped-sans;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .skinny-dipped label {
    @apply text-sm text-white font-skinny-dipped-sans;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    --color-dark-yellow-50: 247 215 122; /* #F7D77A */
    --color-dark-yellow-100: 243 199 68; /* #F3C744 */
    --color-dark-yellow-200: 208 172 61; /* #D0AC3D */

    --color-dark-army-green-700: 62 70 49; /* #3E4631 */
    --color-dark-army-green-800: 47 53 37; /* #2F3525 */
    --color-dark-army-green-900: 32 36 25; /* #202419 */

    --color-light-taupe-50: 223 220 212; /* #DFDCD4 */
    --color-light-taupe-100: 215 211 201; /* #D7D3C9 */
    --color-light-taupe-200: 186 182 171; /* #BAB6AB */
    --color-light-taupe-300: 157 152 141; /* #9D988D */
    --color-light-taupe-400: 127 123 111; /* #7F7B6F */
    --color-light-taupe-500: 113 108 96; /* #716C60 */


    --color-light-grey-50: 250 249 248; /* #FAF9F8 */
    --color-light-grey-100: 248 246 245; /* #F8F6F5 */
    --color-light-grey-200: 245 243 241; /* #F5F3F1 */
    --color-light-grey-300: 243 240 238; /* #F3F0EE */

    /* Utility Colors */
    --color-u-yellow-100: 254 252 232; /* #fefce8 */
    --color-u-yellow-200: 237 235 216; /* #EDEBD8 */
    --color-u-yellow-300: 161 98 7; /* #a16207 */
  }
}

@layer components {
  .starter-layout {
    @apply font-starter-layout text-starter-layout-dark-army-green-900;
  }

  .starter-layout .btn-primary {
    @apply rounded-lg bg-starter-layout-dark-yellow-100 text-starter-layout-dark-army-green-900 text-base font-semibold py-4 px-6 hover:bg-starter-layout-dark-yellow-200 cursor-pointer disabled:bg-starter-layout-light-taupe-50 disabled:text-starter-layout-light-taupe-400 disabled:cursor-not-allowed;
  }

  .starter-layout .gift-redeem-form > div {
    @apply flex flex-col gap-1;
  }

  .starter-layout input[type="text"],
  .starter-layout input[type="password"],
  .starter-layout input[type="email"],
  .starter-layout input[type="number"],
  .starter-layout input[type="tel"] {
    @apply bg-white border border-starter-layout-light-taupe-100 h-12 rounded-lg outline-none focus:ring-2 focus:ring-starter-layout-dark-yellow-50 focus:ring-offset-2 focus:ring-offset-starter-layout-light-grey-100 block w-full leading-tight;
  }

  .starter-layout input[type="checkbox"] {
    @apply bg-white w-4 h-4 text-starter-layout-dark-army-green-900 border-starter-layout-light-taupe-100 rounded outline-none focus:ring-2 focus:ring-starter-layout-dark-yellow-50 focus:ring-offset-2 focus:ring-offset-starter-layout-light-grey-100 checked:bg-black checked:border-black;
  }

  .starter-layout select {
    @apply rounded-lg border border-starter-layout-light-taupe-100 h-12 rounded-lg outline-none focus:ring-2 focus:ring-starter-layout-dark-yellow-100 focus:ring-offset-2 focus:ring-offset-starter-layout-light-grey-100 leading-tight;

    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  .starter-layout label {
    @apply text-sm text-starter-layout-dark-army-green-900 font-medium;
  }

  .starter-layout article.gift-selected button span {
    @apply border-starter-layout-dark-army-green-900;
  }

  .starter-layout article.gift-selected button span::after {
    content: '';
    display: block;
    @apply bg-starter-layout-dark-army-green-900 rounded-full h-2 w-2 ml-0.5 mt-0.5;
  }

  .starter-layout article.gift-selected button div {
    @apply bg-starter-layout-dark-yellow-100 border-starter-layout-dark-yellow-100;
  }

  .starter-layout article select {
    @apply border-2 border-starter-layout-dark-army-green-900;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */