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

@layer base {
  *,
  ::before,
  ::after {
    border-width: 0;
    border-style: solid;
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: Inter, Roboto, Arial, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-fg);
    transition: background-color 220ms ease, color 220ms ease;
  }

  a {
    @apply text-link no-underline font-medium hover:text-link-hover hover:underline;
  }

  .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  .dark body {
    background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
  }

  canvas {
    @apply border-none block mx-auto max-w-full;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  .dark canvas {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

@layer components {
  .legend-swatch {
    @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
  }

  .card-gradient-bar {
    @apply relative;
  }

  .card-gradient-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
    border-radius: var(--card-radius) var(--card-radius) 0 0;
  }
}
