@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@import "./tailwindAnimations.css";
@plugin 'tailwind-scrollbar';

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

/*

@plugin 'tailwind-scrollbar-hide'; */

/* @import 'shadcn-prose'; */

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

:root {
  /* Base colors */
  --background: #ffffff;
  --foreground: #000000;
  --background-secondary: #f3f3f3;
  --foreground-hover: #393939;
  --primary: #7c3aed;
  --primary-light: #a26cff;
  --primary-dark: #6d28d9;
  --primary-foreground: #7c3aed;
  --secondary: #575859;
  --secondary-foreground: #000000;
  --muted: #f8f8f8;
  --muted-foreground: #575859;
  --accent: #f8f8f8;
  --accent-foreground: #575859;
  --destructive: #c4242a;
  --destructive-foreground: #c4242a;
  --border: #e0e0e0;
  --input: #e0e0e0;
  --ring: #f8f8f8;
  --brand: #7c3aed;

  /* Additional colors */
  --gray-light: #969597;
  --gray-dark: #575859;
  --disabled: #e6e6e6;
  --danger-background: #ffedef;
  --danger-background-hover: #ffdade;
  --danger-foreground: #c4242a;
  --warning-background: #fef3e3;
  --warning-foreground: #ff9e00;
  --warning-background-hover: #ffebd4;
  --success-background: #e6fce6;
  --success-background-hover: #cdfbcd;
  --success-foreground: #34a32d;

  /* Component colors */
  --panel-background: #ffffff;
  --page-background: #fcfcfc;
  --item-hover: #f8f8f8;
  --item-hover-active: #f0f0f0;
  --item-active: #f2f2f2;
  --item-select: #f3f3f3;
  --nav-item-hover: #efeeee;
  --nav-item-select: #e6e6e6;
  --track-background: hsl(0 0% 89.8%);
  --icon-color: #575859;
  --popover: #ffffff;
  --popover-foreground: #000000;

  /* Text colors */
  --text-default: var(--foreground);
  --text-disabled: var(--gray-light);
  --text-secondary: var(--gray-dark);
  --text-tertiary: var(--gray-light);
  --text-danger: var(--destructive);
  --text-primary: var(--primary);

  /* Font families */
  --font-sans: "Roobert_Pro", sans-serif;
  --font-mono:
    "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows */
  --shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
  --shadow-scroll-indicator: 0px 3px 5px 0px rgba(0, 0, 0, 0.08);

  /* Border */
  --default-border-width: 0.5px;

  /* Font sizes */
  --text-3xs: 6px;
  --text-3xs--line-height: 1;
  --text-2xs: 8px;
  --text-2xs--line-height: 1.25;
  --text-xs: 11px;
  --text-xs--line-height: 1.25;
  --text-sm: 12px;
  --text-sm--line-height: 1.25;
  --text-base: 13px;
  --text-base--line-height: 1.25;
  --text-md: 14px;
  --text-md--line-height: 1.25;
  --text-lg: 16px;
  --text-lg--line-height: 1.25;
  --text-xl: 18px;
  --text-xl--line-height: 1.25;
  --text-2xl: 20px;
  --text-2xl--line-height: 1.25;
  --text-3xl: 24px;
  --text-3xl--line-height: 1.25;
  --text-4xl: 30px;
  --text-4xl--line-height: 1.25;
  --text-size-inherit: inherit;

  --text-icon-size: 16px;
  --text-icon-size--line-height: 1.05;
  --text-icon-size-sm: 12px;
  --text-icon-size-sm--line-height: 1.05;
  --text-icon-size-lg: 18px;
  --text-icon-size-lg--line-height: 1.05;

  /* Line heights */
  --leading-1_3: 1.3;
  --leading-1_5: 1.5;
  --leading-1_7: 1.7;

  /* Radius */
  --radius: 6px;

  /* Spacing */
  --spacing: 4px;

  /* Shadcn compatibility - pointing to existing vars */
  --card: var(--background);
  --card-foreground: var(--foreground);
}

.dark {
  /* Dark mode overrides would go here if needed */
}

