@import "tw-animate-css";
@import "./shadcn.css";
@import "@rakazo/ui-tokens/css";

@source "./**/*.{ts,tsx}";

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-chat-user: var(--chat-user);
  --color-chat-user-foreground: var(--chat-user-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-link: var(--link);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-overlay: var(--overlay);
  --color-scrollbar: var(--scrollbar);
  --color-scrollbar-hover: var(--scrollbar-hover);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Typography scale. Every text size follows --font-scale, which grows on phones. */
  --text-xs: calc(0.75rem * var(--font-scale));
  --text-sm: calc(0.875rem * var(--font-scale));
  --text-base: calc(1rem * var(--font-scale));
  --text-lg: calc(1.125rem * var(--font-scale));
  --text-xl: calc(1.25rem * var(--font-scale));
  --text-2xl: calc(1.5rem * var(--font-scale));
  --text-ui-caption: calc(var(--font-size-caption) * var(--font-scale));
  --text-ui-caption--line-height: var(--line-height-tight);
  --text-ui-label: calc(var(--font-size-label) * var(--font-scale));
  --text-ui-label--line-height: var(--line-height-tight);
  --text-ui-body-sm: calc(var(--font-size-body-sm) * var(--font-scale));
  --text-ui-body-sm--line-height: var(--line-height-body);
  --text-ui-body: calc(var(--font-size-body) * var(--font-scale));
  --text-ui-body--line-height: var(--line-height-body);
  --text-ui-reading: calc(var(--font-size-reading) * var(--font-scale));
  --text-ui-reading--line-height: var(--line-height-reading);
  --text-ui-title-sm: calc(var(--font-size-title-sm) * var(--font-scale));
  --text-ui-title-sm--line-height: var(--line-height-tight);
  --text-ui-title: calc(var(--font-size-title) * var(--font-scale));
  --text-ui-title--line-height: var(--line-height-tight);

  /* Control + icon sizes (also drive h-*, size-*, gap-*, p-* utilities) */
  --spacing-control-xs: var(--control-height-xs);
  --spacing-control-sm: var(--control-height-sm);
  --spacing-control-md: var(--control-height-md);
  --spacing-control-lg: var(--control-height-lg);
  --spacing-icon-sm: var(--icon-sm);
  --spacing-icon-md: var(--icon-md);
  --spacing-icon-lg: var(--icon-lg);
  --spacing-rk-shell: var(--spacing-shell);
  --spacing-rk-sidebar-x: var(--spacing-sidebar-row-x);
  --spacing-rk-sidebar-y: var(--spacing-sidebar-row-y);
}

/* Phones read the 14px base size at 16px (Safari also stops zooming into fields at 16px);
   all other sizes grow by the same ratio. */
:root {
  --font-scale: 1;
}

@media (max-width: 767.98px) {
  :root {
    --font-scale: 1.142857;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes rakazo-avatar-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rakazo-bot-avatar-ring {
  animation: rakazo-avatar-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-bot-avatar {
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-ring {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rakazo-bot-avatar-ring {
    animation: none;
    transition: none;
  }

  .rakazo-bot-avatar {
    transition: none;
  }
}