/*
Copyright (c) 2026 Sidero Labs, Inc.

Use of this software is governed by the Business Source License
included in the LICENSE file.
*/

@import url('./fonts.css') layer(base);
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: Roboto, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --color-naturals-n0: #101118;
  --color-naturals-n1: #13141c;
  --color-naturals-n2: #15161e;
  --color-naturals-n3: #191b24;
  --color-naturals-n4: #1f222e;
  --color-naturals-n5: #272932;
  --color-naturals-n6: #2c2e38;
  --color-naturals-n7: #3a3b45;
  --color-naturals-n8: #5b5c64;
  --color-naturals-n9: #7d7d85;
  --color-naturals-n10: #878990;
  --color-naturals-n11: #9fa1a6;
  --color-naturals-n12: #c3c3c7;
  --color-naturals-n13: #e8e8e9;
  --color-naturals-n14: #ffffff;

  --color-primary-p1: #ffbea9;
  --color-primary-p2: #fe9e74;
  --color-primary-p3: #ff8b59;
  --color-primary-p4: #ff5f2a;
  --color-primary-p5: #ce5027;
  --color-primary-p6: #342321;

  --color-green-g1: #69c297;
  --color-green-g2: #2d9663;
  --color-green-g3: #141f21;

  --color-red-r1: #ff5c56;
  --color-red-r2: #6e2f30;
  --color-red-r3: #311c20;
  --color-red-rlogo: #f62d2c;

  --color-yellow-y1: #ffb200;
  --color-yellow-y2: #c68a00;
  --color-yellow-y3: #a97809;
  --color-yellow-y4: #252115;

  --color-blue-b1: #59a5ff;
}

@layer base {
  body {
    @apply bg-naturals-n0 text-naturals-n11 antialiased;
  }

  *::-webkit-scrollbar {
    @apply h-1.5 w-1.5 bg-transparent;
  }

  *::-webkit-scrollbar-thumb {
    @apply h-1.5 w-1.5 rounded-sm border border-naturals-n4 bg-naturals-n5;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}

@layer components {
  .modal-window {
    @apply z-30 flex w-1/3 flex-col rounded-sm bg-naturals-n3 p-8;
  }

  .link-primary {
    @apply inline-block text-primary-p3 not-hover:underline hover:text-primary-p2 active:text-primary-p5;
  }

  .list-item-link {
    @apply font-bold text-naturals-n14 transition hover:text-naturals-n9;
  }

  .resource-label {
    @apply rounded-sm px-2 py-1 text-xs text-naturals-n11;

    background-color: color-mix(in srgb, currentColor 10%, transparent);

    &:is(a:not(:disabled), button:not(:disabled), [role='button']:not(:disabled)) {
      @apply transition-[filter];

      &:hover {
        @apply brightness-120;
      }
      &:active {
        @apply brightness-80;
      }
    }
  }

  .label-green {
    color: #62f05b;
  }

  .label-red {
    color: #f94e76;
  }

  .label-orange {
    color: #ff9f39;
  }

  .label-blue {
    color: #69b4ff;
  }
}
