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

/* Custom base layer */
@layer base {
  ::selection {
    @apply bg-lime-400 text-black;
  }
  .dark ::selection {
    @apply bg-lime-500 text-white;
  }
}

@theme {
      --color-canvas: #ECECE4;
      --color-canvas-dark: #0B0C08;
      --color-panel: #FFFFFF;
      --color-panel-dark: #131511;
      --color-panel2: #DFE1D3;
      --color-panel2-dark: #1B1E17;
      --color-paper: #FFFFFF;
      --color-ink: #0E0F0A;
      --color-paper-fg: #ECEDE3;
      --color-lime: #3D7A0F;
      --color-lime-dark: #A6FF00;
      --color-pink: #BE1668;
      --color-pink-dark: #FF2E93;
      --color-yellow: #9C6600;
      --color-yellow-dark: #FFD100;

      --font-display: "Archivo Black", sans-serif;
      --font-body: "Space Grotesk", sans-serif;
      --font-mono: "JetBrains Mono", monospace;
    }

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


/* Only animation mechanics live here — every color/theme change is handled by Tailwind's dark: variant. */
  *{ box-sizing:border-box; }
  html{ 
    scroll-behavior: smooth !important;
    transition: 1s !important;
    /* content-visibility: auto; */
  }

  *{
    scroll-behavior: smooth !important;
    transition: .5s !important;
    /* content-visibility: auto; */
  }
  

  .caret{ display:inline-block; width:.55ch; animation: blink 1s step-start infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  .type-line{ overflow:hidden; white-space:nowrap; width:0; animation: type 1.6s steps(30,end) forwards; }
  .type-1{ animation-delay: .2s; }
  .type-2{ animation-delay: 2s; }
  .type-3{ animation-delay: 3.6s; }
  @keyframes type{ to{ width: 100%; } }

  .grain-dots{
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 14px 14px;
    opacity:.12;
  }

  @media (prefers-reduced-motion: reduce){
    .type-line, .caret{ animation:none !important; width:auto !important; }
  }