/*
  Tailwind v4 dropped `corePlugins`, so preflight can no longer be switched off
  from the config. Importing the layers individually and leaving out
  `preflight.css` keeps Angular Material's own reset in charge.
*/
@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

/*
  The theme is driven by the CSS custom properties that styles.scss sets per theme.
  `inline` is required: the theme service toggles `.dark` on <body>, while a plain
  `@theme` would resolve these references once at `:root` (<html>) and freeze the
  light values. Inlining makes the utilities emit `var(--app-fg)` directly, so they
  resolve on the element and follow the `.dark` override again.
*/
@theme inline {
  --color-app-bg: var(--app-bg);
  --color-app-fg: var(--app-fg);
  --color-card-bg: var(--card-bg);
  --color-link: var(--link-color);
  --color-link-hover: var(--link-color-hover);
  --color-logo-bg: var(--app-logo-bg);

  --container-app: var(--app-maxWidth);
  --radius-card: var(--card-radius);

  --font-sans: Roboto, Arial, sans-serif;

  --spacing-fluid-sm: clamp(0.5rem, 2vw, 1rem);
  --spacing-fluid-md: clamp(1rem, 3vw, 1.5rem);
  --spacing-fluid-lg: clamp(1rem, 4vw, 2rem);
}

/* The theme service toggles a `dark` class instead of relying on the media query. */
@custom-variant dark (&:where(.dark, .dark *));

@custom-variant mobile (@media (width <= 760px));
@custom-variant sm-dialog (@media (width <= 600px));
@custom-variant tablet (@media (width <= 900px));

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

@utility card-gradient-bar {
  @apply relative;

  &::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;
  }
}

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

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: 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;
  }

  .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);
  }
}