@import "tailwindcss";

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

@theme {
  /* Dify / Untitled UI palette */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f2f4f7;
  --color-bg-section: #f6f7f9;

  --color-text-primary: #101828;
  --color-text-secondary: #354052;
  --color-text-tertiary: #676f83;
  --color-text-quaternary: #98a2b2;
  --color-text-disabled: #d0d5dc;

  --color-border-subtle: rgb(16 24 40 / 0.04);
  --color-border-default: rgb(16 24 40 / 0.08);
  --color-border-hover: rgb(16 24 40 / 0.14);
  --color-border-strong: #d0d5dc;

  --color-card: #ffffff;
  --color-card-hover: #f9fafb;

  /* Dify primary blue */
  --color-primary-50: #eff4ff;
  --color-primary-100: #d1e0ff;
  --color-primary-200: #b2caff;
  --color-primary-500: #2970ff;
  --color-primary-600: #155aef;
  --color-primary-700: #004aeb;
  --color-primary-800: #00359e;

  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-foreground: #ffffff;

  /* Accent palette for tile icons (also re-declared in :root below so
     Tailwind v4 doesn't tree-shake them — they're only used via inline
     style in tile.tsx, which Tailwind's purger can't see). */
  --color-accent-blue: #155aef;
  --color-accent-indigo: #444ce7;
  --color-accent-violet: #7a5af8;
  --color-accent-cyan: #0ba5ec;
  --color-accent-emerald: #17b26a;
  --color-accent-amber: #f79009;
  --color-accent-rose: #f04438;
  --color-accent-gray: #475467;
  --color-accent-teal: #15b79e;

  --color-destructive: #d92d20;
  --color-destructive-bg: #fef3f2;
  --color-destructive-border: #fda29b;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-card-hover: 0 12px 24px -8px rgb(16 24 40 / 0.12), 0 4px 8px -4px rgb(16 24 40 / 0.06);

  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
}

/* Re-declare accents in :root so they survive Tailwind v4's purge of unused
   @theme variables. Used by inline styles in tile.tsx (color-mix). */
:root {
  --color-accent-blue: #155aef;
  --color-accent-indigo: #444ce7;
  --color-accent-violet: #7a5af8;
  --color-accent-cyan: #0ba5ec;
  --color-accent-emerald: #17b26a;
  --color-accent-amber: #f79009;
  --color-accent-rose: #f04438;
  --color-accent-gray: #475467;
  --color-accent-teal: #15b79e;
}

.dark {
  --color-bg-primary: #14181f;
  --color-bg-secondary: #1a1f29;
  --color-bg-tertiary: #232936;
  --color-bg-section: #181d26;

  --color-text-primary: #f5f7fa;
  --color-text-secondary: #c8ccd5;
  --color-text-tertiary: #98a2b2;
  --color-text-quaternary: #676f83;
  --color-text-disabled: #4a525e;

  --color-border-subtle: rgb(255 255 255 / 0.05);
  --color-border-default: rgb(255 255 255 / 0.08);
  --color-border-hover: rgb(255 255 255 / 0.14);
  --color-border-strong: #354052;

  --color-card: #1a1f29;
  --color-card-hover: #232936;

  --color-primary: var(--color-primary-500);
  --color-primary-hover: #4187ff;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-card-hover: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.3);
}

html,
body {
  height: 100%;
}

body {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dify-style typography utilities */
.system-2xs-medium-uppercase {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.system-xs-regular {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.system-xs-medium {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.system-sm-medium {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.system-sm-semibold {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Scrollbar polish */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
}