/* Self-hosted fonts (CDN would be blocked under COEP: require-corp). */
@import "@fontsource-variable/hanken-grotesk";
@import "@fontsource-variable/jetbrains-mono";
@import "tailwindcss";

@theme {
  --default-transition-duration: 75ms;

  --font-sans: "Hanken Grotesk Variable", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  /* Warm zinc overrides (limic.dev neutral palette). */
  --color-zinc-50: #fafaf9;
  --color-zinc-100: #f5f4f4;
  --color-zinc-200: #e5e4e5;
  --color-zinc-300: #d6d4d7;
  --color-zinc-400: #a3a1a8;
  --color-zinc-500: #747178;
  --color-zinc-600: #555259;
  --color-zinc-700: #423f42;
  --color-zinc-800: #2a2729;
  --color-zinc-900: #1b181a;
  --color-zinc-950: #0c090b;

  /* Project accent: chartreuse (~110°). */
  --color-accent-50: #f3fae3;
  --color-accent-100: #e3f4c1;
  --color-accent-200: #c9e98e;
  --color-accent-300: #a9d957;
  --color-accent-400: #88c130;
  --color-accent-500: #6fa520;
  --color-accent-600: #547d15;
  --color-accent-700: #426012;
  --color-accent-800: #374e15;
  --color-accent-900: #2f4116;

  /* Lifted warm canvas background. */
  --color-canvas: #221f21;

  --animate-fade-in: fade-in 0.4s ease-out both;
  --animate-slide-up: slide-up 0.35s ease-out both;
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

@layer base {
  html {
    color-scheme: dark;
  }

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-canvas text-zinc-100 antialiased;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-weight: 450;
    text-rendering: optimizeLegibility;
  }

  button:not(:disabled),
  select,
  summary,
  [role="button"] {
    cursor: pointer;
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
  }

  ::selection {
    @apply bg-accent-500/[0.28] text-accent-50;
  }

  /* Scope scrollbar styling to scrollable containers, not *. */
  body,
  .overflow-y-auto,
  .overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--color-zinc-700) transparent;
  }

  /* Shared range-input styling for the editor sliders. */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.25rem;
    background: transparent;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--color-zinc-800);
  }
  input[type="range"]::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--color-zinc-800);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -0.3125rem;
    height: 1rem;
    width: 1rem;
    border-radius: 999px;
    background: var(--color-zinc-100);
    border: 2px solid var(--color-accent-500);
    transition: transform 0.1s ease;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
  }
  input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border-radius: 999px;
    background: var(--color-zinc-100);
    border: 2px solid var(--color-accent-500);
  }
  input[type="range"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

@layer utilities {
  /* Subtle warm checkerboard for transparent-image backdrops. */
  .bg-checker {
    background-color: #1b181a;
    background-image:
      linear-gradient(45deg, #2a2729 25%, transparent 25%), linear-gradient(-45deg, #2a2729 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #2a2729 75%), linear-gradient(-45deg, transparent 75%, #2a2729 75%);
    background-size: 20px 20px;
    background-position:
      0 0,
      0 10px,
      10px -10px,
      -10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}