@import "tailwindcss";

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

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

@theme inline {
  --font-calendas: Calendas Plus, sans-serif;
  --font-overused-grotesk: Overused Grotesk, sans-serif;
  --font-cotham: Cotham Sans;
  --font-VT323: VT323;
  --font-tiny5: Tiny5;
  --font-azeret-mono: Azeret Mono;
  --font-fira-mono: Fira Mono, monospace;
  --font-noto-sans-symbols: Noto Sans Symbols;
  --font-satoshi: Satoshi, sans-serif;

  --font-sans: var(--font-overused-grotesk);
  --font-mono: var(--font-fira-mono);

  --color-lavender: #ecbfff;
  --color-reddish: #ff4a48;
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-blue: var(--blue);
  --color-blue-50: var(--blue-50);
  --color-blue-100: var(--blue-100);
  --color-blue-200: var(--blue-200);
  --color-blue-300: var(--blue-300);
  --color-blue-400: var(--blue-400);
  --color-blue-500: var(--blue-500);
  --color-blue-600: var(--blue-600);
  --color-blue-700: var(--blue-700);
  --color-blue-800: var(--blue-800);
  --color-blue-900: var(--blue-900);
  --color-blue-950: var(--blue-950);

  --color-editor-background: var(--editor-bg);
  --color-editor-border: var(--editor-border);

  --color-primary-red: var(--red);
  --color-primary-orange: var(--orange);
  --color-primary-pink: var(--pink);
  --color-primary-blue: var(--blue-700);

  --color-teal: var(--teal);
  --color-teal-foreground: var(--teal-foreground);

  --color-yellow: var(--yellow);
  --color-yellow-foreground: var(--yellow-foreground);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-circling: circling;
  --animate-background-gradient: background-gradient;
  --animate-slide-in-from-left: slide-in-from-left 0.3s ease-out;
  --animate-slide-out-to-left: slide-out-to-left 0.3s ease-in;
  --animate-slide-in-from-right: slide-in-from-right 0.3s ease-out;
  --animate-slide-out-to-right: slide-out-to-right 0.3s ease-in;
  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
  --animate-slide-out-to-top: slide-out-to-top 0.3s ease-in;
  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
  --animate-slide-out-to-bottom: slide-out-to-bottom 0.3s ease-in;

  @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;
    }
  }
  @keyframes slide-in-from-left {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-to-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes slide-in-from-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-to-right {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  @keyframes slide-in-from-top {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out-to-top {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }
  @keyframes slide-in-from-bottom {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out-to-bottom {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
  @keyframes circling {
    0% {
      transform: rotate(
          calc(var(--circling-direction, 1) * (var(--circling-offset) * 1deg))
        )
        translate(calc(var(--circling-radius) * 1px), 0)
        rotate(
          calc(var(--circling-direction, 1) * (var(--circling-offset) * -1deg))
        );
    }
    100% {
      transform: rotate(
          calc(
            var(--circling-direction, 1) *
              (360deg + (var(--circling-offset) * 1deg))
          )
        )
        translate(calc(var(--circling-radius) * 1px), 0)
        rotate(
          calc(
            var(--circling-direction, 1) *
              (-360deg + (var(--circling-offset) * -1deg))
          )
        );
    }
  }
  @keyframes background-gradient {
    0%,
    100% {
      transform: translate(0, 0);
      animation-delay: var(--background-gradient-delay, 0s);
    }
    20% {
      transform: translate(
        calc(100% * var(--tx-1, 1)),
        calc(100% * var(--ty-1, 1))
      );
    }
    40% {
      transform: translate(
        calc(100% * var(--tx-2, -1)),
        calc(100% * var(--ty-2, 1))
      );
    }
    60% {
      transform: translate(
        calc(100% * var(--tx-3, 1)),
        calc(100% * var(--ty-3, -1))
      );
    }
    80% {
      transform: translate(
        calc(100% * var(--tx-4, -1)),
        calc(100% * var(--ty-4, -1))
      );
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

@utility focus-outline {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    inset: 0 -0.5rem;
    inset-block: -0.25rem;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    pointer-events: none;
    transform: scale(0.95);
    opacity: 0;
    /* transition: transform 200ms ease-out, opacity 200ms ease-out, border-color 200ms ease-out; */
  }
  
  &:focus-visible {
    outline: none;
    
    &::after {
      border-color: var(--focus-outline-color, var(--color-primary-blue));
      transform: scale(1);
      opacity: 1;
    }
  }
}

@utility focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* transition: outline-color 200ms ease-out, outline-offset 200ms ease-out; */
  
  &:focus-visible {
    outline-color: var(--focus-ring-color, var(--color-primary-blue));
  }
}

@utility focus-primary {
  @apply focus-outline [--focus-outline-color:var(--color-primary-blue)];
}

/*
  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 {
  :root {
    --background: #ffffff;
    --foreground: #0c0a09;

    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;

    --primary: #0c0a09;
    --primary-foreground: #78716c;

    --secondary: #a1a1a6;
    --secondary-foreground: #f4f4f5;

    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;

    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;

    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;

    --radius: 0.5rem;

    /* Other colors */
    --red: #ff5941;
    --orange: #f97316;
    --pink: #e794da;
    --teal: #1f464d;
    --teal-foreground: #3bb6ab;
    --yellow: #eab308;
    --yellow-foreground: #ffd726;

    --editor-bg: #151515;
    --editor-border: #252525;

    --blue: var(--blue-700);
  
    --blue-50: #e8f3ff;
    --blue-100: #d5e8ff;
    --blue-200: #b3d2ff;
    --blue-300: #85b2ff;
    --blue-400: #5684ff;
    --blue-500: #2f56ff;
    --blue-600: #0c22ff;
    --blue-700: #0015ff;
    --blue-800: #0619cd;
    --blue-900: #10229f;
    --blue-950: #0a125c;
  }

  .dark {
    --background: #0c0a09;
    --foreground: #f1f1f3;

    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;

    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;

    --primary: #cacace;
    --primary-foreground: #f4f4f5;

    --secondary: #96928f;
    --secondary-foreground: #787778;

    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;

    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;

    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 24 5.7% 82.9%;

    --blue: var(--blue-400);

    /* Other colors */
    --red: #ff5941;
    --orange: #f97316;
    --pink: #e794da;
    /* --blue: #5570ff; */
    --teal: #1f464d;
    --teal-foreground: #3bb6ab;
    --yellow: #eab308;
    --yellow-foreground: #ffd726;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  *:focus-visible {
    outline: 2px solid var(--color-primary-blue);
    border-radius: 0.5rem;
    outline-offset: 2px;
  }

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

  @font-face {
    font-family: "Overused Grotesk";
    src:
      url("../../public/fonts/overused-grotesk.woff2")
        format("woff2 supports variations"),
      url("../../public/fonts/overused-grotesk.woff2")
        format("woff2-variations");
    font-weight: 300 900;
  }

  @font-face {
    font-family: "Cotham Sans";
    src: url("../../public/fonts/cotham-sans.otf") format("otf");
    font-weight: 400;
  }

  @font-face {
    font-family: "Calendas Plus";
    src: url("../../public/fonts/calendas-plus.woff") format("woff");
    font-weight: 400;
  }

  @font-face {
    font-family: "VT323";
    src: url("../../public/fonts/vt323.ttf") format("truetype");
    font-weight: 400;
  }

  @font-face {
    font-family: "Tiny5";
    src: url("../../public/fonts/tiny5.ttf") format("truetype");
  }

  @font-face {
    font-family: "Azeret Mono";
    src: url("../../public/fonts/azeret-mono.woff2")
      format("woff2-variations");
    font-weight: 100 900;
  }

  @font-face {
    font-family: "Noto Sans Symbols";
    src: url("../../public/fonts/noto-sans.ttf")
      format("truetype-variations");
    font-weight: 100 900;
  }

  @font-face {
    font-family: "Fira Mono";
    src: url("../../public/fonts/fira-mono-regular.ttf") format("truetype");
    font-weight: 400;
  }

  @font-face {
    font-family: "Fira Mono";
    src: url("../../public/fonts/fira-mono-medium.ttf") format("truetype");
    font-weight: 500;
  }

  @font-face {
    font-family: "Fira Mono";
    src: url("../../public/fonts/fira-mono-bold.ttf") format("truetype");
    font-weight: 700;
  }

  @font-face {
    font-family: "Satoshi";
    src: url("../../public/fonts/satoshi.woff2") format("woff2-variations");
    font-weight: 300 900;
  }

  @font-face {
    font-family: "Satoshi Italic";
    src: url("../../public/fonts/satoshi-italic.woff2") format("woff2-variations");
    font-weight: 400;
  }
}