@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Source+Code+Pro:wght@200..900&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';
@import './colors.css';

@source './components/';
@source './lib/';
/* Streamdown ships Tailwind classes in pre-built dist JS; */
@source 'streamdown/dist';
@source '@streamdown/mermaid/dist';
@import 'streamdown/styles.css';

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

/* Dark mode configuration */
@variant dark (@media (prefers-color-scheme: dark));
@variant dark (.dark &);

@theme inline {
  /* Container query breakpoint overrides for layout system */
  --container-2xl: 40rem; /* 640px - Override Tailwind's default 672px */
  --container-8xl: 96rem; /* 1536px - Custom breakpoint for widest layouts */

  /* Typography scale overrides - font sizes */
  --text-2xs: 0.625rem;
  /* 10px */
  --text-2xl: 1.5rem;
  /* 24px (TW default is 24px) */
  --text-3xl: 1.75rem;
  /* 28px (TW default is 30px) */
  --text-4xl: 2rem;
  /* 32px (TW default is 36px) */
  --text-5xl: 2.25rem;
  /* 36px (TW default is 48px) */

  /* Typography scale overrides - line heights */
  --text-2xs--line-height: 0.75rem;
  /* 12px */
  --text-xs--line-height: 0.875rem;
  /* 14px (TW default is 16px) */
  --text-sm--line-height: 1.125rem;
  /* 18px (TW default is 20px) */
  --text-base--line-height: 1.25rem;
  /* 20px (TW default is 24px) */
  --text-lg--line-height: 1.5rem;
  /* 24px (TW default is 28px) */
  --text-xl--line-height: 1.5rem;
  /* 24px (TW default is 28px) */
  --text-2xl--line-height: 1.75rem;
  /* 28px (TW default is 32px) */
  --text-3xl--line-height: 2rem;
  /* 32px (TW default is 36px) */
  --text-4xl--line-height: 2.5rem;
  /* 40px (TW default is 40px) */
  --text-5xl--line-height: 2.75rem;
  /* 44px (TW default is 1) */

  --font-sans: var(--font-inter);
  --font-marketing: var(--font-space-grotesk);
  --font-mono: var(--font-source-code-pro);
  --tracking-tight: -0.04px;
  --tracking-tighter: -0.08px;
  --tracking-tightest: -0.1px;
  --shadow-sm: 0 1px 2px 0 var(--effect-shadow-sm);
  /* tooltips; small containers */
  --shadow-default:
    0 1px 3px 0 var(--effect-shadow-md), 0 1px 2px 0 var(--effect-shadow-sm);
  /* menus; popovers; hover cards */
  --shadow-md:
    0 4px 6px -1px var(--effect-shadow-lg),
    0 2px 4px -1px var(--effect-shadow-md);
  /* sonner; temporary elements */
  --shadow-lg:
    0 10px 15px -3px var(--effect-shadow-xl),
    0 4px 6px -2px var(--effect-shadow-lg);
  /* modals; dialogs without backdrop overlay */
  --shadow-xl:
    0 20px 25px -5px var(--effect-shadow-xl),
    0 10px 10px -5px var(--effect-shadow-lg);
  /* modals; dialogs with backdrop overlay */
  --shadow-focus-ring: 0 0 0 1px var(--ring), 0 0 0 3px var(--ring-muted);
  /* default focus ring: inner border (1px dark) + outer glow (3px light, 2px visible beyond inner) */
  --shadow-focus-ring-destructive:
    0 0 0 1px var(--ring-destructive), 0 0 0 3px var(--ring-destructive-muted);
  --shadow-pinned-column:
    4px 0 8px 0 var(--effect-shadow-md), 3px 0 2px 0 var(--effect-shadow-md);
  /* horizontal edge shadow for the last pinned column in data grids */

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;
  --avatar-icon-default: 1.09375rem;
  --avatar-icon-xs: 0.875rem;
  --avatar-icon-xxs: 0.65625rem;
  --avatar-image-backdrop: rgba(2, 6, 23, 0.2);

  /* Date picker calendar — fixed columns aligned with w-9 day cells */
  --grid-template-columns-calendar: repeat(7, calc(var(--spacing) * 9));
  --grid-template-columns-calendar-weeks: calc(var(--spacing) * 8)
    repeat(7, calc(var(--spacing) * 9));
}

