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

@layer base {
  :root {
    --y-white: 255 255 255;
    --y-on-color: 255 255 255;
    --y-black-1: 31 41 56;
    --y-black-2: 57 76 102;
    --y-black-3: 22 29 39;
    --y-overlay: 57 76 102;
    --y-border: 229 235 245;

    --y-ink-1: 31 41 56;
    --y-ink-2: 57 76 102;
    --y-ink-3: 22 29 39;

    --y-grey-1: 154 161 180;
    --y-grey-2: 208 211 220;
    --y-grey-3: 244 245 246;
    --y-grey-4: 249 250 250;
    --y-grey-5: 208 216 227;
    --y-grey-6: 123 132 157;
    --y-grey-7: 150 157 177;
    --y-grey-8: 14 14 14;
    --y-grey-9: 238 238 238;

    --y-lightblue-1: 178 204 255;
    --y-lightblue-2: 193 213 245;
    --y-lightblue-3: 218 227 241;
    --y-lightblue-4: 225 238 251;
    --y-lightblue-5: 235 240 254;
    --y-lightblue-6: 248 250 253;
    --y-lightblue-7: 235 239 245;
    --y-lightblue-8: 152 174 246;
    --y-lightblue-9: 239 244 250;

    --y-blue: 54 99 242;
    --y-blue-2: 84 106 123;
    --y-hover-blue: 14 61 211;
    --y-indigo: 100 103 242;
    --y-red: 235 99 99;
    --y-red-2: 255 101 66;
    --y-red-3: 233 63 63;
    --y-green: 73 171 94;
    --y-green-2: 110 211 126;
    --y-emerald: 110 211 126;
    --y-yellow: 241 174 4;
    --y-orange: 249 115 22;
    --y-teal: 45 212 191;
    --y-keppel: 68 187 164;
    --y-violet: 139 92 246;
    --y-fuchsia: 217 70 239;
    --y-pink: 236 72 153;
    --y-ocean: 14 165 233;
    --y-brown: 185 148 136;
    --y-darkbrown: 64 44 38;
    --y-bud: 177 207 95;
  }

  .dark {
    color-scheme: dark;

    --y-white: 24 24 27;
    --y-grey-3: 39 39 42;
    --y-grey-4: 32 32 36;
    --y-grey-9: 46 46 51;
    --y-lightblue-6: 20 20 22;
    --y-lightblue-9: 32 32 36;
    --y-lightblue-5: 42 42 47;
    --y-lightblue-7: 46 46 51;
    --y-lightblue-4: 44 44 49;
    --y-lightblue-3: 58 58 64;
    --y-lightblue-2: 72 72 79;
    --y-lightblue-1: 96 96 105;
    --y-lightblue-8: 138 138 148;

    --y-border: 48 48 53;
    --y-grey-5: 61 61 67;
    --y-grey-2: 61 61 67;

    --y-black-3: 240 240 240;
    --y-black-1: 240 240 240;
    --y-black-2: 240 240 240;
    --y-on-color: 240 240 240;
    --y-grey-6: 155 155 162;
    --y-grey-7: 157 157 164;
    --y-grey-1: 130 130 138;
    --y-blue-2: 150 150 158;

    --y-blue: 92 131 255;
    --y-hover-blue: 126 157 255;
    --y-indigo: 130 133 255;
    --y-red: 240 124 124;
    --y-red-2: 255 132 101;
    --y-red-3: 242 98 98;
    --y-green: 95 194 118;
    --y-green-2: 127 221 142;
    --y-emerald: 127 221 142;
    --y-yellow: 247 190 43;
    --y-orange: 251 139 60;
    --y-teal: 78 221 203;
    --y-keppel: 95 205 183;
    --y-violet: 164 128 248;
    --y-fuchsia: 225 105 243;
    --y-pink: 241 107 172;
    --y-ocean: 56 182 238;
    --y-brown: 199 167 156;
    --y-darkbrown: 201 169 158;
    --y-bud: 191 216 121;

    --y-overlay: 6 6 7;
    --y-grey-8: 255 255 255;

    --y-ink-1: 46 46 51;
    --y-ink-2: 61 61 67;
    --y-ink-3: 36 36 40;
  }

  html {
    -webkit-tap-highlight-color: transparent;
  }

  html,
  body {
    background-color: rgb(var(--y-white));
  }

  ::-webkit-scrollbar {
    width: .25em;
    height: .25em;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: .25em solid #9aa1b4;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    border: .25em solid #727886;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .heading-1 {
    @apply font-extrabold text-3.25xl
  }

  .heading-2 {
    @apply font-normal text-3.25xl
  }

  .heading-3 {
    @apply font-extrabold text-2xl
  }

  .heading-4 {
    @apply font-extrabold text-xl
  }

  .heading-5 {
    @apply text-xl leading-10
  }

  .subtitle-1 {
    @apply font-extrabold text-base
  }

  .subtitle-2 {
    @apply font-semibold text-base
  }

  .subtitle-3 {
    @apply font-extrabold text-sm
  }

  .subtitle-4 {
    @apply font-semibold text-sm
  }

  .subtitle-5 {
    @apply font-semibold text-xs
  }

  .body-1 {
    @apply font-normal text-sm
  }

  .body-2 {
    @apply font-normal text-base
  }

  .caption {
    @apply font-normal text-xs
  }

  .overline-1 {
    @apply font-extrabold text-xs
  }

  .overline-2 {
    @apply font-extrabold text-2xs
  }

}

/* This utility class handles the bottom bar on newer iPhones without the “Home” button. 
Without it, some elements can fall under the bar, making them unreadable and tough to tap. */
@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}