@import "tailwindcss";
@import "tw-animate-css";
@import "@alpic-ai/ui/theme";

@source "../node_modules/@alpic-ai/ui/src/**/*.{ts,tsx}";

@theme {
  --color-border: #e3eaea;
  --color-light-gray: #f9fafa;
  --color-light-gray-foreground: #707e7e;

  --color-primary: #89f0ec;
  --color-primary-foreground: var(--color-foreground);
  --color-primary-hover: #6be4e1;
  --color-ring: #6be4e1;
  --color-cta-accent: #e90060;
}

.dark {
  --color-border: #162828;
  --color-light-gray: #162828;

  --color-primary: #89f0ec;
  --color-primary-foreground: #071718;
  --color-primary-hover: #5eead4;
  --color-ring: #5eead4;
}

.preview-region {
  /* Figma “bg-secondary-subtle” / “border-tertiary” → @alpic-ai/ui @theme color tokens */
  --preview-region-bg: var(--color-light-gray);
  --preview-region-grid: var(--color-border);
  background-color: var(--preview-region-bg);
  /* major grid — full-strength grid color */
  background-image:
    linear-gradient(
      to right,
      var(--preview-region-grid) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      to bottom,
      var(--preview-region-grid) 0 1px,
      transparent 1px 100%
    ),
    /* minor grid — 55% opacity via color-mix */
    linear-gradient(
      to right,
      color-mix(in oklab, var(--preview-region-grid) 55%, transparent) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--preview-region-grid) 55%, transparent) 0 1px,
      transparent 1px 100%
    );
  background-size:
    96px 96px,
    96px 96px,
    16px 16px,
    16px 16px;
  background-position: 0 0;
}