:root {
  --radius: 0.375rem;
  /* 6px - default radius, maps to radius-md */
  --font-inter: 'Inter', sans-serif;
  --font-space-grotesk: 'Space Grotesk', sans-serif;
  --font-source-code-pro: 'Source Code Pro', monospace;
  --code-block-collapsed-height: 6.5rem;
  --code-block-fade-height: 0.9375rem;
  --message-content-max-width: 80%;

  /* Component-specific sizing */
  --alert-icon-width: calc(var(--spacing) * 4);
  /* 16px - width of icon column in alert grid */
  --drawer-max-height: 80vh;
  /* Maximum height for top/bottom drawers */

  /* Effect tokens are not generated from the Figma colour sync. */
  --effect-shadow-sm: rgba(0, 0, 0, 0.04);
  --effect-shadow-md: rgba(0, 0, 0, 0.05);
  --effect-shadow-lg: rgba(0, 0, 0, 0.06);
  --effect-shadow-xl: rgba(0, 0, 0, 0.1);

  /* Gradient tokens */
  --gradient-nordic: linear-gradient(
    -100deg,
    var(--nordic-50) 0%,
    var(--nordic-400) 44%,
    var(--nordic-200) 100%
  );
  --gradient-aurora: linear-gradient(
    -100deg,
    var(--aurora-50) 0%,
    var(--aurora-400) 50%,
    var(--aurora-200) 100%
  );
  --gradient-dusk: linear-gradient(
    -100deg,
    var(--dusk-50) 0%,
    var(--dusk-400) 48%,
    var(--dusk-200) 100%
  );
  --gradient-equinox: linear-gradient(
    -100deg,
    var(--dusk-600) 0%,
    var(--dusk-300) 40%,
    var(--aurora-50) 60%,
    var(--aurora-100) 100%
  );
  --gradient-summer: linear-gradient(
    -100deg,
    var(--nordic-100) 0%,
    var(--dusk-50) 50%,
    var(--aurora-100) 100%
  );
  --gradient-spring: linear-gradient(
    -100deg,
    var(--aurora-50) 0%,
    var(--nordic-100) 50%,
    var(--aurora-100) 100%
  );
  --gradient-fall: linear-gradient(
    -100deg,
    var(--fjord-550) 0%,
    var(--dusk-550) 50%,
    var(--dusk-300) 100%
  );
  --gradient-active: linear-gradient(
    90deg,
    var(--color-muted-foreground) 0%,
    var(--color-muted-foreground) 32%,
    color-mix(in oklab, var(--fjord-550) 60%, var(--color-muted-foreground)) 42%,
    color-mix(in oklab, var(--nordic-400) 60%, var(--color-muted-foreground))
      48%,
    color-mix(in oklab, var(--aurora-400) 60%, var(--color-muted-foreground))
      54%,
    var(--color-muted-foreground) 64%,
    var(--color-muted-foreground) 100%
  );
}

.dark {
  --effect-shadow-sm: rgba(0, 0, 0, 0.2);
  --effect-shadow-md: rgba(0, 0, 0, 0.302);
  --effect-shadow-lg: rgba(0, 0, 0, 0.4);
  --effect-shadow-xl: rgba(0, 0, 0, 0.6);

  /* Gradient tokens */
  --gradient-nordic: linear-gradient(
    -100deg,
    var(--nordic-900) 0%,
    var(--nordic-600) 44%,
    var(--nordic-800) 100%
  );
  --gradient-aurora: linear-gradient(
    -100deg,
    var(--aurora-900) 0%,
    var(--aurora-600) 50%,
    var(--aurora-800) 100%
  );
  --gradient-dusk: linear-gradient(
    -100deg,
    var(--dusk-900) 0%,
    var(--dusk-600) 48%,
    var(--dusk-800) 100%
  );
  --gradient-equinox: linear-gradient(
    -100deg,
    var(--dusk-400) 0%,
    var(--dusk-700) 40%,
    var(--aurora-950) 60%,
    var(--aurora-900) 100%
  );
  --gradient-summer: linear-gradient(
    -100deg,
    var(--nordic-900) 0%,
    var(--dusk-950) 50%,
    var(--aurora-900) 100%
  );
  --gradient-spring: linear-gradient(
    -100deg,
    var(--aurora-950) 0%,
    var(--nordic-900) 50%,
    var(--aurora-900) 100%
  );
  --gradient-fall: linear-gradient(
    -100deg,
    var(--fjord-450) 0%,
    var(--dusk-450) 50%,
    var(--dusk-700) 100%
  );
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  :where(svg.tabler-icon) {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.5;
  }
}

@layer utilities {
  @keyframes aura-loader-rect-1-animation {
    0% {
      stroke-dashoffset: 172;
    }

    50% {
      stroke-dashoffset: 422;
    }

    100% {
      stroke-dashoffset: 422;
    }
  }

  @keyframes aura-loader-rect-2-animation {
    0% {
      stroke-dashoffset: 422;
    }

    50% {
      stroke-dashoffset: 172;
    }

    100% {
      stroke-dashoffset: 172;
    }
  }

  .aura-loader-rect {
    stroke-dasharray: 97.95 152;
  }

  .aura-loader-rect-1 {
    animation: aura-loader-rect-1-animation 2s ease-in-out infinite;
    stroke-dashoffset: 172;
  }

  .aura-loader-rect-2 {
    animation: aura-loader-rect-2-animation 2s 0.5s ease-in-out infinite;
    stroke-dashoffset: 422;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-slot='loader-rect'] {
      animation: none;
    }

    [data-sd-animate] {
      animation: none;
    }
  }

  [data-state='closed'] {
    --tw-animation-fill-mode: forwards;
  }

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }

  .animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
  }

  .animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
  }
}