/* NOTES: Read before use/edit
- If a color is defined with the word "opacity" in it, it refers to the color value without the word "opacity" in it. 
  The goal of it is to have a color with an opacity defined that looks exactly the same on the !! primary !! background as the non-opacity color does.
  So for example, the following 2 colors look exactly the same on the primary (default white) background:
  --shade-opacity-100 AND --shade-100
  --blue-opacity-50 AND --blue-50 (which isn't used and therefore is not explicitly defined)
  etc.
 */
:root {
  /* Below colors can only be used in other variables!!! */
  /* Only fill in the RGB values, nothing else. Tailwind compiles it so opacities are available as well */
  --black: 0, 0, 0;
  --white: 255, 255, 255;
  /* Above colors can only be used in other variables!!! */

  /* Below variables can be used in tailwind config */
  --shade-0: 255, 255, 255;
  --shade-100: 247, 247, 252;
  --shade-opacity-100: 104, 99, 166, 0.04;
  --shade-opacity-high-100: 247, 247, 252, 0.5;
  --shade-200: 227, 226, 241;
  --shade-opacity-200: 31, 29, 71, 0.12;
  --shade-300: 192, 190, 207;
  --shade-opacity-300: 32, 28, 79, 0.28;
  --shade-600: 95, 94, 100;
  --shade-700: 63, 62, 75;
  --shade-900: 20, 20, 20;
  --tint-opacity-100: 250, 249, 252, 0.04;
  --tint-opacity-200: 250, 249, 252, 0.12;
  --tint-opacity-300: 250, 249, 252, 0.24;
  --accent-opacity-100: 15, 0, 214, 0.04;
  --accent-100: 235, 234, 253;
  --accent-opacity-200: 15, 0, 214, 0.08;
  --accent-200: 224, 223, 247;
  --accent-opacity-300: 15, 0, 214, 0.12;
  --accent-600: 38, 23, 230;
  --accent-700: 13, 0, 185;
  --info-100: var(--accent-100);
  --info-600: var(--accent-600);
  --info-700: var(--accent-700);
  --success-100: 233, 255, 227;
  --success-600: 19, 185, 0;
  --success-700: 7, 71, 0;
  --warning-100: 255, 248, 227;
  --warning-600: 199, 146, 0;
  --warning-700: 74, 54, 0;
  --error-100: 255, 235, 242;
  --error-600: 194, 0, 68;
  --error-700: 158, 0, 55;
  --deco-one-100: 244, 235, 254;
  --deco-one-600: 92, 0, 140;
  --deco-one-700: 67, 0, 102;
  --deco-two-100: 229, 254, 255;
  --deco-two-600: 0, 186, 207;
  --deco-two-700: 0, 90, 99;

  /* Fonts */
  --default-font-family: "Neue Montreal", "Helvetica", "sans-serif";

  /* Texts */
  --default-text: var(--shade-700);
  --primary-text: var(--shade-900);
  --secondary-text: var(--shade-700);
  --tertiary-text: var(--shade-600);
  --interactive-text: var(--accent-700);
  --disabled-text: var(--tertiary-text);
  --valid-text: var(--success-600);
  --invalid-text: var(--error-600);

  /* Backgrounds */
  --primary-background: rgb(var(--shade-0));
  --secondary-background: rgb(var(--shade-100));
  --interactive-background: rgba(var(--accent-opacity-100));
  --active-background: rgba(var(--accent-opacity-200));
  --accent-background: rgb(var(--accent-600));
  --disabled-background: rgba(var(--shade-opacity-100));
  --disabled-accent-background: rgba(var(--shade-opacity-200));
  --empty-state-background: rgba(var(--shade-opacity-100));
  --readonly-background: rgba(var(--shade-opacity-200));
  --readonly-accent-background: rgba(var(--shade-opacity-300));
  --timeline-dot-background: rgba(var(--shade-opacity-300));

  /* Borders */
  --default-border-color: rgba(var(--shade-opacity-200));
  --strong-border-color: rgba(var(--shade-opacity-300));
  --subtle-border-color: rgba(var(--shade-opacity-100));
  --accent-border-color: var(--accent-600);

  --default-border-radius: 0;
}

@layer base {
  body {
    @apply font-body antialiased text-text-primary;
  }

  .contrast {
    /* Color variables */
    --shade-opacity-100: var(--tint-opacity-100);
    --shade-opacity-200: var(--tint-opacity-200);
    --shade-opacity-300: var(--tint-opacity-300);
    --accent-600: 250, 249, 252;
    --accent-700: 256, 256, 256;

    /* Texts */
    --default-text: var(--shade-100);
    --primary-text: var(--shade-0);

    /* Backgrounds */
    --primary-background: rgb(var(--shade-700));
  }

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