@import "tailwindcss";

@import '@radix-ui/colors/sage-dark.css' layer(base);
@import '@radix-ui/colors/olive.css' layer(base);
@import '@radix-ui/colors/olive-dark.css' layer(base);
@import '@radix-ui/colors/sand.css' layer(base);
@import '@radix-ui/colors/sand-dark.css' layer(base);
@import '@radix-ui/colors/red.css' layer(base);
@import '@radix-ui/colors/red-dark.css' layer(base);
@import '@radix-ui/colors/ruby.css' layer(base);
@import '@radix-ui/colors/ruby-dark.css' layer(base);
@import '@radix-ui/colors/crimson.css' layer(base);
@import '@radix-ui/colors/crimson-dark.css' layer(base);
@import '@radix-ui/colors/pink.css' layer(base);
@import '@radix-ui/colors/pink-dark.css' layer(base);
@import '@radix-ui/colors/plum.css' layer(base);
@import '@radix-ui/colors/plum-dark.css' layer(base);
@import '@radix-ui/colors/purple.css' layer(base);
@import '@radix-ui/colors/purple-dark.css' layer(base);
@import '@radix-ui/colors/violet.css' layer(base);
@import '@radix-ui/colors/violet-dark.css' layer(base);
@import '@radix-ui/colors/iris.css' layer(base);
@import '@radix-ui/colors/iris-dark.css' layer(base);
@import '@radix-ui/colors/indigo.css' layer(base);
@import '@radix-ui/colors/indigo-dark.css' layer(base);
@import '@radix-ui/colors/blue.css' layer(base);
@import '@radix-ui/colors/blue-dark.css' layer(base);
@import '@radix-ui/colors/cyan.css' layer(base);
@import '@radix-ui/colors/cyan-dark.css' layer(base);
@import '@radix-ui/colors/teal.css' layer(base);
@import '@radix-ui/colors/teal-dark.css' layer(base);
@import '@radix-ui/colors/jade.css' layer(base);
@import '@radix-ui/colors/jade-dark.css' layer(base);
@import '@radix-ui/colors/green.css' layer(base);
@import '@radix-ui/colors/green-dark.css' layer(base);
@import '@radix-ui/colors/grass.css' layer(base);
@import '@radix-ui/colors/grass-dark.css' layer(base);
@import '@radix-ui/colors/bronze.css' layer(base);
@import '@radix-ui/colors/bronze-dark.css' layer(base);
@import '@radix-ui/colors/gold.css' layer(base);
@import '@radix-ui/colors/gold-dark.css' layer(base);
@import '@radix-ui/colors/brown.css' layer(base);
@import '@radix-ui/colors/brown-dark.css' layer(base);
@import '@radix-ui/colors/orange.css' layer(base);
@import '@radix-ui/colors/orange-dark.css' layer(base);
@import '@radix-ui/colors/amber.css' layer(base);
@import '@radix-ui/colors/amber-dark.css' layer(base);
@import '@radix-ui/colors/yellow.css' layer(base);
@import '@radix-ui/colors/yellow-dark.css' layer(base);
@import '@radix-ui/colors/lime.css' layer(base);
@import '@radix-ui/colors/lime-dark.css' layer(base);
@import '@radix-ui/colors/mint.css' layer(base);
@import '@radix-ui/colors/mint-dark.css' layer(base);
@import '@radix-ui/colors/sky.css' layer(base);
@import '@radix-ui/colors/sky-dark.css' layer(base);
@import '@radix-ui/colors/tomato.css' layer(base);
@import '@radix-ui/colors/tomato-dark.css' layer(base);
@import '@radix-ui/colors/gray.css' layer(base);
@import '@radix-ui/colors/gray-dark.css' layer(base);
@import '@radix-ui/colors/mauve.css' layer(base);
@import '@radix-ui/colors/mauve-dark.css' layer(base);
@import '@radix-ui/colors/slate.css' layer(base);
@import '@radix-ui/colors/slate-dark.css' layer(base);
@import '@radix-ui/colors/slate-alpha.css' layer(base);
@import '@radix-ui/colors/slate-dark-alpha.css' layer(base);

@import 'tailwindcss/theme' layer(theme);