@theme inline {
  /* Core theme colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-background-secondary: var(--background-secondary);
  --color-foreground-hover: var(--foreground-hover);
  --color-primary: var(--primary);
  --color-primary-light: var(--primary-light);
  --color-primary-dark: var(--primary-dark);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-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-brand: var(--brand);

  /* Utils */
  --breakpoint-3xl: 1600px;
  --breakpoint-4xl: 2000px;

  /* Additional colors */
  --color-gray-light: var(--gray-light);
  --color-gray-dark: var(--gray-dark);
  --color-disabled: var(--disabled);
  --color-danger-background: var(--danger-background);
  --color-danger-background-hover: var(--danger-background-hover);
  --color-danger-foreground: var(--danger-foreground);
  --color-warning-background: var(--warning-background);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-background-hover: var(--warning-background-hover);
  --color-success-background: var(--success-background);
  --color-success-background-hover: var(--success-background-hover);
  --color-success-foreground: var(--success-foreground);

  /* Component colors */
  --color-page-background: var(--page-background);
  --color-panel-background: var(--panel-background);
  --color-item-hover: var(--item-hover);
  --color-item-hover-active: var(--item-hover-active);
  --color-item-active: var(--item-active);
  --color-item-select: var(--item-select);
  --color-nav-item-hover: var(--nav-item-hover);
  --color-nav-item-select: var(--nav-item-select);
  --color-track-background: var(--track-background);
  --color-icon-color: var(--icon-color);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  /* Text colors */
  --color-text-default: var(--text-default);
  --color-text-disabled: var(--text-disabled);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-danger: var(--text-danger);
  --color-text-primary: var(--text-primary);

  /* Font families */
  --font-heading:
    var(--font-heading), var(--font-sans), "ui-sans-serif", "-apple-system", "BlinkMacSystemFont",
    "Segoe UI Variable Display", "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial",
    "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --font-sans:
    var(--font-sans), "ui-sans-serif", "-apple-system", "BlinkMacSystemFont",
    "Segoe UI Variable Display", "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial",
    "sans-serif", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Shadows */
  --shadow: var(--shadow);
  --shadow-scroll-indicator: var(--shadow-scroll-indicator);

  /* Border */
  --default-border-width: var(--default-border-width);

  /* Font sizes */
  --text-3xs: var(--text-3xs);
  --text-3xs--line-height: var(--text-3xs--line-height);
  --text-2xs: var(--text-2xs);
  --text-2xs--line-height: var(--text-2xs--line-height);
  --text-xs: var(--text-xs);
  --text-xs--line-height: var(--text-xs--line-height);
  --text-sm: var(--text-sm);
  --text-sm--line-height: var(--text-sm--line-height);
  --text-base: var(--text-base);
  --text-base--line-height: var(--text-base--line-height);
  --text-md: var(--text-md);
  --text-md--line-height: var(--text-md--line-height);
  --text-lg: var(--text-lg);
  --text-lg--line-height: var(--text-lg--line-height);
  --text-xl: var(--text-xl);
  --text-xl--line-height: var(--text-xl--line-height);
  --text-2xl: var(--text-2xl);
  --text-2xl--line-height: var(--text-2xl--line-height);
  --text-3xl: var(--text-3xl);
  --text-3xl--line-height: var(--text-3xl--line-height);
  --text-4xl: var(--text-4xl);
  --text-4xl--line-height: var(--text-4xl--line-height);
  --text-size-inherit: var(--text-size-inherit);

  --text-icon-size: var(--text-icon-size);
  --text-icon-size--line-height: var(--text-icon-size--line-height);
  --text-icon-size-sm: var(--text-icon-size-sm);
  --text-icon-size-sm--line-height: var(--text-icon-size-sm--line-height);
  --text-icon-size-lg: var(--text-icon-size-lg);
  --text-icon-size-lg--line-height: var(--text-icon-size-lg--line-height);

  /* Line heights */
  --leading-1_3: var(--leading-1_3);
  --leading-1_5: var(--leading-1_5);
  --leading-1_7: var(--leading-1_7);

  /* Radius */
  --radius-xs: calc(var(--radius) - 4px);
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: calc(var(--radius) + 2px);
  --radius-base: var(--radius);
  --radius: var(--radius);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 6px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Spacing */
  --spacing: var(--spacing);
}

@layer base {
  * {
    @apply border-border outline-ring/0;
  }
  body {
    @apply bg-background-secondary text-foreground text-base h-full w-full;
  }
  html {
    @apply h-full w-full;
  }
}
