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

@layer base {
  :root {
    /* `orange` scale from Radix colors */
    --orange-1: #fefcfb;
    --orange-2: #fff7ed;
    --orange-3: #ffefd6;
    --orange-4: #ffdfb5;
    --orange-5: #ffd19a;
    --orange-6: #ffc182;
    --orange-7: #f5ae73;
    --orange-8: #ec9455;
    --orange-9: #f76b15;
    --orange-10: #ef5f00;
    --orange-11: #cc4e00;
    --orange-12: #582d1d;

    /* `sand` scale from Radix colors */
    --sand-1: #fdfdfc;
    --sand-2: #f9f9f8;
    --sand-3: #f1f0ef;
    --sand-4: #e9e8e6;
    --sand-5: #e2e1de;
    --sand-6: #dad9d6;
    --sand-7: #cfceca;
    --sand-8: #bcbbb5;
    --sand-9: #8d8d86;
    --sand-10: #82827c;
    --sand-11: #63635e;
    --sand-12: #21201c;

    --background: white;
    --overlay: rgba(255, 255, 255, 0.8);
    --app-background: var(--sand-2);
    --foreground: var(--sand-12);
    --card: white;
    --card-foreground: var(--foreground);
    --popover: white;
    --popover-foreground: var(--foreground);
    --primary: var(--orange-9);
    --primary-hover: var(--orange-10);
    --primary-foreground: white;
    --secondary: var(--sand-3);
    --secondary-hover: var(--sand-4);
    --secondary-foreground: var(--sand-11);
    --muted: var(--sand-5);
    --muted-foreground: var(--sand-11);
    --accent: var(--sand-2);
    --accent-foreground: black;
    --border: var(--sand-4);
    --input: var(--border);
    --ring: var(--primary);
    --radius: 0.5rem;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;

    --link-foreground: var(--orange-11);
    --link-underline: var(--orange-8);

    --graphBackgroundColor1: var(--orange-6);
    --graphBackgroundColor2: var(--orange-7);

    --logo-color: var(--primary);
    --icon-color: var(--orange-9);
  }

  .dark {
    /* orangeDark scale */
    --orange-1: #17120e;
    --orange-2: #1e160f;
    --orange-3: #331e0b;
    --orange-4: #462100;
    --orange-5: #562800;
    --orange-6: #66350c;
    --orange-7: #7e451d;
    --orange-8: #a35829;
    --orange-9: #f76b15;
    --orange-10: #ff801f;
    --orange-11: #ffa057;
    --orange-12: #ffe0c2;

    /* sandDark scale */
    --sand-1: #111110;
    --sand-2: #191918;
    --sand-3: #222221;
    --sand-4: #2a2a28;
    --sand-5: #31312e;
    --sand-6: #3b3a37;
    --sand-7: #494844;
    --sand-8: #62605b;
    --sand-9: #6f6d66;
    --sand-10: #7c7b74;
    --sand-11: #b5b3ad;
    --sand-12: #eeeeec;

    --background: var(--sand-1);
    --overlay: rgba(17, 17, 16, 0.8);
    --app-background: var(--sand-1);
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 60 9.1% 97.8%;

    --card: var(--sand-2);
    --border: var(--sand-6);

    /* Add a lighter background for elements displayed inside a card (E.g. code block inside README) */
    --card-element: var(--sand-3);

    /* Make popover less dark to match the card bg (original L=3.9%;) */
    --popover: var(--sand-2);

    --accent: var(--sand-3);
    --accent-foreground: white;

    --logo-color: var(--orange-11);
    --icon-color: var(--orange-10);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@media (max-width: 640px) {
  .container {
    /* decrease the spacing on mobiles */
    @apply px-4;
  }
}

.project-logo {
  max-width: initial;
  height: revert-layer; /* override `height: auto` from Tailwind base layer */
}

/* Override the behavior provided by reset CSS to display correctly badges in projects README */
.markdown-body img,
.markdown-body svg {
  display: inherit;
}

footer::after {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background-image: linear-gradient(
    135deg,
    #ffe38c 20%,
    #ffae63 20% 40%,
    #f76d42 40% 60%,
    #d63c4a 60% 80%,
    #9c0042 80%
  );
}