@import 'tailwindcss/preflight' layer(base);

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  #spark-app {
    --tomato-contrast: #fff;
    --red-contrast: #fff;
    --ruby-contrast: #fff;
    --crimson-contrast: #fff;
    --pink-contrast: #fff;
    --plum-contrast: #fff;
    --purple-contrast: #fff;
    --violet-contrast: #fff;
    --iris-contrast: #fff;
    --indigo-contrast: #fff;
    --blue-contrast: #fff;
    --cyan-contrast: #fff;
    --teal-contrast: #fff;
    --jade-contrast: #fff;
    --green-contrast: #fff;
    --grass-contrast: #fff;
    --bronze-contrast: #fff;
    --gold-contrast: #fff;
    --brown-contrast: #fff;
    --orange-contrast: #fff;
    --amber-contrast: #000;
    --yellow-contrast: #000;
    --lime-contrast: #000;
    --mint-contrast: #000;
    --sky-contrast: #000;
    --gray-contrast: #fff;
    --mauve-contrast: #fff;
    --slate-contrast: #fff;
    --sage-contrast: #fff;
    --olive-contrast: #fff;
    --sand-contrast: #fff;

    /**
   * Spacing scale
   *
   * These variables define a spacing scale based on Tailwind's default.
   * We've introduced a --size-scale variable as a multiplier.
   * By adjusting this single value, we can proportionally
   * scale all spacing throughout the entire application.
   *
   * https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
   */
    --size-scale: 1;
    --size-0: 0px;
    --size-px: 1px;
    --size-0-5: calc(0.125rem * var(--size-scale));
    --size-1: calc(0.25rem * var(--size-scale));
    --size-1-5: calc(0.375rem * var(--size-scale));
    --size-2: calc(0.5rem * var(--size-scale));
    --size-2-5: calc(0.625rem * var(--size-scale));
    --size-3: calc(0.75rem * var(--size-scale));
    --size-3-5: calc(0.875rem * var(--size-scale));
    --size-4: calc(1rem * var(--size-scale));
    --size-5: calc(1.25rem * var(--size-scale));
    --size-6: calc(1.5rem * var(--size-scale));
    --size-7: calc(1.75rem * var(--size-scale));
    --size-8: calc(2rem * var(--size-scale));
    --size-9: calc(2.25rem * var(--size-scale));
    --size-10: calc(2.5rem * var(--size-scale));
    --size-11: calc(2.75rem * var(--size-scale));
    --size-12: calc(3rem * var(--size-scale));
    --size-14: calc(3.5rem * var(--size-scale));
    --size-16: calc(4rem * var(--size-scale));
    --size-20: calc(5rem * var(--size-scale));
    --size-24: calc(6rem * var(--size-scale));
    --size-28: calc(7rem * var(--size-scale));
    --size-32: calc(8rem * var(--size-scale));
    --size-36: calc(9rem * var(--size-scale));
    --size-40: calc(10rem * var(--size-scale));
    --size-44: calc(11rem * var(--size-scale));
    --size-48: calc(12rem * var(--size-scale));
    --size-52: calc(13rem * var(--size-scale));
    --size-56: calc(14rem * var(--size-scale));
    --size-60: calc(15rem * var(--size-scale));
    --size-64: calc(16rem * var(--size-scale));
    --size-72: calc(18rem * var(--size-scale));
    --size-80: calc(20rem * var(--size-scale));
    --size-96: calc(24rem * var(--size-scale));

    /* Border radii */
    --radius-factor: 1;
    --radius-sm: calc(2px * var(--radius-factor) * var(--size-scale));
    --radius-md: calc(6px * var(--radius-factor) * var(--size-scale));
    --radius-lg: calc(8px * var(--radius-factor) * var(--size-scale));
    --radius-xl: calc(12px * var(--radius-factor) * var(--size-scale));
    --radius-2xl: calc(16px * var(--radius-factor) * var(--size-scale));
    --radius-full: 9999px;

    /* Neutral colors */
    --color-neutral-1: var(--slate-1);
    --color-neutral-2: var(--slate-2);
    --color-neutral-3: var(--slate-3);
    --color-neutral-4: var(--slate-4);
    --color-neutral-5: var(--slate-5);
    --color-neutral-6: var(--slate-6);
    --color-neutral-7: var(--slate-7);
    --color-neutral-8: var(--slate-8);
    --color-neutral-9: var(--slate-9);
    --color-neutral-10: var(--slate-10);
    --color-neutral-11: var(--slate-11);
    --color-neutral-12: var(--slate-12);
    --color-neutral-a1: var(--slate-a1);
    --color-neutral-a2: var(--slate-a2);
    --color-neutral-a3: var(--slate-a3);
    --color-neutral-a4: var(--slate-a4);
    --color-neutral-a5: var(--slate-a5);
    --color-neutral-a6: var(--slate-a6);
    --color-neutral-a7: var(--slate-a7);
    --color-neutral-a8: var(--slate-a8);
    --color-neutral-a9: var(--slate-a9);
    --color-neutral-a10: var(--slate-a10);
    --color-neutral-a11: var(--slate-a11);
    --color-neutral-a12: var(--slate-a12);
    --color-neutral-contrast: var(--slate-contrast);

    /* Accent colors */
    --color-accent-1: var(--blue-1);
    --color-accent-2: var(--blue-2);
    --color-accent-3: var(--blue-3);
    --color-accent-4: var(--blue-4);
    --color-accent-5: var(--blue-5);
    --color-accent-6: var(--blue-6);
    --color-accent-7: var(--blue-7);
    --color-accent-8: var(--blue-8);
    --color-accent-9: var(--blue-9);
    --color-accent-10: var(--blue-10);
    --color-accent-11: var(--blue-11);
    --color-accent-12: var(--blue-12);
    --color-accent-contrast: var(--blue-contrast);

    /* Secondary accent colors */
    --color-accent-secondary-1: var(--violet-1);
    --color-accent-secondary-2: var(--violet-2);
    --color-accent-secondary-3: var(--violet-3);
    --color-accent-secondary-4: var(--violet-4);
    --color-accent-secondary-5: var(--violet-5);
    --color-accent-secondary-6: var(--violet-6);
    --color-accent-secondary-7: var(--violet-7);
    --color-accent-secondary-8: var(--violet-8);
    --color-accent-secondary-9: var(--violet-9);
    --color-accent-secondary-10: var(--violet-10);
    --color-accent-secondary-11: var(--violet-11);
    --color-accent-secondary-12: var(--violet-12);
    --color-accent-secondary-contrast: var(--violet-contrast);

    /* Foreground colors */
    --color-fg: var(--color-neutral-12);
    --color-fg-secondary: var(--color-neutral-a11);

    /* Background colors */
    --color-bg: #ffffff;
    --color-bg-inset: var(--color-neutral-2);
    --color-bg-overlay: #ffffff;

    /* Focus ring */
    --color-focus-ring: var(--color-accent-9);

    /* Fonts */
    --font-sans-serif: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --font-family: var(--font-sans-serif);
  }

  #spark-app.dark-theme {
    --color-bg: var(--color-neutral-1);
    --color-bg-inset: #000000;
    --color-bg-overlay: var(--color-neutral-3);
  }
}