@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --header: 210 40% 98%;
    --header-foreground: var(--foreground);

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --tertiary: 214 32% 91%;
    --tertiary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 220 8.9% 46.1%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --primary-accent: 243 75.4% 58.6%;
    --hover-primary-accent: 239 83.5% 66.7%;

    --muted-green: 84 81% 44%;
    --muted-magenta: 330 90% 70%;
    --muted-blue: 239 84% 67%;
    --muted-gray: 210 50% 91.1%;

    --accent-light-green: 138 76.5% 96.7%;
    --accent-dark-green: 112 100% 32%;

    --light-red: 329 77.8% 94.7%;
    --dark-red: 0 72.2% 50.6%;

    --light-yellow: 55 91.7% 95.3%;
    --dark-yellow: 43 96% 40%;

    --light-green: 141 84.2% 92.5%;
    --dark-green: 176 60.8% 19%;

    --light-blue: 214 94.6% 92.7%;
    --dark-blue: 217 91.2% 59.8%;

    --accent-light-blue: 251 95.2% 91.8%;
    --accent-dark-blue: 224 76.3% 38%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 210 40% 96.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    --chart-1: var(--dark-green);
    --chart-2: var(--dark-yellow);
    --chart-3: var(--dark-blue);
    --chart-4: var(--dark-red);
    --chart-grid: var(--muted-gray);
    --color-1: oklch(66.2% 0.225 25.9);
    --color-2: oklch(60.4% 0.26 302);
    --color-3: oklch(69.6% 0.165 251);
    --color-4: oklch(80.2% 0.134 225);
    --color-5: oklch(90.7% 0.231 133);

    /* Banner height system for fixed/sticky positioning
       Banner components dynamically update --banner-height via JS */
    --banner-height: 0px;
    --banner-offset: calc(
      env(safe-area-inset-top, 0px) + var(--banner-height, 0px)
    );
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 83%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 88%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 88%;

    --header: 217.2 32.6% 15%;
    --header-foreground: var(--foreground);

    --border: 217.2 32.6% 27.5%;
    --input: 217.2 32.6% 27.5%;

    --primary: 210 40% 83%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 88%;

    --tertiary: 217.2 32.6% 30%;
    --tertiary-foreground: 210 40% 88%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 20% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --ring: 217.2 32.6% 17.5%;

    --primary-accent: 246 55% 70%;
    --muted-primary-accent: 239 83.5% 66.7%;

    --muted-blue: 215 95% 73.1%;
    --muted-green: 142 76.7% 73.1%;
    --muted-magenta: 330 76.7% 73.1%;
    --muted-gray: 210 50% 25%;

    --light-red: 0 62.8% 30.6%;
    --dark-red: 0 90.6% 70.8%;

    --light-yellow: 32 81% 28.8%;
    --dark-yellow: 53 98.3% 76.9%;

    --light-green: 144 61.2% 20.2%;
    --dark-green: 142 76.7% 73.1%;

    --light-blue: 224 64.3% 32.9%;
    --dark-blue: 212 96.4% 78.4%;

    --accent-light-green: 192 21% 9%;
    --accent-dark-green: 124 21.8% 30.6%;

    --accent-light-blue: 263 60% 50.4%;
    --accent-dark-blue: 224 50% 90%;

    --radius: 0.5rem;

    --sidebar-background: 222.2 84% 4.9%;
    --sidebar-foreground: 210 40% 83%;
    --sidebar-primary: 210 40% 81%;
    --sidebar-primary-foreground: 222.2 47.4% 10.2%;
    --sidebar-accent: 217.2 32.6% 16.5%;
    --sidebar-accent-foreground: 210 40% 86%;
    --sidebar-border: 217.2 32.6% 26.5%;
    --sidebar-ring: 224.3 76.3% 46%;

    --chart-1: var(--dark-green);
    --chart-2: var(--dark-yellow);
    --chart-3: var(--dark-blue);
    --chart-4: var(--dark-red);
    --chart-grid: var(--muted-gray);
    --color-1: oklch(66.2% 0.225 25.9);
    --color-2: oklch(60.4% 0.26 302);
    --color-3: oklch(69.6% 0.165 251);
    --color-4: oklch(80.2% 0.134 225);
    --color-5: oklch(90.7% 0.231 133);
  }

  .theme {
    --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
  }
}

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

  html,
  body {
    /* Prevent pull-to-refresh and rubber-banding on the page level only */
    overscroll-behavior-y: none;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  html,
  body,
  div#__next,
  div#__next > div {
    height: 100%;
  }
}

@layer base {
  input[type="number"].appearance-none::-webkit-inner-spin-button,
  input[type="number"].appearance-none::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"].appearance-none {
    -moz-appearance: textfield;
    appearance: none;
  }
}

/* Custom styles for react-grid-layout resize handle */
.react-resizable-handle {
  position: absolute;
  bottom: 5px !important;
  right: 5px !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}

.react-resizable-handle::after {
  content: "";
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
}

@theme inline {
  @keyframes rainbow {
    0% {
      background-position: 0%;
    }

    100% {
      background-position: 200%;
    }
  }
}

/* 
 * Fix for Vaul drawer blocking text selection
 * Vaul applies user-select: none to the entire drawer on desktop via CSS media query
 * We override this for drawers that set blockTextSelection={false}
 * See: node_modules/vaul/dist/index.js line 84
 */
[data-vaul-drawer][data-allow-text-selection="true"],
[data-vaul-drawer][data-allow-text-selection="true"] * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}